Gatsby: 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 :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[bot]]

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 https://github.com/gatsbyjs/gatsby/pull/13713 would be fun if this could get tested on a few repos.

[m-allanson]

Looks like this was fixed in #13713

[antoinerousseau]

Do we still need that exports.onCreateWebpackConfig patch to remove the warning in the last gatsby versions? Or can we just ignore the warning?

Using React 16.9.0

[vasilenka]

Seems like it's coming back again

[rileyjshaw]

I'm also seeing this on new starter projects.

[TheAadithyan]

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

[skipjack]

As it doesn't really break anything, it's typically safe to hide the warning as noted in this stack overflow question I answered:

https://stackoverflow.com/questions/54770535/react-hot-loader-react-dom-patch-is-not-detected/54816859#54816859

I'd be up for submitting a PR if someone can confirm the following lines are the right place to make the change:

https://github.com/gatsbyjs/gatsby/blob/561d33e2e491d3971cb2a404eec9705a5a493602/packages/gatsby/src/bootstrap/requires-writer.js#L50-L63

I'm somewhat new to Gatsby but I think this would be a fairly straightforward change that doesn't require users to migrate away from the core react-dom package.

[GooBall]

The fix by @TheAadithyan works. Kinda annoying though...

[antoinerousseau]

Following Gatsby API, better use actions.setWebpackConfig, e.g.

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

It automatically merges with the default config.

[eriktoyra]

@antoinerousseau and @ooloth: That patch as an unfortunate side effect as it causes projects failing to compile when a package using react-modal has been installed from local file system with file:[path to project]. What's really weird is that the very same code works fine when installing it from our Azure DevOps artifact.

The problem does not occur when removing the patch. I have tested this with two different projects having react-modal as dependency and both fail with the same error. react-modal has a dependency to react-dom but it's unable to resolve it when the above patch is applied.

Example repo

For an example repo, see https://github.com/collector-bank/collector-portal-framework.

How to reproduce

1. Install a local package with a dependecy to react-modal using file:...
2. Run npm run start.
3. Watch compile failing with a similar error as shown below:

» npm run start                                                                                                                    [removed for privacy reasons]@Eriks-MBP

> [email protected] start /Users/[removed for privacy reasons]/Projects/[removed for privacy reasons]/FooProject
> npm run develop


> [email protected] develop /Users/[removed for privacy reasons]/Projects/[removed for privacy reasons]/FooProject
> gatsby develop

success open and validate gatsby-configs - 0.029 s
success load plugins - 0.247 s
success onPreInit - 0.015 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success initialize cache - 0.031 s
success copy gatsby files - 0.049 s
success onPreBootstrap - 0.020 s
success source and transform nodes - 0.098 s
success Add explicit types - 0.018 s
success Add inferred types - 0.099 s
success Processing types - 0.075 s
success building schema - 0.250 s
success createPages - 0.014 s
success createPagesStatefully - 0.055 s
success onPreExtractQueries - 0.016 s
success update schema - 0.032 s
success extract queries from components - 0.231 s
success write out requires - 0.027 s
success write out redirect data - 0.013 s
success Build manifest and related icons - 0.104 s
success onPostBootstrap - 0.127 s
⠀
info bootstrap finished - 3.117 s
⠀
success run static queries - 0.058 s — 3/3 67.58 queries/second
success run page queries - 0.028 s — 5/5 365.36 queries/second
success start webpack server - 1.300 s — 1/1 7.17 pages/second
 ERROR  Failed to compile with 2 errors                                                                                                          09:36:39
⠀
This dependency was not found:
⠀
* react-dom in /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components/Modal.js, /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist/react-onclickoutside.es.js
⠀
To install it, you can run: npm install --save react-dom

 ERROR 

✖ ｢wdm｣:
ERROR in /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components/Modal.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components'
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/components/Modal.js 16:16-36
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-modal/lib/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/components/Modal/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/components/index.js
 @ ./src/components/layout.tsx
 @ ./src/pages/page-2.tsx
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist/react-onclickoutside.es.js
Module not found: Error: Can't resolve 'react-dom' in '/Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist'
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-onclickoutside/dist/react-onclickoutside.es.js 2:0-40 199:15-26
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/node_modules/react-datepicker/dist/react-datepicker.min.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/common/components/DatePicker/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/common/components/index.js
 @ /Users/[removed for privacy reasons]/Projects/Private/collector-portal-framework-upstream/dist/components/index.js
 @ ./src/components/layout.tsx
 @ ./src/pages/page-2.tsx
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js (webpack)-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

info ℹ ｢wdm｣: Failed to compile.

[prevolorio]

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

I had to recompile after but it worked!

[antoinerousseau]

@prevolorio did you read this thread?...

[TriStarGod]

Following Gatsby API, better use actions.setWebpackConfig, e.g.

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

It automatically merges with the default config.

Newb here. Where do I put this code? gatsby-node.js?

[jonniebigodes]

@TriStarGod yes, that's where the api hook "lives". That snippet of code should be inserted into gatsby-node.js

[antoinerousseau]

@TriStarGod It says right on the page I linked...

Usage: Implement any of these APIs by exporting them from a file named gatsby-node.js in the root of your project.

[kimbaudi]

I've also been getting this warning on Windows 10, but not on Ubuntu Linux or macOS. I'm wondering if this warning is specific to windows users.

[ChanclaYCod]

@kimbaudi I have this error in a windows system too, do you know if it will be ok in a production environment in linux??

[MatthewJRoybal]

I tried this solution for the Gatsby starter package and it did not work. Has anything changed recently?

[Thebohemiangeek]

This suddenly started appearing on a project i was working on, why is this happening. did i break something can i just ignore the warning?

[miller-productions]

+1

Seeing this issue also , on a windows 10 machine via Chrome (if that is relevant)

[ovsw]

+1 same here. And the workaround with @hot-loader/react-dom doesn't work (tried both versions) - dev fails with Error: Cannot find module 'react-dom/server'

[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:
https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-538662592

"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 https://github.com/gatsbyjs/gatsby/pull/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 Filesnodejsnode.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\binyarn.CMD
npm: 6.14.6 - C:\Program Filesnodejs\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 (https://github.com/gatsbyjs/gatsby/issues/11934#issuecomment-597560317)
npm add @hot-loader/react-dom@[YOUR_REACT_VERSION]
For example npm add @hot-loader/[email protected]