Hot Reloading broke - webpack v3

[pearofducks]

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

[SagiMedina]

+1

[alxrocha]

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 ?

[SagiMedina]

@Procyon It worked, Thanks!

[pearofducks]

@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(),
....

[harmon25]

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..

[timothyallan]

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

[EvHaus]

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() {};
/******/ 			},

[alexilyaev]

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?

[jdeniau]

Same bug here, same fix, removing ModuleConcatenationPlugin

[pearofducks]

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.

[ghost]

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

[JonasGao]

"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

[Heartnett]

+1

[jeandonaldroselin]

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");

[mhaagens]

+1

[piehei]

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.

[ergenekonyigit]

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

[ghost]

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

[HelloLove]

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

[taciomedeiros]

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

[shellscape]

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.

[TheLarkInn]

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 ( webpack/webpack#5505 ) But I have not seen this issue myself locally and I'm still able to reproduce.

[TheLarkInn]

#949 (comment) 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?

[jantimon]

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)

[shepelevstas]

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.

[AnonymousArthur]

@ergenekonyigit Yes, this one solved my problem.

[ForsakenHarmony]

Including webpack-dev-server/client & webpack/hot/dev-server in the bundle entry fixed it for me

[pietrofxq]

Is hot reloading still broken? I updated from webpack 1 to 3 and can't get it to work yet.

[danielravina]

Setting inline: true in the config fixed the problem for me.

"webpack-dev-server": "^2.11.1"
"webpack": "^3.10.0"