React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.

[Ivan Stelmakh]

I get the warning in browser console React-Hot-Loader: react-🔥-dom patch is not detected. React 16.6+ features may not work.

My package.json

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "devDependencies": {
    "react-app-rewire-hot-loader": "^2.0.1",
    "react-app-rewired": "^2.1.1",
    "react-hot-loader": "^4.8.4"
  }

config-overrides (in root folder)

const rewireReactHotLoader = require('react-app-rewire-hot-loader');

/* config-overrides.js */
module.exports = function override(config, env) {
  config = rewireReactHotLoader(config, env);
  return config;
};

App.js

import React from 'react';
import './App.css';
import { hot } from 'react-hot-loader/root';

const App = () => <div className="container mt-4">app</div>;

export default (process.env.NODE_ENV === 'development' ? hot(App) : App);

[Ivan Stelmakh]

gaearon/react-hot-loader#1227

[Jari Pennanen]

Edit, so I figured it out:

1. yarn add @hot-loader/react-dom -D
2. config-overrides.js

const rewireReactHotLoader = require("react-app-rewire-hot-loader");

/* config-overrides.js */
module.exports = function override(config, env) {
    if (env == "development") {
        config.resolve.alias["react-dom"] = "@hot-loader/react-dom";
    }
    config = rewireReactHotLoader(config, env);
    return config;
};

Maybe the parent example by @cdharris could be updated?

[Ethan Setnik]

Can we add the alias injection to react-app-rewire-hot-loader please?