React-hot-loader: Redux Provider error showing up after 4.x update

[reintroducing]

If you are reporting a bug or having an issue setting up React Hot Loader, please fill in below. For feature requests, feel free to remove this template entirely.

Description

I updated my codebase for webpack 4 and subsequently react-hot-loader 4.0.1. In applying the hot loader the way that is described in the README for v4, I am simply passing hot: true to webpack-serve, using the hot HOC on my app, and and have react-hot-loader/babel in my plugins for babel. Hot loading is actually working fine, however, I am now seeing the Provider error once again in my console.

<Provider> does not support changing `store` on the fly. It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically. See https://github.com/reactjs/react-redux/releases/tag/v2.0.0 for the migration instructions.

I used to have this code in my store but removed it in the 4 upgrade. I figured that was the issue, but in putting it back it does not have seemed to solve the problem. Have I missed something in the setup for RHL and Redux driven projects?

Expected behavior

No Provider errors show up in console.

Actual behavior

The above Provider error shows up in console after I change a bit of code (only after initial load, subsequent code changes don't produce the error).

Environment

React Hot Loader version: 4.0.1

Run these commands in the project folder and fill in their results:

1. node -v: v8.10.0
2. npm -v: 5.6.0

Then, specify:

1. Operating system: macOS Sierra 10.12.6
2. Browser and version: Chrome Version 65.0.3325.181 (Official Build) (64-bit)

[reintroducing]

I actually reverted back to using the syntax pre-v4 update of not using the hot HOC rather the if (module.hot) { checks in my main file as well as in the store and that fixed the issue. That being said, I'd prefer using the suggested hot HOC if I can find a way around the store issue above.

Is that possible with the HOC?

[theKashey]

You have to create store only once, and it should __not__ be hot-reloadable. This is what Provider is asking about - please dont recreate the store.

// index.js
....
const store = createStore(); // <-- create it once!
render(<Provider store={store}><App/></Provider>)
....

// app.js
....
export hot(module)(App);

[reintroducing]

@theKashey you are absolutely correct, this project has a rather complex setup in separating mobile and desktop bundles with different entries while still trying to share as many components as possible. I abstracted out the components further and put the hot HOC lower in the "stack" and it works as expected without the need for the if (module.hot) { syntax. Thank you very much for pointing that out, much appreciated.

[theKashey]

At your beck and call.