ericclemmons/webpack-hot-server-example

Integrate with react-hot-loader

joehua87 opened this issue · 3 comments

joehua87 commented

@ericclemmons Thank you for your helpful repo.
I've try to integrate with react-hot-loader without luck :( - (the commits is here joehua87@18213d3)
I think problem is that I cannot use webpack-dev-middleware in the the process start with webpack cli, would anyone have a workaround solution?

When I remove these line, it works but not reload client code

.use(webpackDevMiddleware(compiler, {
  noInfo: true,
  publicPath: config.output.publicPath
}))
.use(webpackHotMiddleware(compiler))

When I use node src/server.js instead of webpack --watch, it works but not reload server code

ericclemmons commented

I'm using react-hot-loader with my projects. What is the the problem you're having? Things just aren't reloading on the client or...?

(Admittedly, having client-side HMR and React in this project is entirely out of scope. This project shows that it's possible to avoid using nodemon with costly server restarts if you use webpack instead).

joehua87 commented

Yes, I've got the idea.
I think we can make it reload on server, also client. But cannot make webpack-dev-middleware (use webpack.config.client.js) run in process start with webpack --watch (use webpack.config.js), maybe we can't do this with webpack. 😬

ericclemmons commented

That's odd. This project was taken from an existing, functioning work project that's been doing this for ~6 months now :D

import { Router as router } from "express";

import client from "../../webpack.config.client.babel";
import dev from "webpack-dev-middleware";
import hot from "webpack-hot-middleware";
import webpack from "webpack";

const compiler = webpack(client);

export default router()
  .use(dev(compiler, {
    noInfo: true,
    publicPath: "/",
    quiet: false,
  }))
  .use(hot(compiler))
;

We have HMR working on both sides. You can't run webpack-dev-server, but you can use webpack-dev-middleware with HMR successfully.

I have some other projects that do HMR on the client, but haven't put in the server-side HMR yet. Hopefully this may help:

https://github.com/ericclemmons/npm-install-webpack-plugin/tree/master/example/webpack1

Sorry to close the issue, but it's not really something I can address here. What I can tell you is that HMR works on both the server & the client with React. What I don't know is if there's an issue with the latest react-hot-loader beta. (I've heard there are some SSR issues!)

  • ❤️1