React-Hot-Loader: AppContainer should be patched

Author: toravaCreated Aug 15, 2019Updated Jul 14, 2022

I'm using react-hot-loader 4.12.11, react 16.9.0, react-dom 16.9.0, react-router-dom 5.0.1, redux 4.0.4, react-redux 7.1.0 and node 10.12.0 together and it fails miserably thanks to this cryptic error "React-Hot-Loader: AppContainer should be patched". What gives? Is this some compatibility issue?

My app-client.js

'use strict';

import React from 'react';
import {render} from 'react-dom';
import {createStore} from 'redux';
import rootReducer from './redux/reducers';
import App from './components/App';

const store = createStore(rootReducer);

render(<App store={store}/>, document.getElementById('app'));

App.js

bash
'use strict';

import React from 'react';
import {hot} from 'react-hot-loader/root';
import PropTypes from 'prop-types';
import {BrowserRouter, Route} from 'react-router-dom';
import OverviewPage from './OverviewPage';
import {Provider} from 'react-redux';

const App = ({store}) => (<Provider store={store}>
  <BrowserRouter>
      <Route exact path="/" component={OverviewPage}/>
  </BrowserRouter>
</Provider>);

App.propTypes = {
  store: PropTypes.object.isRequired
}

export default hot(App);

In package.json

"@hot-loader/react-dom": "^16.9.0",
"react": "^16.9.0",
"react-hot-loader": "^4.12.11",
"react-redux": "^7.1.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"redux": "^4.0.4"

Source: gaearon/react-hot-loader