MIME type JavaScript module script error

  • Resolved Marc Toensing

    (@marcdk)


    2 years ago

    Hi,

    since one of the last Chrome updates or WordPress updates there is a problem with this plugin in the Chrome error console: 

    photoswipe-dynamic-caption-plugin.esm.min.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/js". Strict MIME type checking is enforced for module scripts per HTML spec.
photoswipe-lightbox.esm.min.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/js". Strict MIME type checking is enforced for module scripts per HTML spec.
photoswipe-fullscreen.esm.min.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/js". Strict MIME type checking is enforced for module scripts per HTML spec.
photoswipe-auto-hide-ui.esm.min.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/js". Strict MIME type checking is enforced for module scripts per HTML spec.

    This is the only plugin that is affected. It works when I am logged in as admin. That’s weird.

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Arno Welzel

    (@awelzel)

    This can not be fixed by the plugin. You need to configure your server properly. It must send “.js” files as application/javascript and not text/js, just look at the error message:

    Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/js”.

    If you can not fix this on your own, ask the administrator of the server to fix the MIME type mapping. If it is some of your caching plugins generating that response, turn off that plugin and ask the plugin author to fix that.

    For example how it should be, check https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-5/ and especially the server response headers for the URL https://wordpress-demo.arnowelzel.de/wp-content/plugins/lightbox-photoswipe/assets/ps5/dynamic-caption/photoswipe-dynamic-caption-plugin.esm.min.js.

    Thread Starter Marc Toensing

    (@marcdk)

    Well, I am the admin. And yea, this page uses fastest cache. And yes, that is the reason. But every other plug-in works fine. Do you use a special way to enqueue the scripts? Maybe an non-standard way?

    Plugin Author Arno Welzel

    (@awelzel)

    No I do not use a non-standard way. See for yourself:

    https://github.com/arnowelzel/lightbox-photoswipe/blob/5.0.18/src/LightboxPhotoSwipe/LightboxPhotoSwipe.php#L136-L142

    However PhotoSwipe 5 uses JavaScript modules which means only the main frontend script is enqueued and the modules are loaded using import commands.

    Also when the PhotoSwipe frontend script is merged with scripts from other plugins this will not work – this is not how modular scripts are intended to be used. That everything works when you are logged in as admin is also expected since then the cache is not active.

    Maybe you can exclude Lightbox with PhotoSwipe from the cache to avoid this issue.

    In general I recommend not to use plugins which promise “optimization” by combining multiple JavaScript or CSS files together into single files – because this often causes unexepected side effects. Also it does not provide a lot of performance gain since HTTP/2 already transfers resources like JavaScript and CSS in parallel.

    You gain much more performance by using Redis for object caching and/or plugins like Cachify which creates static snapshots of the HTML output (of course this only makes sense if you don’t have dynamic generated content on your pages). This can reduce response times from 1-2 seconds down to less then 0.5 seconds since the server then only has to send the static HTML and WordPress itself is not involved at all. Also tuning the server itself (static FPM pool, making sure that opcache works and has enough memory available etc.) can help a lot.

    Thread Starter Marc Toensing

    (@marcdk)

    Alright. Thank you for the explanation. I will exclude it in fastest cache. Great support!

    Thread Starter Marc Toensing

    (@marcdk)

    A excluded JavaScript with “photoswipe” from being “optimized”. Works. Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘MIME type JavaScript module script error’ is closed to new replies.