webpack: Webpack 4. Uncaught ReferenceError: webpackHotUpdate is not defined

Do you want to request a feature or report a bug? bug

What is the current behavior? capture

If the current behavior is a bug, please provide the steps to reproduce.

Run webpack-dev-server, it builds sucessfully.
Open page containing my bundled React code.
It runs sucessfully.
Change something in jsx to emit hot-update.
Webpack rebuilds sucessfully, changes applied.
Update whole page using F5 in browser.

What is the expected behavior? After step 6 I expect normal page loading again, but instead I get error messages above and not loaded page. Didn’t have such problems in webpack 3.

With this option it works

  new webpack.HotModuleReplacementPlugin({
     multiStep: true,
  }),

but in webpack 3 it worked like this

  new webpack.HotModuleReplacementPlugin(),

If this is a feature request, what is motivation or use case for changing the behavior? not feature request

Please mention other relevant information such as the browser version, Node.js version, webpack version, and Operating System.

webpack: 4.1.0 chrome: last stable node: 8.9.4 react: 16.2.0

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 20
Comments: 37 (13 by maintainers)

Commits related to this issue

fix: multiStep broke html-webpack-plugin — committed to nuxt/nuxt by clarkdo 6 years ago
docs: fix hmr error https://github.com/webpack/webpack/issues/6693 — committed to vuetifyjs/vuetify by johnleider 6 years ago
docs: fix hmr error https://github.com/webpack/webpack/issues/6693 — committed to vuetifyjs/vuetify by johnleider 6 years ago
docs: next version rewrite of documentation (#5728) * chore(releases): remove old releases * chore(router): remove env reference * feat(drawer): update drawer structure * feat(home-page): up... — committed to vuetifyjs/vuetify by johnleider 6 years ago
Ignore hot update files on hmr See: https://github.com/webpack/webpack/issues/6693#issuecomment-745688108 — committed to abhchand/girder by abhchand 3 years ago
[Girder] Ignore hot update files on hmr See: https://github.com/webpack/webpack/issues/6693#issuecomment-745688108 — committed to abhchand/reely by abhchand 3 years ago

Most upvoted comments

I have fixed this by switching runtimeChunk to true.

+36

Timehello on Jul 30, 2018

Still present.

+29

manniL on Jan 28, 2019

Hi, i know its an old issue but i had the same problem. If you are using webpack-assets-manifest and reading the manifest.json on reload you have to ignore the hot-update files on hmr. webpack-assets-manifest already includes an regex but reads the webpack.config.js option if its set. If you set the defaults in webpack.config.js it will ignore them automatically and will no longer override your base files in manifest.json.

output: {
    ...,
    hotUpdateChunkFilename: '[id].[fullhash].hot-update.js',
    hotUpdateMainFilename: '[runtime].[fullhash].hot-update.json',
},

Hope it helps

web-mi on Dec 16, 2020

Also sometimes clearing project cache and rebuilding from scratch might help temporary. EG remove dist build folder and run webpack again. Cause of it might be some of the mentioned above.

    "webpack": "^4.20.2",
    "webpack-bundle-analyzer": "^3.4.1",
    "webpack-dev-server": "^3.8.0"
    "webpack-cli": "^3.3.6",
    "webpack-merge": "^4.1.4"
    "copy-webpack-plugin": "^5.0.4",
    "friendly-errors-webpack-plugin": "^1.7.0",
    "html-webpack-plugin": "^4.0.0-beta.11",

BonBonSlick on Jan 8, 2020

Add multiStep can fix the issue, but multiStep will break html-webpack-plugin as https://github.com/jantimon/html-webpack-plugin/issues/533 described.

@sokra @jantimon Can we discuss a better solution ?

clarkdo on Apr 11, 2018

Somebody can create reproducible test repo?

alexander-akait on Apr 16, 2020

I think the issue was with the plugin assets-webpack-plugin.

If anyone is having the same problem, I got to fix the issue I was having simply by changing from assets-webpack-plugin to webpack-manifest-plugin, the same one that create-react-app uses. After that, i could remove the multiStep: true, and everything returned back to normal.

GabeDuarteM on May 18, 2018

@evilebottnawi I just tested using 4.8.2, still the same thing.

I can post my webpack/babel/whatever config, if you think it’s necessary.

GabeDuarteM on May 11, 2018