[webpack] Add ability to disable liveReload in webpackDevServer

[yourfavorite]

Preflight Checklist

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

Problem Description

I am working on a React + Redux application using the Webpack + Typescript template and want to get Hot Module Replacement working for my React components. By default, whenever I update a module, the log will say Content base changed. Reloading... and the entire app reloads which resets my Redux state.

Proposed Solution

https://github.com/electron-userland/electron-forge/blob/master/packages/plugin/webpack/src/WebpackPlugin.ts#L297

I'd like the ability to pass in additional options here. Specifically liveReload: false. After I hardcoded this option in the WebpackPlugin.ts file, I was able to have the desired functionality of an individual module updating without breaking my Redux store. However I am not sure if this breaks other important functionality as I am currently just testing in a sandbox project.

Alternatives Considered

In the past I've used react-hot-loader but that was on Webpack 4 and I'm not sure if there will be issues with Webpack 5. Another possibility that I have not yet looked into would be React Fast Refresh which has a Webpack plugin, though I have yet to try that with electron-forge.

Additional Information

In my testing, this did prevent the Redux store from resetting. However it does not prevent state within a React component from resetting. Ideally preservation of React component state would also work though this is less important for my purposes.

Even if there are better solutions for electron-forge + webpack HMR + react + redux, it could still be beneficial to allow custom options (and overrides) to be passed to the webpackDevServer.

[malept]

I would suggest seeing if react-hot-loader works for you before we start adding more options to the Webpack plugin.

[yourfavorite]

@malept Alright, I'll give it a try soon and report back. I was hoping to avoid adding more packages if a single config option can solve it. 😄

[malept]

I am generally reluctant to add more code to the Webpack plugin if I can help it, because it's currently pretty complex (even after a lot of it got refactored for Webpack 5, which got rid of a lot of complexity), which makes it pretty difficult to maintain.

[yourfavorite]

@malept Unfortunately I wasn't able to get either of the alternatives working on my end.

react-hot-loader didn't work and I found some conversations over there stating that the package was deprecated and instead react-refresh-webpack-plugin should be used. So I attempted that but it seems there is an incompatibility with webpack-dev-server somewhere as it throws the error below. I also had to do a --force install due to electron-forge using some beta webpack stuff (IIRC I saw webpack-dev-server)

[YvanGuidoin]

try with:

new ReactRefreshWebpackPlugin({ overlay: false })

[yourfavorite]

Thanks @YvanGuidoin. That allowed me to get the application to launch but unfortunately this has the same result. Any modification to a component causes the entire application to reload because of liveReload being hardcoded to true. I currently do not see anyway to get React working with HMR unless we have the ability to disable liveReload.

edit - I should also add that I'm unsure of whether or not React Fast Refresh is actually working since Webpack HMR is also running at the same time and I'm not sure which causes the component to update when I have React Fast Refresh and Webpack HMR both running with liveReload disabled. I attempted to isolate just React Fast Refresh but setting hot to false like I did with liveReload causes the app to fail loading and I'm not sure that's really worth digging into at this point.

[gyzerok]

@malept we are having the same issue in our React project.

We are using react-refresh through webpack plugin.

On each update (even to css files) live reload kicks in and does not give a chance to hot module replacement or react refresh. It just reloads the whole application every time, resulting in reduced DX.

And our setup worked just fine before upgrading to the recently released beta versions.

[yourfavorite]

I see this issue is marked as Needs Info, but I'm not sure what other info is needed? Please let me know if there's anything else I can provide. Thanks!

[yourfavorite]

Thanks @malept!