Having trouble getting anime.js to function properly in an Ionic 3 project?

I have been attempting to incorporate anime.js into my Ionic 3 project, but I keep encountering an error when using the function anime({}) in the .ts file.

Error: Uncaught (in promise): TypeError: __webpack_require__.i(...) is not a 
function
TypeError: __webpack_require__.i(...) is not a function...
...Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 
(KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

The content of my animation.ts file is as follows:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { trigger,state,style,transition,animate,keyframes } from '@angular/animations';
import { anime } from 'animejs';

@IonicPage()
@Component({
  selector: 'page-animation',
  templateUrl: 'animation.html',

})
export class AnimationPage {
    state: string ="small";
  constructor( public navCtrl: NavController, public navParams: NavParams) {
      anime({
        targets: '.animatable',
        translateX: 250
      });

  }

  animateThis(){
    this.state=(this.state=='small'?'large':'small');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AnimationPage');
  }

}

If you require any additional information from other files to resolve this issue, please let me know!

Answer №1

When facing a similar issue, I was able to resolve it by analyzing the content of the tsconfig.json file located alongside the typings in DefinitelyTyped (link).

In my local tsconfig, I realized that I had omitted

"allowSyntheticDefaultImports": true
. Once I added this, I could import modules just like in the DefinitelyTyped test, using:

import anime from 'animejs';

This change enabled me to incorporate animations with expected type support, such as:

anime({ targets: "#my-div", opacity: 0.5, duration: 1000 });

Answer №2

After upgrading to anime.js version 3.0.1 and @types/animejs 2.0.2, I encountered the same error but found a workaround that allowed me to utilize the new 3.0.1 without losing my previous work:

The way to import animejs remains consistent with version 2.2.0:

import * as anime from 'animejs';

To adapt to the update, change calls from anime* to (anime).default*

For instance, it transforms from:

anime({ targets: "#my-div", opacity: 0.5, duration: 1000 });

to:

(<any>anime).default({ targets: "#my-div", opacity: 0.5, duration: 1000 });

Or for functions usage, switch from:

anime.random(0, 360) * Math.PI / 180;

to:

(<any>anime).default.random(0, 360) * Math.PI / 180;

In short, this workaround is in place until @types/animejs receive an updated version.

Answer №3

Here's a suggestion for importing it:

import * as library from 'libraryname';

I've tested this method and it seems to work well.

Answer №4

It appears that there are some compatibility issues between animejs versions above 2.2.0 and Angular 7. It is recommended to stick with version 2.2.0 until the issue is resolved, as mentioned in this link:

https://github.com/juliangarnier/anime/issues/527

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

How to animate a left border shifting to the center using JavaScript

As I'm modifying my current div, I need to add a vertical line in the center of it. I've come across various solutions where a left border is added and then shifted using the left property by 50% (which effectively places it in the middle). Here ...

Double-checked in p:commandButton, encountering a race condition with oncomplete

When I execute the server action using p:commandButton, I then refresh the form to display hidden fields and show a dialog. Attempting to refresh only the panels with hidden buttons yields the same result: After I call dialog.show(), a second refresh is t ...

Using JavaScript to dynamically alter the background image of an HTML document from a selection of filenames

Just starting out with JavaScript and working on a simple project. My goal is to have the background image of an HTML document change to a random picture from a directory named 'Background' every time the page is opened. function main() { // ...

Implement a validation function in the "jQuery validation library."

Hello, I am currently using the jQuery validation plugin to validate my form. I am trying to add an additional rule to the validation, but I am struggling to get it to work. The input value should be less than or equal to the previous element's value. ...

Verifying that a parameter is sent to a function triggering an event in VueJS

One of the components in my codebase is designed to render buttons based on an array of objects as a prop. When these buttons are clicked, an object with specific values is passed to the event handler. Here's an example of how the object looks: { boxe ...

Is there a way to specify a custom error type for returned data in rtk query?

Encountered a type error while using rtk query with the following content : Property 'data' does not exist on type 'FetchBaseQueryError | SerializedError'. Property 'data' does not exist on type 'SerializedError' ...

How can I showcase an SVG icon received in base64 format using an img tag?

Having trouble displaying SVG/base64 encoded images through the img tag. Here is the issue at hand: Receiving iconData (as a string) from the server. Attempting to display it in my component. No issues with step 1. Encountering a broken image sign with s ...

Ng-repeat seems to be having trouble showing the JSON data

Thank you in advance for any assistance. I have a factory in my application that utilizes a post method to retrieve data from a C# function. Despite successfully receiving the data and logging it to the console, I am facing difficulties in properly display ...

Displaying the HTML code for a dynamically generated table

Can the generated HTML code be retrieved when dynamically creating a table using v-for loops in Vue? <table> <tr> <th colspan="99">row 1</th> </tr> <tr> <th rowspan="2">row 2< ...

tips for sending types as properties in a versatile component

I am facing a challenge with passing types as props to a reusable component. I have a component where I pass rows and headings as props, but I need to find a way to pass types as props as well. Below is the code for my reusable component: import { TableCe ...

Floating dropdown within a scrolling box

How can I ensure that the absolute positioned dropdown remains on top of the scrollable container and moves along with its relative parent when scrolling? Currently, the dropdown is displayed within the scrollable area. The desired layout is illustrated i ...

Having trouble storing radio buttons and checkboxes in MySQL database using AJAX

My app is facing an issue where radio buttons and checkboxes are not correctly entering information into the database. Currently, only text fields are successfully saving data, while checkboxes and radio buttons are only recording the value of the first ra ...

The error message "Invalid Data Type: Not an Array - google charts" was encountered

I am struggling with an ajax call that I have set up. The issue arises when passing an array from the backend to the frontend. Upon checking the data through an alert on the frontend, everything seems fine. However, Google charts raises an error stating th ...

Animating Array of Paragraphs with JQuery: Step-by-Step Guide to Displaying Paragraph Tags Sequentially on Each Click

var phrases = ['phraseone', 'yet another phrase', 'once more with feeling']; $(".btn").on('click', function() { for(var i=0; i < phrases.length; i++) { container.innerHTML += '<p>' + ...

Encase an asynchronous function inside a promise

I am currently developing a straightforward web application that manages requests and interacts with a SQL database using Express and Sequelize. My issue arises when I attempt to call an async function on an object, as the this part of the object becomes u ...

How can I create a tooltip function in JavaScript/jQuery that uses the "this" keyword?

JSFiddle link: http://jsfiddle.net/lustre/awpnd6L1/1/ I am curious if it's possible to create a JavaScript function that consolidates the mouseenter code for a "More Info" tooltip. Rather than copying the code multiple times, is there a way to stream ...

Moment JS initialization and the utc() function

I am trying to comprehend the way Moment JS initializes its moment object. For instance, let's say I want to create a moment for the date and time: April 1, 2000, 3:25:00 AM with a UTC offset of +8 hours from UTC/GMT. To represent this in JavaScript ...

Display the number of objects in an array using Angular and render it on HTML

I am having trouble displaying the length of an array on my HTML page. No errors are showing up in the console either. Can someone help me figure out how to get the total number of heroes? HTML: <div *ngFor="let hero of heros"> <div>The tota ...

What are some ways to address alignment problems that occur with input fields when the file name is lengthy?

When using input type="file", the alignment is not proper when the file name is long with multiple words... https://i.stack.imgur.com/52Yh5.png I would like it so that when the file name is long, it displays like this: From - New_InkDrops_HD_ ...

Exploring the power of VueJs through chaining actions and promises

Within my component, I have two actions set to trigger upon mounting. These actions individually fetch data from the backend and require calling mutations. The issue arises when the second mutation is dependent on the result of the first call. It's cr ...