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

Question

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!

Looking at the [npm documentation](https://www.npmjs.com/package/animejs), it looks like the recommended usage is via `import anime from 'animejs/lib/anime.es.js';` Once you install your TypeScript declaration files with `@types/animejs`, then it should work. What was the problem you encountered at that point? Why did you then change it to `import * as anime`? — M -, May 27 '22 at 17:31
Hey Marquizzo, thanks for helping! When I do as you say I get this error: "Could not find a declaration file for module 'animejs/lib/anime.es.js'. '.../node_modules/animejs/lib/anime.es.js' implicitly has an 'any' type." — mouseDown, May 28 '22 at 15:12

score 1 · Accepted Answer · answered Jan 15 '23 at 10:00

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!

In my case, it resolved when I installed types and restarted the language server in vscode. — Navid Shad, Aug 28 '23 at 20:37

score 0 · Answer 2 · answered Nov 04 '22 at 01:50

0

Try this

import anime from 'animejs';

This is what I personally use on a regular basis. I also don't use @types/animejs so I think you can safely uninstall the package.

answered Nov 04 '22 at 01:50

Barjuan Davis

45
1
1
8

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

2 Answers2