1

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?

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.

  • Thank you for your reply. The file is a js file, and the path to it is correct. But using your trick, I realised that the path that is printing is for the parent theme, not the child theme. And of course, I want to reach the child theme. I'm guessing the problem is coming from get_template_uri(). I don't think using the absolute path to the file would be the correct way to fix this, but I don't know what to do here. Do you by any chance know what to do? – user3615604 May 5 at 19:52
  • Updated the answer: use get_stylesheet_directory_uri(). – Stephan Samuel May 6 at 15:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.