Javascript Error After Updating #1054
Description
Bug Description
Some chunks generated by Webpack are loaded without a version attached to it, or otherwise unique filename which would cause it to be downloaded fresh when the plugin is upgraded.
Related to #326 (and likely many others) but not all blank screen issues.
🆘 TL;DR SUPPORT REMEDY 🆘
For those affected by this bug, simply clear your browser's cache and purge your CDN and you should be back in business!
console.log
admin.php?page=googlesitekit-splash:477 GET http://sitekit.labs.srvrx.pw/wp-content/plugins/google-site-kit/dist/assets/js/ads.js?ver=1.2.0 net::ERR_BLOCKED_BY_CLIENT
jquery-migrate.js?ver=1.4.1:23 JQMIGRATE: Migrate is installed with logging active, version 1.4.1
react-dom.js?ver=16.9.0:12276 Uncaught TypeError: Cannot read property 'call' of undefined
at __webpack_require__ (googlesitekit-dashboard-splash.js?ver=1.2.0:1)
__webpack_require__ @ googlesitekit-dashboard-splash.js?ver=1.2.0:1
react-dom.js?ver=16.9.0:19952 The above error occurred in one of your React components:
in Unknown (created by t)
in Suspense (created by t)
in t (created by t)
in t
React will try to recreate this component tree from scratch using the error boundary you provided, t.
logCapturedError @ react-dom.js?ver=16.9.0:19952
logError @ react-dom.js?ver=16.9.0:19988
callback @ react-dom.js?ver=16.9.0:21099
callCallback @ react-dom.js?ver=16.9.0:13067
commitUpdateEffects @ react-dom.js?ver=16.9.0:13106
commitUpdateQueue @ react-dom.js?ver=16.9.0:13097
commitLifeCycles @ react-dom.js?ver=16.9.0:20217
commitLayoutEffects @ react-dom.js?ver=16.9.0:22951
callCallback @ react-dom.js?ver=16.9.0:341
invokeGuardedCallbackDev @ react-dom.js?ver=16.9.0:391
invokeGuardedCallback @ react-dom.js?ver=16.9.0:448
commitRootImpl @ react-dom.js?ver=16.9.0:22723
unstable_runWithPriority @ react.js?ver=16.9.0:2820
runWithPriority$2 @ react-dom.js?ver=16.9.0:11443
commitRoot @ react-dom.js?ver=16.9.0:22552
runRootCallback @ react-dom.js?ver=16.9.0:21692
(anonymous) @ react-dom.js?ver=16.9.0:11491
unstable_runWithPriority @ react.js?ver=16.9.0:2820
runWithPriority$2 @ react-dom.js?ver=16.9.0:11443
flushSyncCallbackQueueImpl @ react-dom.js?ver=16.9.0:11487
scheduler_flushTaskAtPriority_Immediate @ react.js?ver=16.9.0:2607
flushTask @ react.js?ver=16.9.0:2653
flushWork @ react.js?ver=16.9.0:2784
performWorkUntilDeadline @ react.js?ver=16.9.0:2408
I wasn't able to reproduce this in all environments as some servers are more intelligent about serving proper headers used for validating browser-cached assets.
Although I'm able to reproduce this, the exact conditions on the server itself aren't 100% clear. It seems to be related to cache headers, such as ETag or Last-Modified which can vary from server to server.
I was only able to replicate this using a CDN (Cloudflare). However, when I enabled "Development Mode" on the CDN, I was no longer able to replicate it.
Steps to reproduce
- Start from clean browser state (incognito or empty cache)
- Install and Site Kit 1.1.2
- Visit splash screen
- Upgrade Site Kit to latest (1.2.0)
- See error
Screenshots
Chunk loads
Chunk is cached in the browser
Post Update
Splash screen loads with infamous Cannot read property 'call' of undefined error
Browser shows the same chunk is still cached
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
- All chunks generated by Webpack which are not directly enqueued by WordPress (e.g.
vendororcommons) should have[chunkhash]in the filename
Implementation Brief
Changelog entry
- Fix several temporary blank screen errors by loading script dependencies more reliably via Webpack.