Search code examples
typescriptwebpackanimejs

Can't get Animejs library to work in my typescript & webpack project


I recently switched from ES5 to typescript and webpack. My wish is to use the Threejs library (no problems there, yet!) and the Animejs library for its fancy timeline animation functions. Spent all day yesterday trying to get it to work (you know the drill: 30+ tabs open). I followed the instructions in the Animejs documentation,

npm install animejs --save

then

import anime from 'animejs/lib/anime.es.js';

... and I got the error:

Could not find a declaration file for module 'animejs/lib/anime.es.js'

I made sure they were installed with the command:

npm i --save-dev @types/animejs

I checked the @types folder and there ís an Animejs folder with an index.d.ts file inthere. I also checked the tsconfig and it checks this folder for declaration files.

{
    "compilerOptions": {
        "moduleResolution": "node",
        "strict": true
    },
    "typeRoots": [
        "./node_modules/@types/"
    ],
    "noImplicitAny": false,
    "include": ["**/*.ts", "test"]
}

After some googlin' I found that if I just changed the implementation method the error is resolved. Animejs' doc says it should be as follows:

import anime from 'animejs/lib/anime.es.js';

I changed that to this: (and the error was gone)

import * as anime from 'animejs';

Now as I'm clearly a novice in this new pipeline, I hardly see how that made a difference. But I have a new problem now: when I declare a new anime animation (example code below is from Animejs' documentation)..

anime({
  targets: '.css-selector-demo .el',
  translateX: 250
});

..it does compile, but I get an error in the JS console (using Chrome)

Uncaught TypeError: anime is not a function

Now I'm lost. Don't have any colleagues to ask either. Please help!


Solution

  • Right! Thanks for the help so far. I did figure it out eventually, kind of. So what I did was I used this line to import it

    import anime from 'animejs/lib/anime.es.js';
    

    Then I uninstalled and reinstalled the animejs framework, including it's @types. This is what my tsconfig.json now looks like (I also made some changes here, with a little help from a friend).

    {
        "compilerOptions": {
            "moduleResolution": "node",
            "strict": true, 
            "allowJs": true,
        },
        "typeRoots": [
            "../node_modules/@types/"
        ],
        "noImplicitAny": false,
        "include": ["**/*.ts", "test"]
    }
    

    I'm not entirely certain which change did the trick, but the trick it did. Hopefully anyone struggling with this same issue may find this useful!