React-Hot-Loader: AppContainer should be patched

[torava]

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

'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"

[theKashey]

React-Hot-Loader: AppContainer should be patched means that by a some reason hot or react-dom integration were installed incorrectly. Like there is no method, which is expected to be injected. "How" it would be injected depends on the integration details, and in case of @hot-loader/react-dom is expected to be injected "inside" React render phase.

I could not say why, but try to add import "react-hot-loader/patch" as a first import, I mean absolutely first one.

If that would not help - try to disable react-dom "integration", so AppContainer would be "prepatched".

import {setConfig} from 'react-hot-loader';
setConfig({integratedResolver: false});

If that would not help (and just in case you could do it) - I will ask to provide an example to reproduce the problem. It shall not ever occur.

[zoexiong]

I resolved this issue by reinstalling React and update to the newest version. not sure if that's helpful for you though...

[theKashey]

That means - you had duplicates. And in that case, there is nothing we were able to do.

[fireairforce]

I meet the same quesion of my application, and my pkg.json are as follows:

"dependencies": {
    "core-js": "^3.0.1",
    "normalize.css": "^8.0.0",
    "object-assign": "^4.1.1",
    "promise": "^8.1.0",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@hot-loader/react-dom": "^17.0.1",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-router-dom": "^5.1.5",
    "react-hot-loader": "^4.13.0"
  },

By the way, I use pnpm as package manager to control my project, @theKashey

[vidushi-agarwal]

Change your version of 'react-hot-loader' to 3.1.1. This will help

[theKashey]

@vidushi-agarwal this is very incorrect advice. Version 3 never came out of beta and is not expected to work with anything by vanilla React 15. It's dead.

---

@fireairforce - it does not matter which package version or which package manager you use. It's all about runtime functionality. For example about the way you integrate @hot-loader/react-dom

[BritoMatheus]

@torava

Install @hot-loader/react-dom works for me!

https://www.npmjs.com/package/react-hot-loader#hot-loaderreact-dom

yarn add react-dom@npm:@hot-loader/react-dom

and add

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },
};