React-hot-loader: Hot reload works only at layout [Warning: You cannot change <Router history>]

[shapkarin]

I get an error when I try to change other file except layout. When I change Layout file everything is OK, nut if I try to change other page './Pages/Shows' I get an error Warning: You cannot change <Router history>

Layout:

import { Router, Switch, Route, Redirect } from 'react-router-dom';
import { hot } from 'react-hot-loader';
import Shows from './Pages/Shows';

const Layout = function ({ startPage, phone }) {
    return (
      <Provider store={store}>
        <Router history={createHistory()}>
          <div>
            <Header phone={phone}/>
            <Switch>
                <Route
                  exact
                  path="/shows"
                  component={Shows}
                />
....

const App = hot(module)(Widget);

render(
  <App { ...config } />,
  document.getElementById('root')
);

Also I added plugin to webpack.config

{
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: [
        'react-hot-loader/webpack',
...

[theKashey]

You got it wrong. And probably you are updating redux store every time.
Move <div><Header...</div> to another file and component, and make it hot.
Only your __application__ should be updated, not the code to setup and render it.

[shapkarin]

oh... I see.. so in my way I trying to make routes hot also. I'll try that, thanks

[theKashey]

You may make routes also hot, just move them to another file.
During hot update some files should not be updated and you have to keep “root” unchanged to keep the application state.

[shapkarin]

@theKashey can't understand what's wrong, I move to other file and now I see logs that all update but at browser I don't see any changes...

[theKashey]

It depends. Sometimes some complex HOCs(Redux v6, for example) are not hot-reloadable.
If you have an example - I could try to find the problem.

[shapkarin]

I use "react-redux": "^6.0.0"
But how to figure out ?

[shapkarin]

hmm. 5.1.1 works fine. oh... 😞

[theKashey]

The fix is already in react-redux master branch, will be available soon.

[kristian2x]

@theKashey Would you mind sharing the commit or issue in react-redux?

[theKashey]

Not a year later, it's completely different codebase nowadays.

[kristian2x]

@theKashey oh dang I'm still in the year 2019 I guess..

[isumix]

Thanks to @theKashey for a hint.
I had HMR hot reload with webpack

import { hot } from 'react-hot-loader/root';
import React from 'react';
import { Admin } from 'react-admin';
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
const App = () => (
    <Admin history={history}>
    </Admin>
);
export default hot(App);

This gave me You cannot change <Router history> every time I save.
To fix this issue I had to move this

import { createBrowserHistory } from 'history';
export const history = createBrowserHistory();

to different file.