Unable to get server-side hot reloading working

[cmoad]

Thanks for this project. I'm having trouble getting hot reloading to work, so I thought I would create a "hello world" complete project to demonstrate. https://github.com/cmoad/koa-webpack-hmr-test

You should be able to clone the above repo then npm install and npm start.

If I curl localhost:5000 I get ok. I then change ok to test in index.js. I can see webpack recompile on the command line, but if I curl localhost:5000 I still get ok.

I should also note that I can't get webpack to run without the plugin, new webpack.IgnorePlugin(/webpack/). Without that I see a lot of Module not found and Module parse failed from webpack dependencies.

[shellscape]

We use koa-webpack module with https://github.com/gilt/data-viz and hot module reloading works wonderfully. I'm not sure why it's not working correctly for your environment. If I had to guess, it's probably because you haven't included the HotModuleReplacementPlugin in your webpack config. That plugin is also shown as a requirement for webpack-hot-middleware as shown here. You're also missing several other plugins that middleware states are required.

Chalking this up to a case of bad webpack.config.js. Please reopen the issue if you find a different cause.

[cmoad]

Unfortunately I still wasn't able to get the project working after adding the plugins and following the example referenced in #25. Additionally I get an error when running the data-viz example (shown below). I do appreciate the feedback and I'll be sure to update this ticket if/when I can get this server-side only example working.

ERROR in ./src/App.vue
Module build failed: TypeError: this._init is not a function
    at Object.Vue$2 (/Users/charlie/Source/data-viz/node_modules/vue/dist/vue.runtime.common.js:3429:8)
 @ ./src/main.js 2:0-28
 @ multi eventsource-polyfill webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000 ./src/main.js

[shellscape]

@cmoad hm strange brew indeed. I'm not getting the error on my end with that sample, but that could be an environment condition. I'll add to my list blowing that down and running fresh from the repo, and reproduce and clean up from there.

it's a long-shot, but you might have some luck with koa-webpack-middleware. that module does sort of the same thing as koa-webpack, but in a different way. If you can get server-side rendering working for your project using that module, please let me know, and I'll have a point at which I can use that as a control to add to koa-webpack.

[cmoad]

@shellscape Thanks for the feedback. Your efforts are greatly appreciated.

[tomatau]

Same here, migrating to koa2 after migrating to webpack 2 and the hot updates aren't working.

I tried to use koa-webpack-middleware first but it was breaking mime types as the hot middleware set octetstream on every response. Then I found your middleware here which fixed that problem! So thanks for that!

But now I can see that hot update events aren't being emitted to the client. I can also see the webpack-hot-middleware/client hitting the server as I'm debugging with a custom path and the server is logging those requests, but the client isn't getting anything back!

I can also see that the hot updates are running and creating a bundle as I'm logging out from a custom compiler:

  compiler.plugin('compile', () => log.hot('Webpack compile started...'))
  compiler.plugin('compilation', () => log.hot('Webpack compiling...'))

But still definitely the client isn't receiving anything.

This is a PR on the boilerplate I'm making the migration for: https://github.com/tomatau/breko-hub/pull/101/files

[andyrj]

I believe I just ran into this myself and the issue was my babel config that prevented my hot reloading using es6 import statements... if your code hot reloads when you change to require(), try changing your babel options in webpack.config.js to something along these lines...

module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { "presets": [ ["env", { "modules": false, "targets": { "node": "current" } }] ], "plugins": [ "transform-object-rest-spread" ] } } } ] },

that babel-preset-env setup should get es6 import code hot reloading properly in node server side code, sorry for the crap word wrapped paste from vscode ><

[nasushkov]

I've got the same issue with hot reloading for koa 2. For koa 1 the same configuration used to work perfectly with koa-webpack-dev-middleware/koa-webpack-hot-middleware. I don't see any obvious problems in my configuration mentioned above (i.e. HotModuleReplacementPlugin). @shellscape do you have any thoughts why this can happen?

[shellscape]

@nasushkov unfortunately not. I don't actually run any configs for server side rendering, so I'm not much help there I'm afraid.

[nasushkov]

@shellscape thanks for a fast reply. @tomatau did you manage to solve this problem for your configuration?

[nasushkov]

@shellscape piping the stream solves the problem for me. Just made a pr #61

[shellscape]

Issue hasn't seen activity in over 90 days. #61 was closed as abandoned. Closing issue as stale.

[twelve17]

I too am running into this issue. I'll see if I can get to the bottom of it, but have one observation:

When I began testing koa-webpack, the webpack-hot-client dependency was at the 1.2.1 version, so my package-lock.json retained that version even when I upgraded koa-webpack. Through troubleshooting, I deleted my package-lock.json file to allow my dependencies to get their latest nested dependencies. For koa-webpack, this meant that now it uses the 1.2.2 version of webpack-hot-client, and the behavior for me has changed from simply not working on the client side (as reported by the OP), to this error:

   ERROR in multi webpack-hot-client/client?8065bef2-f3df-4e75-ba48-e5a302f7c6e8 ./app/main.js
    Module not found: Error: Can't resolve 'webpack-hot-client/client?8065bef2-f3df-4e75-ba48-e5a302f7c6e8' in '/path/to/my/app'
     @ multi webpack-hot-client/client?8065bef2-f3df-4e75-ba48-e5a302f7c6e8 ./app/main.js

I still need to debug some more on my end, but I wanted to confirm that koa-webpack is working with webpack-hot-client@1.2.2 or later?

[twelve17]

Wait, I just noticed #81, which may be a dupe of this issue, but more importantly, I also found webpack-contrib/webpack-hot-client#8, which is what I think I'm running into. Going to go through that issue's comments' instructions.