Electron-forge: React HMR doesn't work without a manual refresh

[Neurrone]

Preflight Checklist

• [x] I have read the contribution documentation for this project.
• [x] I agree to follow the code of conduct that this project follows, as appropriate.
• [x] I have searched the issue tracker for a bug that matches the one I want to file, without success.

Issue Details

• Electron Forge Version:
  
  
  
  • 6.0.0-beta.47
  
  
• Electron Version:
  
  
  
  • 7.1.8
  
  
• Operating System:
  
  
  
  • Win10 1909
  
  

Expected Behavior

HMR with React should work without having to manually refresh the rendered window

Actual Behavior

The console is correctly showing the updated / changed files. However, I have to press ctrl+r to actually see the changes on screen.

To Reproduce

I've created a repo that was generated with the typescript-webpack template.

1. Install dependencies with yarn and start with npm start. Open devtools with ctrl+alt+i.
2. Edit test.tsx. Notice that the console does show the updated file, but changes are not reflected.

[TobiasJacob]

+1

[TobiasJacob]

I was able to make it work by not using

import { AppContainer } from 'react-hot-loader';

but instead using

// App.tsx
import { hot } from 'react-hot-loader';
import React from 'react';

const App = () => <div>Hello World!</div>;

export default hot(module)(App);

and

//renderer.tsx

import 'react-hot-loader';
import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('app'));

See this repo for further questions. To reproduce the repro:

• yarn create electron-app my-new-app --template=typescript-webpack
• yarn add react react-dom @types/react @types/react-dom react-hot-loader
• "jsx": "react", to tsconfig.json
• add webPreferences: { nodeIntegration: true } in index.ts
• create .babelrc with { "plugins": ["react-hot-loader/babel"] }
• adjust ./src/renderer.ts to ./src/renderer.tsx in package.json
• add <div id="app"></div> to index.html
• adjust both App.tsx and renderer.tsx as shown above

Then App.tsx should support hot reloading, what you can try out by changing the content of the div.

[Neurrone]

@TobiasJacob thanks a lot, this worked for me too :)

[ambroiseRabier]

Thanks @TobiasJacob , I suppose that react-hot-loader shouldn't be used in production: export default hot(module)(App); ?