JS Minify breaks WP 6.5 with error: import declarations may only appear…

Hello @bndn

Thank you for reaching out and I am happy to help!
I was not able to replicate the problem on any environment using WP Version 6.5.3

Can you please sahre sopme screenshots or any information that would help us to reproduce the problem and please describe how exactly manifests and any errors you are getting?
Thanks!

Hi,
I ended up on the same type of error, here is how you can reproduce it by using wp_enqueue_script_module instead of wp_enqueue_script to enqueue a script.

W3 Total Cache: 2.7.5.
WP: 6.6.1.

If you need to use a js file that contains an import declaration like the example below, you’ll have to use this new wp_enqueue_script_module function to enqueue the js file.

import { data } from '/wp-content/themes/my-theme/js/data.js';

fetch(data.url)
    .then(response => response.json()) // Parse the JSON response
    .then(data => {
......

This will result in WordPress loading the js file with the type = “module” :

<script type="module" src="https://www.mysite.com/wp-content/themes/my-theme/js/data.js" id="my-data-script"></script>

And if W3 Total Cache is set to minify this file, it will load it without the type=”module”, and therefore trigger this js error and break the site :

SyntaxError: Cannot use import statement outside a module

A workaround is to stop W3TC to minify this file by filtering it out in the settings via Minify>Advanced>Never minify the following JS files:

But it’d be better if W3TC could load the minified file with type=”module”