Anime.js with Wordpress: module is not defined

Question

I made a few animations locally with anime.js with plain HTML, CSS and JS. Now I need to implement these animations in a wordpress-based site.

Unfortunately I get the error module is not defined. It refers to the last line in the anime.js file module.exports = anime;.

I really don't know much about Wordpress development but I do know how to enqueue scripts (at least I think I do)

Here's the code from my functions.php file where I call anime.js and my js file although I don't even know if this error has something to do with how I enqueue the files.

function load_my_scripts() {
    wp_register_script('animejs', get_template_directory_uri() . "/js/anime.js", array(), '', true );
    wp_enqueue_script('animejs');
    wp_register_script('scriptjs', get_template_directory_uri() . "/js/script.js", array('animejs'), '', true );
    wp_enqueue_script('scriptjs');
}
add_action('init', 'load_my_scripts');

The site on which the problem occurs is this one: http://www.provokatur.at/

I really hope that someone can help me out, thanks.

I allways enque scripts like this: – Krullmizter Feb 09 '19 at 13:25 — Krullmizter, Feb 09 '19 at 13:25

edoha · Answer 1 · 2019-02-09T14:01:43.110

1

if you're sure that your code is correct, don't forget to add <?php get_footer(); ?> in page.

edit: I've trying using animejs in my themes and this code worked for me

function load_my_scripts() {
wp_register_script('animejs', 'https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js');
wp_enqueue_script('testscript', get_template_directory_uri(). '/js/test.js', array('animejs'), '', true);
}

add_action ('wp_enqueue_scripts', 'load_my_scripts');

edited Feb 09 '19 at 14:01

answered Feb 09 '19 at 13:33

edoha

33
1
6

Thanks for you help so far but I just can't get it to work. I don't have an error now but the animation still refuses to play. Anime.js is loaded correctly. I copied the animation and ran it in the console, everything works perfectly but not from the script.js file. – Julian Feb 09 '19 at 14:47
Could it be that I have to include the anime.js file inside of my script file too? But wouldn't that mean, that I enqueued it the wrong way? – Julian Feb 09 '19 at 14:51
In your case, the code will be `wp_register_script('animejs', get_template_directory_uri() . '/js/anime.js');` and `wp_enqueue_script('scriptjs', get_template_directory_uri(). '/js/script.js', array('animejs'), '', true);` – edoha Feb 10 '19 at 06:54

score 1 · Accepted Answer · answered Feb 09 '19 at 14:55

I figured it out.

I don't enqueue the anime.js file anymore, I just register it with:

wp_register_script('animejs', 'https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js');

After that the animation just did not get executed, all I did to fix this was to add

  jQuery(document).ready(function($){
        //Code goes here
  })

Apparently this executes the animation with jQuery... Although I really don't understand the reasoning behind this I still hope that my explanation helps some people.

Anime.js with Wordpress: module is not defined

2 Answers2