Transitioning from ES5 to TypeScript and webpack, I decided to incorporate the Three.js library seamlessly. Alongside this, I wanted to utilize the Anime.js library for its impressive timeline animation features. However, my efforts yesterday were fraught with challenges as I attempted to integrate Anime.js into my project, resulting in a familiar scenario of multiple tabs open simultaneously. Following the instructions outlined in the Anime.js documentation,
npm install animejs --save
and then
import anime from 'animejs/lib/anime.es.js';
...I encountered an error:
Could not find a declaration file for module 'animejs/lib/anime.es.js'
I made sure to install them using the command:
npm i --save-dev @types/animejs
Upon verifying the presence of an Anime.js folder with an index.d.ts file within the @types directory, I also confirmed that my tsconfig was configured to inspect this folder for declaration files.
{
"compilerOptions": {
"moduleResolution": "node",
"strict": true
},
"typeRoots": [
"./node_modules/@types/"
],
"noImplicitAny": false,
"include": ["**/*.ts", "test"]
}
After conducting some research, I discovered that simply modifying the implementation method could resolve the error. While Anime.js' documentation suggested the following:
import anime from 'animejs/lib/anime.es.js';
I opted for this alternative approach:
import * as anime from 'animejs';
This adjustment successfully eliminated the previous error, although as a newcomer to this development pipeline, I struggled to grasp how it impacted the outcome. Nonetheless, a new hurdle emerged: upon defining a new anime animation (referencing sample code from Anime.js),
anime({
targets: '.css-selector-demo .el',
translateX: 250
});
The compilation process proceeded smoothly, yet an issue surfaced in the JavaScript console (specifically in Chrome):
Uncaught TypeError: anime is not a function
This predicament has left me feeling stuck, without any peers to seek guidance from. I'm in need of assistance, please!