Script doesn't load because of a javascript MIME type error

Question

I'm trying to get the jQuery Masonry plugin to work on a site. I've updated my template files to get the proper classes where the plugin needs them. Then I enqueued my scripts like this:

function masonry_scripts() {
    wp_enqueue_script('masonry');
    wp_enqueue_script( 'masonry-script', get_template_directory_uri() . '/assets/js/masonry-script.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'masonry_scripts' );

The masonry script is loading properly, but the masonry-script.js file doesn't. I get the following error in the console:

The script from “.../assets/js/masonry-script.js?ver=5.1.1” was loaded even though its MIME type (“text/html”) is not a valid JavaScript MIME type.[Learn More] Loading failed for the with source “http://thewallmarket.local/wp-content/themes/storefront/assets/js/masonry-script.js?ver=5.1.1”.

Unfortunately, I can't provide a link to the site as it is developed locally.

What is causing this problem? How can I solve it?

Answer 1

This error means that the resource (JS file in this case) that you're loading is expected to be JS and is instead HTML. It could be because your path is incorrect or because the local file is not JS.

More than likely, your provided script at /assets/js/masonry-script.js is not a JS file or couldn't be loaded as such. It looks like you may be getting a File Not Found (with a redirect to your 404).

Try this between the two wp_enqueue_script() lines:

printf(get_template_directory_uri() . '/assets/js/masonry-script.js');

That should print the full path spec to the file you're trying to load. See if you can load the URL printed in a separate browser tab (or window). You may need to fiddle with the URL like this:

wp_enqueue_script('masonry-script', untrailingslashit(get_template_directory_uri() . '/assets/js/masonry-script.js', [], false, true);

Also check the content of the local file to see if it actually contains JS. If not, you may need to download a correct copy.

If your project requirements allow and it is available, you may consider using jQuery Masonry from a CDN.

Updated: parent theme vs. child theme

As per the comment in the WP code docs for get_template_directory_uri(), if you want the URL of the child theme instead of the parent theme, use get_stylesheet_directory_uri() instead.