Hot reloading / React Refresh no longer works with default settings
- Dominant language
- TypeScript
- Stars
- 7.1k
- Forks
- 641
- Avg merge
- 3d 1h
- Merged PRs (30d)
- 30
Description
### Pre-flight checklist
- [X] I have read the [contribution documentation](https://github.com/electron-userland/electron-forge/blob/master/CONTRIBUTING.md) for this project.
- [X] I agree to follow the [code of conduct](https://github.com/electron/electron/blob/main/CODE_OF_CONDUCT.md) that this project uses.
- [X] I have searched the issue tracker for a bug that matches the one I want to file, without success.
### Electron Forge version
6.0.0-beta.61
### Electron version
v15.1.0
### Operating system
Ubuntu 20.04 x64
### Last known working Electron Forge version
6.0.0-beta.54
### Expected behavior
In `6.0.0-beta.54`, I had a working setup using [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin/), which is currently the recommended (and least intrusive) way to add HMR to a React app. Using this plugin, React components can be edited and will hot-reload with minimum latency and without losing their state.
### Actual behavior
I recently created a new electron-forge project, using version `6.0.0-beta.61`. Using the same approach, hot reloading doesn't work. Instead, the entire application will perform a full, hard reload on every change -- in fact, it'll even sometimes reload when editing entirely unrelated files (for example, files that are in the source tree but not part of Webpack's require tree).
After pulling my hair out and digging into electron-forge internals trying to understand what was happening, I finally discovered that setting `liveReload` to `false` in the forge config in `package.json` fixes the issue:
```js
"config": {
"forge": {
"plugins": [
[
"@electron-forge/plugin-webpack",
{
"devServer": { "liveReload": false }, // <- this line fixes the issue
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/index.html",
"js": "./src/renderer.tsx",
"name": "main_window"
}
]
}
}
]
]
}
},
```
This allows hot reloading to take place without webpack-dev-server forcing a full refresh on every edit. It'll still perform a complete refresh when a hot update doesn't succeed, which is the expected behaviour.
I've set up webpack-dev-server with HMR before and don't recall having to set `liveReload` to false, which maybe points to an issue in electron-forge's internal configuration. What's more, I suspect this is not a React-specific issue and is suboptimal for any framework or setup where a full renderer reload on every change is not desired. It might be worth offering a higher-level configuration option for hot reloading, autodetecting common hot reload scenarios, or even just documenting this setting very clearly.
### Steps to reproduce
- Create a new Forge project from a webpack template.
- Add React per the [framework integration documentation](https://www.electronforge.io/guides/framework-integration/react).
- Add React Refresh per the [react-refresh-webpack-plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin/) documentation.
- Create a React component in a new file and import and render it in your React entrypoint.
- Edit the component you just created. In `6.0.0-beta.54`, this should not cause a full refresh.
- In `6.0.0-beta.61`, webpack-dev-middleware will warn in the Electron console that `.webpack/renderer/main_window/index.html` was changed and that it's performing a full reload. (You may need to open the Devtools console settings and click "Preserve log" for the message not to be lost on reload:)

### Additional information
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.