make sure wp-includes/js is excluded in both AsyncJS & Autoptimize and all should be fine 🙂
frank (ao dev)
Did so and now i have 11 errors:
Uncaught TypeError: Cannot read properties of undefined (reading '...')
try with just Autoptimize (or just AsyncJS) to make sure which one is causing that, based on that info we can see what the next steps would need to be (tomorrow though, I’m off to bed now 😉 )
Excluded only in Autoptimize:
No content is output. The following errors appear in the console:
1 x Uncaught ReferenceError: wp is not defined
12 x Uncaught TypeError: Cannot read properties of undefined (reading '...')
Excluded only in AsyncJS:
Skeleton loaders are shown, but never get replaced with the actual content. The following errors appear in the console:
1 x Uncaught ReferenceError: wp is not defined
2 x GET https://bortec-tuning.de/wc/store?_locale=user 404
2 x Uncaught (in promise) {code: 'invalid_json', message: 'The response is not a valid json response.'} (message translated by me)
Excluded in both:
Like Autoptimize
Excluded in none:
Like AsyncJS
OK, can you keep AsyncJS off for now and in Autoptimize try activating “don’t aggregate but defer” + “also defer inline JS” and remove all default exclusions (keep them copy/pasted somewhere for later referral) ?
Deactivated AsyncJS and set both options in Autoptimize. There where no exclusions set, so nothing to remove here.
Still the same errors.
Maybe i’m onto something.
wp-includes/script-loader.php, on line 291, there is the following function.
function wp_default_packages_inline_scripts( $scripts ) {
global $wp_locale;
if ( isset( $scripts->registered['wp-api-fetch'] ) ) {
$scripts->registered['wp-api-fetch']->deps[] = 'wp-hooks';
}
$scripts->add_inline_script(
'wp-api-fetch',
sprintf(
'wp.apiFetch.use( wp.apiFetch.createRootURLMiddleware( "%s" ) );',
esc_url_raw( get_rest_url() )
),
'after'
);
$scripts->add_inline_script(
'wp-api-fetch',
implode(
"\n",
array(
sprintf(
'wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "%s" );',
( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' )
),
'wp.apiFetch.use( wp.apiFetch.nonceMiddleware );',
'wp.apiFetch.use( wp.apiFetch.mediaUploadMiddleware );',
sprintf(
'wp.apiFetch.nonceEndpoint = "%s";',
admin_url( 'admin-ajax.php?action=rest-nonce' )
),
)
),
'after'
);
[...]
If i comment out the second call to “add_inline_script” then of course the script only consists of the one line from the first call. But then everything works fine again. Activated AsyncJS again and now the script has the defer attribute set as i would expect it. In Autoptimize “aggregate JS files” and “also aggregate inline JS” are set as it was before. Still working.
So what is wrong with this piece of code?
Did further testing with the wp-includes/script-loader.php.
As stated previously, this is the original code which gives me “Uncaught ReferenceError: wp is not defined” and other errors:
$scripts->add_inline_script(
'wp-api-fetch',
implode(
"\n",
array(
sprintf(
'wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "%s" );',
( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' )
),
'wp.apiFetch.use( wp.apiFetch.nonceMiddleware );',
'wp.apiFetch.use( wp.apiFetch.mediaUploadMiddleware );',
sprintf(
'wp.apiFetch.nonceEndpoint = "%s";',
admin_url( 'admin-ajax.php?action=rest-nonce' )
),
)
),
'after'
);
This modified code works fine, just removed the enclosing “implode(“\n”)”:
$scripts->add_inline_script(
'wp-api-fetch',
array(
sprintf(
'wp.apiFetch.nonceMiddleware = wp.apiFetch.createNonceMiddleware( "%s" );',
( wp_installing() && ! is_multisite() ) ? '' : wp_create_nonce( 'wp_rest' )
),
'wp.apiFetch.use( wp.apiFetch.nonceMiddleware );',
'wp.apiFetch.use( wp.apiFetch.mediaUploadMiddleware );',
sprintf(
'wp.apiFetch.nonceEndpoint = "%s";',
admin_url( 'admin-ajax.php?action=rest-nonce' )
),
),
'after'
);
hmm … we’ll need to take a step back here;
1. does all work when AsyncJS is off and Autoptimize’s “optimize JS” is off?
2. does all work when AsyncJS is off and Autoptimize’s “optimize JS” is on but “aggregate JS” is off?
AsyncJS off
Autoptimize on
Optimize JS off
Aggregate JS off
Aggregate inline JS off
WORKS!
AsyncJS off
Autoptimize on
Optimize JS on
Aggregate JS off
Aggregate inline JS off
WORKS!
AsyncJS off
Autoptimize on
Optimize JS on
Aggregate JS on
Aggregate inline JS off
FAILS! Many “Uncaught ReferenceError”s
AsyncJS off
Autoptimize on
Optimize JS on
Aggregate JS on
Aggregate inline JS on
FAILS! Single “Uncaught ReferenceError” as in first post
con
(@conschneider)
Engineer
Howdy @playalistic_p,
You could try and employ https://wordpress.org/plugins/plugin-organizer/ to change the loading order. Try loading Autoptimize either later or earlier in an attempt to dodge the Uncaught Ref errors.
Kind regards,
Tried Autoptimize on the very first and last postion, still the same errors.
OK, can you now (re-)try
AsyncJS off
Autoptimize on
Optimize JS on
Aggregate JS on
Aggregate inline JS off
but with the following in the comma-separated JS optimization exclusion list:
wp-includes/js/
Works!
But fails with AsyncJS turned on, even with exclusion of wp-includes/js/.
OK, we’re getting closer 🙂
Now; do you _need_ asyncjs? what in the performance of the site with AO needs to be improved?
