Struggling to integrate the Animejs library into my TypeScript and webpack project

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!

typescriptwebpackanimejs

Answer №1

Thank you for the assistance so far, it was greatly appreciated. After some trial and error, I eventually managed to resolve the issue. My solution involved importing the anime framework with this line of code:

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

I then proceeded to uninstall and reinstall the animejs framework, along with its @types. Here is a snippet of my updated tsconfig.json file (with some modifications advised by a friend):

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

Although I'm not certain which specific change led to the resolution, it ultimately worked like a charm. Hopefully, those facing a similar challenge may find this information helpful!

Answer №2

Give this a shot

import anime from 'animejs';

This is my go-to solution that I use consistently. I find that there's no need for me to use @types/animejs, so you should be able to remove the package without any issues.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ensure that missing types are included in a union type following a boolean evaluation

When working with typescript, the following code will be typed correctly: let v: number | null | undefined; if(v === null || v === undefined) return; // v is now recognized as a `number` const v2 = v + 2; However, if we decide to streamline this process ...

typescript

Hold off on proceeding until the subscription loop has finished

Is there a way to verify that all results have been successfully pushed to nodesToExpand after running the for loop? The getFilterResult function is being called via an HTTP request in the nodeService service. for(var step in paths) { this.nodeSe ...

angulartypescriptrxjsobservable

Issue: The CSS loader did not provide a valid string output in Angular version 12.1.1

I am encountering 2 error messages when trying to compile my new project: Error: Module not found: Error: Can't resolve 'C:/Users/Avishek/Documents/practice/frontend/src/app/pages/admin/authentication/authentication.component.css' in &apos ...

javascriptangulartypescriptnpmangular-cli

The quantity of documents queried does not align with the number of data counts retrieved from Firestore

Facing an issue with calculating the Firestore read count as it keeps increasing rapidly even with only around 15 user documents. The count surges by 100 with each page reload and sometimes increases on its own without any action from me. Could this be due ...

angulartypescriptfirebasegoogle-cloud-firestore

Encountering a Circular JSON stringify error on Nest.js without a useful stack trace

My application is being plagued by this critical error in production: /usr/src/app/node_modules/@nestjs/common/services/console-logger.service.js:137 ? `${this.colorize('Object:', logLevel)}\n${JSON.stringify(message, (key, value ...

javascripttypescriptnestjs

Navigating through a mergeMap observable with an undefined value

In my Angular 6 app, I have a class that attaches API tokens to every http request using the getIdToken() method. If the token retrieval is successful, everything works fine. However, if it fails, my app will stop functioning. I need help with handling th ...

javascriptangulartypescriptrxjs

Enabling non-declarative namespaces in React using Typescript: A beginner's guide

I'm diving into the React environment integrated with Typescript, but I still have some confusion about its inner workings. I really hope to receive thorough answers that don't skip any important details. I came across a solution that involves d ...

reactjstypescript

What could be causing my mdx files to not display basic markdown elements such as lists and headings? (Next.js, mdx-bundler)

Trying to implement Kent C Dodds mdx-bundler with the Next.js typescript blog starter example is proving challenging. While it successfully renders JSX and certain markdown elements, basic markdown syntax like lists and paragraph spacing seem to be malfunc ...

reactjstypescriptnext.jsmarkdown

typescript - specifying the default value for a new class instance

Is there a way to set default values for properties in TypeScript? For example, let's say we have the following class: class Person { name: string age: number constructor(name, age){ this.name = name this.age = age } } We want to ens ...

typescriptsyntax

An error in TypeScript has occurred, stating that the type 'IterableIterator<any>' is neither an array type nor a string type

Hey there! I'm currently working on an Angular project and encountering an error in my VS Code. I'm a bit stuck on how to fix it. Type 'IterableIterator<any>' is not an array type or a string type. Use compiler option '- ...

javascripttypescript

Accessing JSON data from a database using Angular

Wondering if there is a way to effectively access and manipulate JSON data stored in a database using Angular. While researching online, I keep coming across methods for reading JSON files from the Asset Folder, which does not align with what I need. What ...

jsonangulartypescriptfileread-write

Transforming a function into an array in TypeScript

I attempted to use the map() function on a dataURL array obtained from the usePersonList() hook, but I am struggling to convert my function to an array in order to avoid errors when clicking a button. import Axios from "axios"; import React, { us ...

javascriptreactjstypescript

Typescript's default string types offer a versatile approach to defining string values

Here is an example code snippet to consider: type PredefinedStrings = 'test' | 'otherTest'; interface MyObject { type: string | PredefinedStrings; } The interface MyObject has a single property called type, which can be one of the ...

typescript

replace the tsconfig.json file with the one provided in the package

While working on my React app and installing a third-party package using TypeScript, I encountered an error message that said: Class constructor Name cannot be invoked without 'new' I attempted to declare a variable with 'new', but tha ...

javascriptreactjstypescript

Encountered an error while trying to access the 'touched' property of undefined within Angular6 reactive forms

When attempting to validate my page, I encountered an error stating 'Cannot read property 'touched' of undefined'. Can someone please assist me with this code? Also, feel free to correct any mistakes you may find. Here is the HTML code ...

angulartwitter-bootstraptypescriptangular6angular-reactive-forms

Can webpack effectively operate in both the frontend and backend environments?

According to the information provided on their website, packaging is defined as: webpack serves as a module bundler with its main purpose being to bundle JavaScript files for usage in a browser. Additionally, it has the ability to transform, bundle, or ...

javascriptnode.jsangulartypescriptwebpack

Module for importing text without verifying types using wildcards

Here is a unique module definition using the wildcard character: declare module 'custom!*' { const data: string; export default data; } Check out how it's imported: import * as myData from 'custom!./myCustomData.txt'; B ...

typescript

The Mat table is not updating on its own

I am facing an issue in my Angular application where a component fetches a hardcoded list from a service and subscribes to an observable to update the list dynamically. The problem arises when I delete an element from the list, as it does not automaticall ...

htmlangulartypescriptangular-materialfrontend

A class in Typescript containing static methods that adhere to an interface with a string index

Take a look at this code snippet: interface StringDoers { [key: string]: (s: string) => void; } class MyStringDoers implements StringDoers { public static print(s: string) { console.log(s); } public static printTwice(s: string) { conso ...

typescript

A circular reference occurs when a base class creates a new instance of a child class within its own definition

My goal is to instantiate a child class within a static method of the base class using the following code: class Baseclass { public static create(){ const newInstance = new Childclass(); return newInstance; } } class Childclass ex ...

typescript