electron / electron/forge

Hot reloading / React Refresh no longer works with default settings

Open
#2,560 8 comments 12 reactions 0 assignees View on GitHub
documentation plugin/webpack
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:)
![image](https://user-images.githubusercontent.com/567041/135711197-abe0d744-a8d8-4290-9e5d-24582d2a02b7.png)

### Additional information

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.