CODEWITHSUNDEEP
javascriptreactjswebpackelectron
Oscar Franco
Oscar Franco

Reputation: 6220

Electron, React and Webpack, how to make HMR work?

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: project

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:

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

enter image description here

Upvotes: 3

Views: 1897

Answers (1)

Oscar Franco
Oscar Franco

Reputation: 6220

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

Upvotes: 1

Related Questions