Cannot import AnimeJS in Ionic-Angular project

Question

I have installed AnimeJS with the following commands in my Ionic 4 project:

npm i animejs --save
npm i @types/animejs --save

I then attempted to reference it by using:

import * as anime from 'animejs'

Doing the above gives me the following error when calling anything from animejs:

Error: Uncaught (in promise): TypeError: Object is not a function (near '...animejs__WEBPACK_IMPORTED_MODULE_1__...')

However, if I import by referencing the anime.js within the node_modules directory, everything will work just as expected. I thought by installing @types/animejs this would allow me to use just a simple import * as anime from 'animejs' without having to directly reference the file within the node_modules directory.

Why can I import using the node_modules folder but not import * as anime from 'animejs'

After importing I call it like so:

  openModal(modalPage) {
    // Define modal to open
    switch (modalPage) {
      case 'login' : {
        modalPage = LoginPage;
        break;
      }
      case 'register' : {
        modalPage = RegisterPage;
        break;
      }
    }

    // Open modal
    this.modalCtrl.create({
      component: modalPage,
      cssClass: 'intro-modal',
      showBackdrop: true,
      enterAnimation: this.animations.modalEnter
    }).then(modal => {
      // Hide intro buttons
      anime({
        targets: ['.intro-buttons'],
        translateX: '-100%',
        duration: 150,
        easing: 'linear'
      });

      // Animate slide back
      modal.onWillDismiss().then(() => {
        anime({
          targets: ['.intro-buttons'],
          translateX: '0%',
          duration: 150,
          easing: 'linear'
        });
      });

      // Present the modal
      modal.present();
    });
  }

Answer 1

Update your import to the following:

import anime from 'animejs'

This will import the default export from animejs which is actually a function that take the params/object that you are attempting to pass.

Here is an example in action showing the import and passing the expected object to anime() without the error triggering.

With your existing import * as anime , if you log anime , you'll see a property default of that object that is the actual function you are needing. Also you will see that import is bringing in various other properties/functions including penner , stagger , and timeline . You were simply targeting the wrong property with your previous import.

Hopefully that helps!