Webpack-dev-server: Hot Reloading broke - webpack v3

Created on 20 Jun 2017 · 29Comments · Source: webpack/webpack-dev-server

bug

What is the current behavior?
HMR doesn't work against the latest webpack and webpack-dev-server

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

Unfortunately I'm unable to reproduce this against the stock Vue.js _webpack-simple_ template, but my repo only makes very minor changes to that.

This repo/branch will reproduce the behavior: https://github.com/propellant/components/tree/v7

Clone, yarn, npm run dev, change something in demo/App.vue

What is the expected behavior?
Working HMR

Please mention your webpack and Operating System version.
Webpack 3, macOS 10.12.5, node 8.1.2

question

Source

pearofducks

👍34

Most helpful comment

It also broke for me on the webpack 3 update, but I dont use ModuleConcatenationPlugin.

ghost on 29 Jun 2017

👍29

All 29 comments

SagiMedina on 20 Jun 2017

👎1

I had the same problem, but removing the ModuleConcatenationPlugin plugin fixes the issue for me.

@pearofducks Can you try removing it from your Webpack config to confirm if this plugin is breaking the HMR ?

alxrocha on 20 Jun 2017

👍11 🎉1

@procyon It worked, Thanks!

SagiMedina on 20 Jun 2017

@procyon - make no difference in mine, that plugin was only sourced if it was a production build:

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
....

pearofducks on 20 Jun 2017

👍3

Confirmed I am also having issues with new webpack.optimize.ModuleConcatenationPlugin() in my webpack.dev.config - removing the plugin solved the issue.

Was not HMR that was the problem though, am not using the dev-server - --watch in general was not working. I am running on Windows 10 without inotify-tools which could be the issue.

webpack3 watch + webpack.optimize.ModuleConcatenationPlugin() - on Windows does not appear to work as expected - code is not rebuilding on changes to the source... removing the ModuleConcatenationPlugin from dev config resolves the issue - will only use it on prod for now..

harmon25 on 20 Jun 2017

👍2

Here as well on macOS 10.12.5, as soon as I remove ModuleConcatenationPlugin, my HMR works again.

timothyallan on 20 Jun 2017

👍5

Same issue here. Some more info for you, this is the error I'm getting:

vendor.7.0.0.js:178 Uncaught TypeError: Cannot read property 'length' of null
    at Object.accept (vendor.7.0.0.js:178)
    at eval (entry.js_+_38_modules:2406)
    at Object../html/js/entry.js (app.7.0.0.js:154)
    at __webpack_require__ (vendor.7.0.0.js:696)
    at fn (vendor.7.0.0.js:117)
    at __WEBPACK_IMPORTED_MODULE_2_i18next__.default.use.use.init (main.js_+_1_modules:153)
    at eval (index.js_+_14_modules:1948)
    at done (index.js_+_14_modules:2055)
    at Object.eval [as callback] (index.js_+_14_modules:2071)
    at eval (index.js_+_14_modules:1477)
    at Array.forEach (<anonymous>)
    at Connector.loaded (index.js_+_14_modules:1464)
    at eval (index.js_+_14_modules:1612)
    at eval (index.js_+_14_modules:1505)
    at Backend.read (main.js_+_1_modules:28)
    at Connector.read (index.js_+_14_modules:1498)

The failure is in hotCreateModule function:

accept: function(dep, callback) {
/******/                if(typeof dep === "undefined")
/******/                    hot._selfAccepted = true;
/******/                else if(typeof dep === "function")
/******/                    hot._selfAccepted = dep;
/******/                else if(typeof dep === "object")
                                                // FAILURE HAPPENS HERE BECAUSE dep IS null
/******/                    for(var i = 0; i < dep.length; i++)
/******/                        hot._acceptedDependencies[dep[i]] = callback || function() {};
/******/                else
/******/                    hot._acceptedDependencies[dep] = callback || function() {};
/******/            },

EvHaus on 20 Jun 2017

Same here on macOS 10.12.5, Node 6.10.3.

Branch to test webpack3:
https://github.com/alexilyaev/react-es6-starter/tree/webpack3

Is there a benefit ModuleConcatenationPlugin in development?
Or is it just an optimization for Production?

alexilyaev on 21 Jun 2017

👍4

Same bug here, same fix, removing ModuleConcatenationPlugin

jdeniau on 21 Jun 2017

Instead of adding more "same bug/same fix", please just +1 this if you removed ModuleConcatenationPlugin and it fixed things.

Otherwise this _is_ still an open and reproducible issue for the original case/repo.

pearofducks on 21 Jun 2017

👍21

It also broke for me on the webpack 3 update, but I dont use ModuleConcatenationPlugin.

ghost on 29 Jun 2017

👍29

"Same bug here, same fix, removing ModuleConcatenationPlugin" +1

as @harmon25 said, i try use "webpack --watch --config xxxxxxx", also not working

macOS 10.12.5, node 8.1.2, npm 5.0.4, webpack 3

i uploaded my project: https://github.com/JonasGao/test-webpack3
you can test it

In fact, in my test project, remove the configuration 'env', {modules: false} from .babelrc, can make hot compilation worked

JonasGao on 30 Jun 2017

Heartnett on 30 Jun 2017

This part "new webpack.optimize.ModuleConcatenationPlugin()" worked for me when adding the following line at the beginning of my webpack.config.js file :

var webpack = require("webpack");

JeeDay on 1 Jul 2017

mhaagens on 3 Jul 2017

I have the same problem. More details below. Hopefully this helps.

HMR error message is always concerning hot-update.json timed out
- from Chrome dev tools it seems the request is never made but canceled on the fly (same can be confirmed from the dev server side: logging all requests shows no requests to the json)
- debugger shows that it cancels with status 0 --> timed out
- the actual hot-update.json file is present and accessible while HMR cancels the request and initiates a full reload
does not occur on webpack 2.6.1
occurs on both webpack 3.0.0 and 3.1.0
no ModuleConcatenationPlugin
no env: { modules: false } for babel
whole project is based on vue-cli webpack (https://github.com/vuejs-templates/webpack)

HMR works correctly if I change to 2.6.1 – no need to touch any of the configuration files. All that changes is the webpack version.

piehei on 7 Jul 2017

👍4

Fixed after commenting this line in build/dev-server.js file.
hotMiddleware.publish({ action: 'reload' })

ergenekonyigit on 14 Jul 2017

👍15 ❤5 🎉3 😄2

@ergenekonyigit All this does is not showing the error anymore, hot reloading still won't work for me.

ghost on 14 Jul 2017

👍1

it is not worked for me too
I use [email protected],[email protected]

HelloLove on 27 Jul 2017

What worked for me was put watchOptions in devServer config
watchOptions: { aggregateTimeout: 300, poll: 1000 },

taciomedeiros on 28 Jul 2017

👍6

We've got several workarounds that folks have posted that work, and additional info that this may be a problem that was introduced in [email protected]. It's likely to be an issue that's better raised with the main webpack project at https://github.com/webpack/webpack. There's been several updates to webpack (and this module) so I'd encourage you all to try both updates as well.

If anyone figures out a workaround in code and would like to submit a PR for it, we'd happily review it. Until then we're going to close this one while we continue our effort to get the Issues for webpack-dev-server under control and to a place where we can efficiently addresses issues.

shellscape on 9 Aug 2017

🎉2

Has anyone been able to determine what the cause of this issue is. I've seen some mention that writing something to the content base will trigger a reload ( https://github.com/webpack/webpack/issues/5505 ) But I have not seen this issue myself locally and I'm still able to reproduce.

TheLarkInn on 17 Aug 2017

https://github.com/webpack/webpack-dev-server/issues/949#issuecomment-315283799 This actually fixed it for me however I think I know what is causing the issue. So I believe that latest Html-webpack-plugin is emitting every time there is a change. There fore that hook is getting triggered in the vue-cli

// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})

Therefore a trigger event is occuring every time. I think there needs to be some interfacing when it comes to dev-server and dev-middleware for html-webpack-plugin

cc @jantimon is this a known issue?

TheLarkInn on 17 Aug 2017

Copied from #webpack/5505

@TheLarkInn The html-webpack-plugin has some code which should prevent that:

https://github.com/jantimon/html-webpack-plugin/blob/672f34bc98ff4130dba94551866d0e57086a7915/index.js#L77-L90

However the best way would be if webpack would allow me to create a child compiler which only recompiles if one of the child compilers source files changes.

Right now I have to start the child compiler for the html generation in every webpack make phase and try the best to run as little code as possible with a lot of custom caching logic which really dependents on webpack internals:
https://github.com/jantimon/html-webpack-plugin/blob/672f34bc98ff4130dba94551866d0e57086a7915/index.js#L45-L48

I guess providing a better childCompiler could increase the performance of many many many webpack compilations out there.

The idea of HtmlWebpackHarddiskPlugin is to help complex setups which produce a template which is than used by express server plugins which work only with files from disk or sth similar use cases. It should be used only for that - (therefore it is not part of the html-webpack-plugin)

jantimon on 17 Aug 2017

👍1

Hello! Im not using html-webpack-plugin, not using babel-loader and not using ModuleConcatenationPlugin, I only use vue-loader and ['style-loader','css-loader','sass-loader'] and start webpack-dev-server --open --hot npm script command, and it crashes with many errors. It works ok if I remove --hot. Is it too early to use wepback 3?

update:
uninstalling webpack 3 and installing webpack 2.6.1 didn't help.