Next.js: Uncaught ReferenceError: webpackHotUpdate is not defined
Bug report
Describe the bug
Hi, we encountered an weird exception "Uncaught ReferenceError: webpackHotUpdate is not defined" in our next.js project. This exception occurs each time we reload the page.
I found it is related to our custom webpack config. We prepend an entry that contains some polyfills in the webpack config and the problem occurs.
It seems that webpack added a file of which url is like http://localhost:3000/_next/static/webpack/static/runtime/main.js.0e14f9bffebb9d8aa940.hot-update.js. (let's call it hot-update.js later) In this file, a global function named webpackHotUpdate is called.
webpackHotUpdate is defined in in http://localhost:3000/_next/static/runtime/webpack.js. In fact, this script is already in the html content before the hot-update.js. But it's an async script, somehow it is executed after hot-update.js.
Since the scripts has some dependencies, I think next.js should render scripts nodes as defer script instead of async script.
To Reproduce
clone this repo: https://github.com/lukeupup/nextjs-bug-report
and run: npm run dev
Expected behavior
scripts that have dependencies should be executed in order.
Screenshots
If applicable, add screenshots to help explain your problem.
System information
- OS: OSX
- Browser (if applies) Chrome Version 73.0.3683.86 (Official Build) (64-bit) / Firefox 65.0.2
- Version of Next.js: 7.0.3 (8.0.3 also has this problem)
lukeupup
All 7 comments
I guess this is triggered by you changing the polyfill file you're adding into Next.js internals, by default main.js wouldn't have hot updates as it never changes.
timneutkens
on 1 Apr 2019
Hmm, the problem is that I haven't changed the polyfill. webpackHotUpdate is not executed by I change something, but executed by each time we open / reload the page. The hot-update.js is rendered in the page in SSR stage.
The real problem here is the script files that webpack produces must be executed in a certain order, and cannot ensure this order.
lukeupup
on 3 Apr 2019
I also got same error when tried to apply polyfills for IE11.
I am using Next.js 8.1.x
But interesting thing is that HRM still works :), its just report error in browser console:
main.js.8c5bb1500cae6ff61bb5.hot-update.js?ts=1555566188867:1 Uncaught ReferenceError: webpackHotUpdate is not defined
next.config.js
const withPlugins = require('next-compose-plugins')
const images = require('next-images')
const nextConfig = {
webpack: (config) => {
const originalEntry = config.entry;
config.entry = async () => {
const entries = await originalEntry()
if (entries['main.js']) {
entries['main.js'].unshift('./polyfills.js')
}
return entries
}
return config;
}
}
module.exports = withPlugins([
images
], nextConfig)
polyfills.js
import 'babel-polyfill'
lauriskuznecovs
on 18 Apr 2019
Any updates on this, or other ways of solving it without the error? I'm facing the same problem.
InsideGH
on 24 Apr 2019
Got around it by not unshifting the polyfill in the webpack config but instead importing it in the _app.js(x) file.
InsideGH
on 24 Apr 2019
Actually, I got rid of the error by checking if the polyfill was part of the config before unshifting it. Because I noticed it was part of the array twice. Now I don't get the hot reload error anymore.
webpack: (config, { buildId, dev, isServer, defaultLoaders }) => {
const originalEntry = config.entry;
config.entry = async () => {
const entries = await originalEntry();
if (entries['main.js'] && !entries['main.js'].includes('./polyfills.js')) {
entries['main.js'].unshift('./polyfills.js');
}
return entries;
};
The solution by @InsideGH removes this error. Similar to the example with-polyfills
bmtdh
on 3 May 2019
Related issues
formula349
路
3Comments
swrdfish
路
3Comments
DvirSh
路
3Comments
irrigator
路
3Comments
wagerfield
路
3Comments
Most helpful comment
Actually, I got rid of the error by checking if the polyfill was part of the config before unshifting it. Because I noticed it was part of the array twice. Now I don't get the hot reload error anymore.