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”
