React Hot Loader v4 workflow doesn't work

[s-h-a-d-o-w]

Using electron-webpack 1.13.0

See: https://github.com/gaearon/react-hot-loader#migrating-from-v3

When trying to use that workflow, I get:

[HMR] Cannot apply update. Need to do a full reload!
[HMR] Error: Aborted because ./src/renderer/Branch2.js is not accepted
Update propagation: ./src/renderer/Branch2.js -> ./src/renderer/App.js -> ./src/renderer/index.js -> 0
    at hotApply (http://localhost:9080/renderer.js:442:30)

Even though I obviously have this in App.js:

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

// ...

export default hot(module)(App);

It should probably be noted that v4 appears to be backwards-compatible, the v3 workflow (which is discussed here: https://github.com/electron-userland/electron-webpack/issues/59 ) still works. (navono is right - state isn't preserved, so RHL actually doesn't work, even with v3 workflow: https://github.com/electron-userland/electron-webpack/issues/59#issuecomment-359372935 )

[jhchill666]

Have been pondering over this issue, and have now submitted a PR.

I have isolated the issue down, as demonstrated in this repo: https://github.com/jamiehill/rhl-webpack-bug

And you can find progress of the PR here: https://github.com/gaearon/react-hot-loader/pull/1046

[s-h-a-d-o-w]

Thanks but ever since I realized that the workflow with electron using webpack is actually the same as in a regular web app (see https://github.com/s-h-a-d-o-w/rhl-electron-quick-start ), I don't have a need for electron-webpack any more.

I guess I should not close this issue though because others who still use electron-webpack might experience this problem too...

[jhchill666]

The issue has nothing to do with Electron-Webpack. Is appears to be a react-hot-loader bug

[s-h-a-d-o-w]

But then I should've faced the same issue with the workflow that I linked to above?

[alexmbp]

Have somebody achieved fully working workflow? I was not able to make my react app hmr. I've tried to add custom webpack configuration, but failed. App was reloading on changes, not replacing the module.

[loopmode]

I just started with a fresh electron-webpack-quickstart project and didn't do anything special, just following docs and readmes, and it "just worked".

This is the branch: https://github.com/loopmode/electron-webpack-quick-start/commits/react I didn't do much - it's just the commits on April, 11 2019 up to this one

Note however that I wasn't migrating anything, it was a fresh project and the export default hot(App) just worked. Also, It was with electron-webpack@2.6.2 and react-hot-loader@4.8.3.

[loopmode]

I was still getting a React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work. warning.

The solution was to enable the webpack plugin, as explained in the readme. I added the webpack config to the electron-webpack project with this commit.

EDIT:

In order to have a working production app, you need to

1) whitelist the react-hot-loader module in the electron-webpack configuration, see this commit 2) disable the react-hot-loader babel plugin in production, see this commit

I have now proper HMR in development and a working production build without HMR.