无法让 Animejs 库在我的 typescript 和 webpack 项目中工作

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!

Answer 1

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.

Answer 2

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!