Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

React-Hot-Loader: react-馃敟-dom patch is not detected. React 16.6+ features may not work. #11934

Closed
kripod opened this issue Feb 20, 2019 · 55 comments
Assignees
Labels
type: maintenance

Comments

@kripod
Copy link
Contributor

@kripod kripod commented Feb 20, 2019

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
Copy link
Contributor

@t2ca t2ca commented Feb 20, 2019

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

@wardpeet
Copy link
Member

@wardpeet wardpeet commented Feb 20, 2019

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

@wardpeet wardpeet added help wanted type: maintenance labels Feb 20, 2019
@achmadk
Copy link

@achmadk achmadk commented Feb 25, 2019

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

@wardpeet
Copy link
Member

@wardpeet wardpeet commented Feb 25, 2019

that works as well! 馃挭

@JustFly1984
Copy link

@JustFly1984 JustFly1984 commented Mar 1, 2019

@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
Copy link

@achmadk achmadk commented Mar 1, 2019

@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
Copy link

@asilgag asilgag commented Mar 2, 2019

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
Copy link

@Jessidhia Jessidhia commented Mar 3, 2019

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
Copy link

@misterbridge misterbridge commented Mar 5, 2019

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

@gatsbot
Copy link

@gatsbot gatsbot bot commented Mar 26, 2019

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鈥檚 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! 馃挭馃挏

@gatsbot gatsbot bot added the stale? label Mar 26, 2019
@diegohaz diegohaz added not stale and removed stale? labels Mar 26, 2019
@JustFly1984
Copy link

@JustFly1984 JustFly1984 commented Mar 26, 2019

not stale!

@wardpeet wardpeet added this to To do in OSS Roadmap via automation Mar 27, 2019
@wardpeet
Copy link
Member

@wardpeet wardpeet commented Mar 27, 2019

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.

@DSchau DSchau moved this from To do to Backlog in OSS Roadmap Mar 28, 2019
@joefiorini
Copy link
Contributor

@joefiorini joefiorini commented Apr 12, 2019

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
Copy link
Member

@wardpeet wardpeet commented Apr 15, 2019

Let me get this fixed asap

@wardpeet
Copy link
Member

@wardpeet wardpeet commented Apr 30, 2019

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

@MatthewCushing
Copy link

@MatthewCushing MatthewCushing commented Feb 28, 2020

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
Copy link
Contributor

@t2ca t2ca commented Feb 28, 2020

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

@beelee
Copy link

@beelee beelee commented Mar 7, 2020

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
Copy link

@zaktwist zaktwist commented Mar 11, 2020

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/react-dom@16.12.0
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
Copy link
Contributor

@apolopena apolopena commented Mar 27, 2020

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
Copy link

@barthicus barthicus commented Mar 27, 2020

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
Copy link

@devuxer devuxer commented May 11, 2020

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
Copy link

@azware azware commented May 20, 2020

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

thanks its work

@Cry0nicS
Copy link

@Cry0nicS Cry0nicS commented May 26, 2020

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

@Tony221268
Copy link

@Tony221268 Tony221268 commented May 28, 2020

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
Copy link
Contributor

@birksy89 birksy89 commented Jun 20, 2020

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
Copy link
Member

@wardpeet wardpeet commented Jun 20, 2020

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
Copy link

@harshalimatte harshalimatte commented Jun 25, 2020

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
Copy link
Member

@wardpeet wardpeet commented Sep 16, 2020

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

@birksy89
Copy link
Contributor

@birksy89 birksy89 commented Sep 18, 2020

@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 馃帀

@wardpeet wardpeet removed the help wanted label Oct 1, 2020
@ccalvarez
Copy link

@ccalvarez ccalvarez commented Oct 5, 2020

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
Copy link

@Xairoo Xairoo commented Nov 27, 2020

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/react-dom@16.14.0

@devuxer
Copy link

@devuxer devuxer commented Jan 23, 2021

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

@EdPike365
Copy link

@EdPike365 EdPike365 commented Feb 16, 2021

@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
Copy link
Contributor

@LekoArts LekoArts commented Mar 3, 2021

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: maintenance
Projects
No open projects
OSS Roadmap
  
To prioritize
Development

Successfully merging a pull request may close this issue.