WordPress / NPM error - jQuery must be included before Bootstrap's JavaScript

0
votes

I'm using NPM to bundle bootstrap and several other scripts for a Wordpress theme.

By default, WordPress loads jquery, so I have excluded jquery from the bundle. In google dev tools can see that jquery is being loaded before my bundled JS file but I still get this error.

pgthrottle.min.js:2 Uncaught TypeError: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

What's the best way to resolve this issue?

Here's what in my functions.php

wp_register_script( 'pgthrottle-js', THEME_DIR . '/js/pgthrottle.min.js', 'jquery', '', true );
wp_enqueue_script( array('jquery', 'pgthrottle-js') );
2
jquerywordpresstwitter-bootstrapnpm

2 Answers

0
votes

Use the wp_enqueue_scripts action hook.

add_action( 'wp_enqueue_scripts', 'cool_function_name' );

function cool_function_name(){
    wp_register_script( 'pgthrottle-js', THEME_DIR . '/js/pgthrottle.min.js', 'jquery', '', true );
    wp_enqueue_script( array('jquery', 'pgthrottle-js') ); 
}
0
votes

I added this code to my webpack.config.js file to fix the problem.

plugins: [
         new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })