Configuring particles.js with custom wordpress theme

Question

I am currently working on a portfolio site and am trying to integrate a really handy feature called particles.js . It works fine and is extremely easy to integrate in a static HTML page but the issue is I am developing a custom Wordpress theme and keep getting errors. I am using the designated CDN to bring in the script for particles.js and I have the json and app file saved locally in my files. I am using enqueue for both of the js files that are necessary for this library to work. I will link to code for the two local files and I will also link the CDN as well!

The link to the two files is here: https://gist.github.com/anonymous/5c6dc4675e93afb53ef97192628f2fe1

The link for the CDN is here: https://www.jsdelivr.com/package/npm/particles.js

and the enqueue code goes as follows:

function wpb_adding_scripts() {
wp_enqueue_script('jquery');
wp_register_script('particles', 
'https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js');
wp_enqueue_script('particles');
wp_register_script('app', get_template_directory_uri() . '/js/app.js');
wp_enqueue_script('app');
}

add_action ('wp_enqueue_scripts', 'wpb_adding_scripts');

This is the errors that I am getting:

screenshot of errors

I have tried multiple things and nothing seems to work. I attempted running it in different browsers but still it just doesn't want to work. As I stated before it works fine on a static HTML page but does not work with wordpress... I really need help with this because I have not found any information on integrating this library with a Wordpress site so any input is highly appreciated. Thanks!

Answer 1

Please try this

function wpb_adding_scripts() {
  wp_enqueue_script( 'particles','https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js', array('jquery'), true); 
  wp_enqueue_script( 'app', get_template_directory_uri() . '/js/app.js', array('jquery'), true); 

}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );