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

Open
kripod opened this issue Feb 20, 2019 · 41 comments

Comments

@kripod
Copy link
Member

@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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Member

@wardpeet wardpeet commented Feb 20, 2019

@achmadk

This comment has been minimized.

Copy link

@achmadk achmadk commented Feb 25, 2019

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

@wardpeet

This comment has been minimized.

Copy link
Member

@wardpeet wardpeet commented Feb 25, 2019

that works as well! 馃挭

@JustFly1984

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link
Member

@wardpeet wardpeet commented Apr 15, 2019

Let me get this fixed asap

@wardpeet

This comment has been minimized.

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.

@antoinerousseau

This comment has been minimized.

Copy link
Member

@antoinerousseau antoinerousseau commented Aug 11, 2019

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

This comment has been minimized.

Copy link

@vasilenka vasilenka commented Aug 11, 2019

Seems like it's coming back again

@rileyjshaw

This comment has been minimized.

Copy link
Contributor

@rileyjshaw rileyjshaw commented Aug 13, 2019

I'm also seeing this on new starter projects.

@rileyjshaw rileyjshaw reopened this Aug 13, 2019
OSS Roadmap automation moved this from Done to In progress Aug 13, 2019
@TheAadithyan

This comment has been minimized.

Copy link

@TheAadithyan TheAadithyan commented Aug 15, 2019

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

This comment has been minimized.

Copy link

@skipjack skipjack commented Aug 22, 2019

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:

let syncRequires = `const { hot } = require("react-hot-loader/root")
// prefer default export if available
const preferDefault = m => m && m.default || m
\n\n`
syncRequires += `exports.components = {\n${components
.map(
c =>
` "${c.componentChunkName}": hot(preferDefault(require("${joinPath(
c.component
)}")))`
)
.join(`,\n`)}
}\n\n`

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.

@m-allanson m-allanson moved this from In progress to To prioritize in OSS Roadmap Aug 27, 2019
@GooBall

This comment has been minimized.

Copy link

@GooBall GooBall commented Oct 1, 2019

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

@antoinerousseau

This comment has been minimized.

Copy link
Member

@antoinerousseau antoinerousseau commented Oct 5, 2019

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

This comment has been minimized.

Copy link

@eriktoyra eriktoyra commented Oct 8, 2019

@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

> gatsby-starter-default@0.1.0 start /Users/[removed for privacy reasons]/Projects/[removed for privacy reasons]/FooProject
> npm run develop


> gatsby-starter-default@0.1.0 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 

鉁 锝dm锝:
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 鈩 锝dm锝: Failed to compile.
@prevolorio

This comment has been minimized.

Copy link

@prevolorio prevolorio commented Oct 12, 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'
    }
  }
}

I had to recompile after but it worked!

@antoinerousseau

This comment has been minimized.

Copy link
Member

@antoinerousseau antoinerousseau commented Oct 12, 2019

@prevolorio did you read this thread?...

@TriStarGod

This comment has been minimized.

Copy link

@TriStarGod TriStarGod commented Oct 29, 2019

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

This comment has been minimized.

Copy link
Contributor

@jonniebigodes jonniebigodes commented Oct 29, 2019

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

@antoinerousseau

This comment has been minimized.

Copy link
Member

@antoinerousseau antoinerousseau commented Oct 29, 2019

@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

This comment has been minimized.

Copy link
Contributor

@kimbaudi kimbaudi commented Dec 5, 2019

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

This comment has been minimized.

Copy link

@ChanclaYCod ChanclaYCod commented Dec 22, 2019

@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

This comment has been minimized.

Copy link

@MatthewJRoybal MatthewJRoybal commented Jan 8, 2020

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

@Thebohemiangeek

This comment has been minimized.

Copy link

@Thebohemiangeek Thebohemiangeek commented Jan 11, 2020

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

This comment has been minimized.

Copy link

@miller-productions miller-productions commented Feb 1, 2020

+1

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

@ovsw

This comment has been minimized.

Copy link

@ovsw ovsw commented Feb 17, 2020

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

@cushmatt

This comment has been minimized.

Copy link

@cushmatt cushmatt 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

This comment has been minimized.

Copy link
Contributor

@t2ca t2ca commented Feb 28, 2020

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

@beelee

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
OSS Roadmap
  
To prioritize
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can鈥檛 perform that action at this time.