Importing "AnimeJS" using Yarn not working

sage
1

I have done:

  • run: yarn add animejs
  • added the import to my main.js file like this: import ‘animejs/anime.min’ (the path is correct, even the editor is pointing to the right file, and I also tried with the not minified version).
  • run: yarn run build

and I keep getting
6:25 error ‘anime’ is not defined no-undef

I have checked the forum and some people are using imports like this
import {animejs} from ‘animejs/anime.min’;
which gives me this
’animejs’ is defined but never used no-unused-vars
which makes sense but even by trying to assign it to a variable it doesn’t work.
It’s worth noting that other libraries like “slick” are working without any problem. I have also checked the animejs package.json but there’s nothing odd there compared to, for example, slickcarousel package.json. The only difference that I could notice is this:

“files”: [
“anime.js”,
“anime.min.js”
],

Now in sage8 I was using overrides but that was with bower so it shouldn’t matter.

Sorry I tried to search but I couldn’t find any related issue with this library.
Thanks in advance.

2

For a similar library I had to add it to globals in .eslintrc:

  "globals": {
    "wp": true,
    "animejs": true
  },
1 Like
3

Thanks for your reply. But still not working… how did you imported it?
import {animejs} from ‘animejs/anime.min’
or
import ‘animejs/anime.min’

either way is not working for me :frowning:

4

Just did a test with a cloned sage theme and animejs,

import {animejs} from 'animejs';

build works fine for me.

Edit: I just noticed that you get this eslint error when you just import something but don’t use it, e.g. for testing as in this case. You have to actually use animejs for something in the code so eslint is happy.

1 Like
5

Ok thanks for clarifying this. I might miss something though.
I added the import as you did on my “main.js”, added “animejs”: true to the “globals” in .eslintrc and I am using just a simple test in my common.js (inside the “routes” folder) like this

  let title = document.getElementsByClassName('entry-title');
  anime({
      targets: title,
      translateX: 250
  });

Sorry to be a pain…

6

Hi!
For the sake of clarity, can you post, in one post, the following things from your code?

  1. Your import statement in main.js

  2. The simple test you put in common.js

  3. The error you get when you run yarn build ?

Also have you tried moving the import to common.js instead of main.js? I’ve had scoping problems that were resolved that way before.

2 Likes
7

@MWDelaney’s suggestion works for me.

In routes/common.js:

import anime from 'animejs';

You’ll want to be importing anime not animejs, since animejs is just the package name and there are no exports referred to as animejs anywhere in the code.

2 Likes
8

Thanks it works. I followed the suggestion above from @strarsis but apparently the import was wrong. He used import {animejs} from ‘animejs’; and he said it was working so I always used that one…

So yeah the solution is running the import directly where you need it (either common.js, home.js etc…) and have it like this import anime from ‘animejs’;

Thanks for the solution @MWDelaney and I apologise if I wasn’t clear enough.

1 Like