Electron、React 和 Webpack，如何让 HMR 发挥作用？

Question

It is hard to comprehend the complexities of webpack and I need some help getting HMR to work, I have started a new project using electron-forge using the typescript-webpack template.

The project got created with the following structure:

You can see the ts-loader configuration is already in there, afterwards I added react and react-dom and set up a hello world App component, the problem is now, when I change that component, I get a webpack HMR error:

not sure how to solve this issue, react-hot-loader seems to be the library to go to get this working but not sure how to make it work with ts-loader, could anybody point out how to get this set up working? Thanks!

Edit 1: I tried adding react-hot-reload but I get a require is not defined error...

Answer 1

Well, after fumbling around with the react-hot-loader package I just could not get it to work, so I stumbled upon the default webpack hot reloading way:

on the index file (where you import your root react component, you can use something like:

declare let module: { hot: any };

if (module.hot) {
  module.hot.accept("./App", () => {
    const NewApp = require("./App").default;

    render(<NewApp />, document.getElementById("app"));
  });
}

At least it seems to be working so far