React-hot-loader: react-🔥-dom patch is not detected

Question

I updated some npm packages in my Gatsby project and now I'm seeing this warning in console:

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

However, when I look into the source code, there is a comment:

// Actually everything works...

What does this warning actually mean? Is this something I should fix or just let it be?

Heterophyte

I noticed the same – Financial

it might be related to github.com/gaearon/react-hot-loader/issues/1088 – Gravitt

Seeing this issue as well. It kinda seems like it's looking for this package: github.com/hot-loader/react-dom – Subgroup

Answer 1

Per my comment above, it's looking like react-hot-loader wants the @hot-loader/react-dom package instead of standard react-dom:

• https://github.com/gaearon/react-hot-loader#react--dom
• https://github.com/hot-loader/react-dom

Personally I'm a little concerned with swapping that out though since react-dom is a core part of any react-based application. Also it seems based on some of the linked issues and code comments that maybe this is just a short-term workaround to support new react features like hooks.

So I guess there's two options:

• Wait a little longer to see if they drop that requirement (and maybe run into a few edge cases for hot loading).
• Follow the instructions to get rid of the warning.

Update

You can disable the warning like so:

import { hot, setConfig } from 'react-hot-loader'

setConfig({
    showReactDomPatchNotification: false
})

Subgroup

@gaearon is a developer of React, so there's no reason to be remotely concerned about swapping out react-dom for the alternative See: github.com/gaearon – Felodese

First, my comment was less that it should be a security concern and more that I don't want a use a fork of a core package (e.g. they might forget to keep it up to date). Second, while that package is still under his namespace, @gaearon is not the current maintainer. See the latest contributor graphs. – Subgroup

A valid point that he's not the one committing most of the recent code, but @gaearon wouldn't host it under his name unless he had faith in doing that. The idea that they might forget to update a package with 11k stars, hosted where it is a bit absurd to me. Lastly, he's very involved in the comments, even if not in the commits. – Felodese

Fair points, though I wouldn't necessarily conflate stars with update frequency. Also the fork itself only has ~70 stars which might suggest not many are using it. Anyway, I think your comments give a fair argument for the other approach. Are you suggesting I edit the answer? I did say "personally" and I kinda still feel that way despite your critique (fair as it is). – Subgroup

@SkipJack is there anyway to do this if you're using `import {hot} from 'react-hot-loader/root'? The docs recommend using the newer root import since it is much more resilient to JS errors. github.com/cdharris/react-app-rewire-hot-loader – Confect

@Confect yeah, it looks like you can just separate the import statements into import { setConfig } from 'react-hot-loader' and import { hot } from 'react-hot-loader/root'. – Subgroup

Answer 2

You need to add @hot-loader/react-dom to your project based on your ReactJS version, pay attention below command:

yarn add @hot-loader/react-dom@[YOUR_REACT_VERSION]

Then it is needed to add resolve alias for it on your Webpack configuration file:

resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
}

For more information read its docs.

Mosley

Answer 3

Update 2020

As of summer 2020, this is the current solution recommended on Gatsby's GitHub repository:

Step 1

Run this command - But running this alone won't fix the issue:

npm install -D @hot-loader/react-dom
// or
yarn add -D @hot-loader/react-dom

Step 2

Modify gatsby-node.js to add the following:

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage.startsWith("develop")) {
    actions.setWebpackConfig({
      resolve: {
        alias: {
          "react-dom": "@hot-loader/react-dom",
        },
      },
    })
  }
}

Restart gatsby develop. The warning is gone.

Martymartyn

Answer 4

So this appears to be an artifact of the development process. Looks like there was some back-and-forth on what to do in this case. The error message was commented out, and then later added back as a fix for an issue: https://github.com/gaearon/react-hot-loader/commit/efc3d6b5a58df77f6e0d5ca21bef54e8f8732070.

So, it looks like it's a minor warning, and you may be just fine unless you need specific features.

It might be a good idea to ask for clarity on this from the maintainers, since they seem slightly confused themselves :)

Joggle

Answer 5

In short - React-Hot-Loader is something that "might not work". It has a lot of problems and limitations.

"hot-patch" was created to (first) support new React features, and (second) make it more stable.

• Without this patch - something really might not work.
• With the patch - something might work better, especially in the future.

It's the only our(ok, mine) hope to mitigate the major problems RHL has, and tracked as "version 5" - https://github.com/gaearon/react-hot-loader/milestone/3

hot-loader/react-dom is not a "third party" lib - it's the same react-dom with some patches applied to dev mode only (you might check build scripts).

It just moves some dark magic, RHL uses to work, inside react, and actually removes it. RHL == black magic. RHL + patch == twice less magic.

Beguin

Answer 6

Update late 2020

in step 1, you should run it as follow:

npm i @hot-loader/react-dom@YOUR_REACT_VERSION

because gatsby uses react version ^16.12.0, and running the command above without specifying react version with install ^17.0.1 which is not compatible with the ^16.x version.

Accurate