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

[kripod]

Description

After updating all the dependencies of my starter project, I noticed the following message in the browser console after running gatsby develop:

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

Steps to reproduce

1. Clone gatsby-starter-strict@6c06471
2. yarn && yarn develop

Expected result

No warnings should be thrown.

Actual result

A warning is thrown even with a starter project.

Environment

  System:
    OS: Windows 10
    CPU: (4) x64 Intel(R) Core(TM) i5-2500 CPU @ 3.30GHz
  Binaries:
    Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.4.1 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    gatsby: ^2.1.10 => 2.1.10
    gatsby-plugin-manifest: ^2.0.18 => 2.0.18
    gatsby-plugin-offline: ^2.0.24 => 2.0.24
    gatsby-plugin-react-helmet: ^3.0.6 => 3.0.6
    gatsby-plugin-styled-components: ^3.0.6 => 3.0.6
    gatsby-plugin-typescript: ^2.0.8 => 2.0.8

[t2ca]

I can confirm I have also seen this warning. I was also able to reproduce this warning with gatsby-starter-default.

[wardpeet]

We are probably missing https://github.com/gaearon/react-hot-loader/tree/7089062eac273832102c074a368d5af27e23e0b0#webpack-plugin

It's not a big deal atm because react fire 🔥 is not official yet.

Webpack.config is here:
https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/src/utils/webpack.config.js

[achmadk]

@wardpeet I replace react-dom with @hot-loader/react-dom to remove this warning.

[wardpeet]

that works as well! 💪

[JustFly1984]

@achmadk @wardpeet where did you replaced react-dom with
@hot-loader/react-dom ?
I do not see that in my codebase, it should be somewhere inside the gatsby code

[achmadk]

@JustFly1984 for example, I use codebase from @kripod . In package.json file, It has react-dom inside dependencies. And then replace react-dom with @hot-loader/react-dom.

[asilgag]

I reproduce this warning with gatsby-starter-default.

So, what should we do?

Wait for "react fire" to be released? Or replace react-dom with @hot-loader/react-dom?

[Jessidhia]

That is completely unrelated to "react fire" and the emoji is confusing.

A workaround that can be done locally is to install @hot-loader/react-dom as a devDependency and add this hook to gatsby-node.js:

exports.onCreateWebpackConfig = ({ getConfig, stage }) => {
  const config = getConfig()
  if (stage.startsWith('develop') && config.resolve) {
    config.resolve.alias = {
      ...config.resolve.alias,
      'react-dom': '@hot-loader/react-dom'
    }
  }
}

[misterbridge]

The workaround removes the warning but ..
There is no hot reloading for now ? (Saving a file will refresh the page on my app)

[gatsbot]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

Thanks for being a part of the Gatsby community! 💪💜

[JustFly1984]

not stale!

[wardpeet]

I've added it to our roadmap because it might throw new people of which might give them the impression they have done anything wrong.

[joefiorini]

Just to be clear, what should we expect from applying the workaround? Will that remove hot reloading like @misterbridge noticed? Has anyone found a workaround that keeps hot reloading working?

[wardpeet]

Let me get this fixed asap

[wardpeet]

I created a new PR #13713 would be fun if this could get tested on a few repos.

[MatthewCushing]

Also getting this on my WIndows box at work. Will check it out on my personal Macbook box later to see if I get different results.

[t2ca]

Im starting to see this again since updating react to the latest version.

[beelee]

running: yarn add react-dom@npm:@hot-loader/react-dom solved the issue for me.
From: react-dom - hot-loader edition Rewire - (Yarn) Any other system

[zaktwist]

running: yarn add react-dom@npm:@hot-loader/react-dom solved the issue for me.
From: react-dom - hot-loader edition Rewire - (Yarn) Any other system

or npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
es.: npm add @hot-loader/[email protected]
and add to gatsby-node.js:
exports.onCreateWebpackConfig = ({ getConfig, stage }) => { const config = getConfig() if (stage.startsWith('develop') && config.resolve) { config.resolve.alias = { ...config.resolve.alias, 'react-dom': '@hot-loader/react-dom' } } }
run gatsby develop
solved the issue for me.

[apolopena]

Still a relavant fix I need to make on all my gatsby sites to ensure a smoother development process. Otherwise hot reloading does indeed intermittently fail on the localhost develompment environment.

[barthicus]

I'am using yarn add react-dom@npm:@hot-loader/react-dom but in yarn workspaces project with lerna there are nasty issues that I couldn't fix. Tried nohoist but it's not working as I thought initially.

Like has anyone solved it? I think this method (aliasing packages) can couse this problem but i'm not 100% sure.

[devuxer]

Is installing `@hot-loader/react-dom" and adding the webpack config to gatsby-node.js a workaround or a permanent solution? If it's permanent, shouldn't this be built into Gatsby? If it's a workaround, what will be the trigger for us to remove it?

I'd also like to add that I ran into certain pages simply wouldn't render after updating from Ant Design 4.1.5 to v4.2.0. They refactored the List.Item component to use hooks, and I was getting a React error about a functional component trying to return a class component. Applying the patch totally solved this problem. Moral of the story: the "react-🔥-dom patch is not detected" warning really can cause problems!

[azware]

@wardpeet I replace react-dom with @hot-loader/react-dom to remove this warning.

thanks its work

[Cry0nicS]

Any news?
Should we go ahead and manually fix it in our projects, as @wardpeet suggested?

[Tony221268]

I have to say that this is symptomatic of so much web development these days. A random error caused by a random change with no obvious solution that doesn't involve kicking off some hit and hope fixes that you try just in case they work and not really understanding why they do or don't. Yes, I should get more involved in the repos but hey, I can't even get Gatsby to run without a bunch of random warnings so I would be useless. My 2 cents.

[birksy89]

I come here every time I start a project with:
https://github.com/gatsbyjs/gatsby-starter-default

So I'm writing this note for myself, and anyone else who scrolls this far 👋 (Hey future me)

Step 1

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

npm install -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",
        },
      },
    })
  }
}

Use the above code over others mentioned here because:
#11934 (comment)

"It's better to use actions.setWebpackConfig because it automatically merges with the default config"

[wardpeet]

you can also use GATSBY_HOT_LOADER=fast-refresh. We're happy to accept a PR to make @hot-loader the default for develop

[harshalimatte]

you need to add the matched version for react-hot-dom in your package file

"@hot-loader/react-dom": "^16.8.6",

and in your webpack config, you need to add

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

[wardpeet]

Would this help discover what you need to do #26927 ?

[birksy89]

@wardpeet - I've just had a run through this, and yeah, very clear. Thank you.

Not sure about others, but I discovered it via the console warning... Rather than encountering any failure of functionality.

Adding the steps to resolve the issue within the console by specifying the required version to install is perfection 🎉

[ccalvarez]

I tried the suggested solution:

• installed "@hot-loader/react-dom": "^16.8.6"
• added this section in gatsby-config.js:

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

but it's not working for me.

Any suggestion?

λ gatsby info

System:
OS: Windows 10 10.0.16299
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Binaries:
Node: 14.6.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
Languages:
Python: 3.8.1 - /c/Users/ccordero/AppData/Local/Programs/Python/Python38/python
Browsers:
Edge: Spartan (41.16299.1004.0)
npmPackages:
gatsby: ^2.18.18 => 2.24.33
gatsby-plugin-manifest: ^2.4.22 => 2.4.22
gatsby-plugin-offline: ^3.2.22 => 3.2.22
gatsby-source-graphql: ^2.7.0 => 2.7.0
gatsby-theme-codebushi: 1.0.0 => 1.0.0

UPDATE:
I rolled back the previous steps, and this solution finally removed the warning:

running: yarn add react-dom@npm:@hot-loader/react-dom solved the issue for me.
From: react-dom - hot-loader edition Rewire - (Yarn) Any other system

[xairoo]

Step 1

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

npm install -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",
        },
      },
    })
  }
}

Use the above code over others mentioned here because:
#11934 (comment)

"It's better to use actions.setWebpackConfig because it automatically merges with the default config"

Install failed for me, I have to add my current react version.

Post from @zaktwist worked (#11934 (comment))
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
For example npm add @hot-loader/[email protected]

[devuxer]

It's now January 2021...is this still necessary?

[EdPike365]

@devuxer
I just used the gatsby-starter-hello-world and had the symptom.
I used the first version of the gatsby-node.js fix from @Jessidhia , and that fixed it
I did NOT have to install or update anything else.
I have not tried the newer version referenced by @xairoo .

[LekoArts]

We've shipped Gatsby v3 that uses Fast Refresh only: https://www.gatsbyjs.com/docs/reference/release-notes/v3.0#fast-refresh
As we removed react-hot-loader completely you won't see this warning in v3. If you can't upgrade to v3 yet, please see #11934 (comment) for a solution for v2. Thanks!