“Defer JavaScript” feature breaks inline script modules

As reported in a support forum topic for the Optimization Detective plugin, the Defer JavaScript feature of WP Fastest Cache is causing a JS error for inline script modules.

The Optimization Detective plugin outputs an inline script module to the page, for example:

<script type="module">import detect from "https:\/\/telikertepites.net\/wp-content\/plugins\/optimization-detective\/detect.min.js?ver=1.0.0-beta3"; detect( {"minViewportAspectRatio":0.4,"maxViewportAspectRatio":2.5,"isDebug":false,"extensionModuleUrls":["https:\/\/telikertepites.net\/wp-content\/plugins\/image-prioritizer\/detect.min.js?ver=1.0.0-beta2"],"restApiEndpoint":"https:\/\/telikertepites.net\/wp-json\/optimization-detective\/v1\/url-metrics:store","currentETag":"50f3cdd79cfc777a742f88f0a0d3e7e6","currentUrl":"https:\/\/telikertepites.net\/","urlMetricSlug":"d751713988987e9331980363e24189ce","cachePurgePostId":1964,"urlMetricHMAC":"96dd7a66043c749f3122b2e8f113050a","urlMetricGroupStatuses":[{"minimumViewportWidth":0,"maximumViewportWidth":480,"complete":true},{"minimumViewportWidth":480,"maximumViewportWidth":600,"complete":false},{"minimumViewportWidth":600,"maximumViewportWidth":782,"complete":false},{"minimumViewportWidth":782,"maximumViewportWidth":null,"complete":true}],"storageLockTTL":60,"freshnessTTL":604800,"webVitalsLibrarySrc":"https:\/\/telikertepites.net\/wp-content\/plugins\/optimization-detective\/build\/web-vitals.js?ver=4.2.4"});</script>

However, the Defer JavaScript feature of your plugin is wrapping the contents of this script in a DOMContentLoaded event listener:

<script type="module">document.addEventListener('DOMContentLoaded',function(){
import detect from "https:\/\/telikertepites.net\/wp-content\/plugins\/optimization-detective\/detect.min.js?ver=1.0.0-beta3"; detect( {"minViewportAspectRatio":0.4,"maxViewportAspectRatio":2.5,"isDebug":false,"extensionModuleUrls":["https:\/\/telikertepites.net\/wp-content\/plugins\/image-prioritizer\/detect.min.js?ver=1.0.0-beta2"],"restApiEndpoint":"https:\/\/telikertepites.net\/wp-json\/optimization-detective\/v1\/url-metrics:store","currentETag":"50f3cdd79cfc777a742f88f0a0d3e7e6","currentUrl":"https:\/\/telikertepites.net\/","urlMetricSlug":"d751713988987e9331980363e24189ce","cachePurgePostId":1964,"urlMetricHMAC":"96dd7a66043c749f3122b2e8f113050a","urlMetricGroupStatuses":[{"minimumViewportWidth":0,"maximumViewportWidth":480,"complete":true},{"minimumViewportWidth":480,"maximumViewportWidth":600,"complete":false},{"minimumViewportWidth":600,"maximumViewportWidth":782,"complete":false},{"minimumViewportWidth":782,"maximumViewportWidth":null,"complete":true}],"storageLockTTL":60,"freshnessTTL":604800,"webVitalsLibrarySrc":"https:\/\/telikertepites.net\/wp-content\/plugins\/optimization-detective\/build\/web-vitals.js?ver=4.2.4"});});</script>

This causes a JavaScript error to be reported to the console:

SyntaxError: Unexpected identifier ‘detect’

This is because import statement is only allowed at the root of a script module, and not inside of a function.

I recommend that you update your Defer JavaScript feature to not do anything when an inline script’s type is module because module scripts already are deferred to execute after the DOM has loaded by default.

• This topic was modified 1 year, 2 months ago by Weston Ruter.