Gatsby doesn't work with React 17 RC (Error: React-Hot-Loader: AppContainer should be patched) #26979

gaearon · 2020-09-21T16:49:07Z

Update react and react-dom to 17.0.0-rc.1
Update gatsby to latest
Run yarn dev

This is the result:

While there's ongoing work to make Fast Refresh the default for compatible setups, in the meantime, can we figure out how to fix this error?

I'm guessing that what needs to happen is for hot-loader/react-dom#41 to be solved by publishing a patched package. This is likely little work, but requires access to that package (cc @theKashey). I could do this myself if I had the instructions.

The text was updated successfully, but these errors were encountered:

theKashey · 2020-09-22T02:42:14Z

Reason: RHL "hot-patch" was not applied to createFiberFromTypeAndProps and AppContainer was left unpatched ("as is")
Tracked at: gaearon/react-hot-loader#1557

theKashey · 2020-09-22T12:56:26Z

hot-loader/react-dom(17.0.0-rc.2) and react-hot-loader(4.13.0) were updated and should not cause the issue anymore.

gaearon · 2020-09-22T13:38:13Z

Thank you so much!

gaearon · 2020-09-22T13:56:43Z

Concretely, if you're running this error, the fix is to run npm update.

If this didn't help, delete your lockfile (yarn.lock or package-lock.json) and re-run your package manager.

lnikell · 2020-10-27T12:15:37Z

Still getting error that React is not defined after 'npm update', removing 'package-lock.json' and cache clean.

"gatsby": "^2.24.88",
"react": "^17.0.1",
"react-dom": "^17.0.1",

gaearon · 2020-10-27T15:18:58Z

Still getting error that React is not defined

This does not sound like the error described in this issue. File a new one?

mikaelkristiansson · 2020-10-28T08:40:23Z

Still getting error that React is not defined after 'npm update', removing 'package-lock.json' and cache clean.
"gatsby": "^2.24.88",
"react": "^17.0.1",
"react-dom": "^17.0.1",

This is another error, and I created a issue for it:
#27694

sapkra · 2020-11-25T00:39:33Z

I still have the same error but react, react-hot-loader and @hot-loader/react-dom already are at the latest version. Could there be another reason?

Edit: I had to add this resolution to fix it, but I don't understand why. Is there a solution with which I can omit this resolution?

{
  "resolutions": {
    "react-dom": "npm:@hot-loader/react-dom",
  }
}

tony · 2020-11-25T13:20:45Z

@sapkra I tried the solution thing and it didn't work for me. Would that npm:@hot-loader/react-dom part be compatible with yarn? (I'm yarn v1.22.5, node v12.20.0)

I still get this error with the latest gatsby

  "dependencies": {
    "@chakra-ui/core": "^1.0.0-rc.7",
    "@chakra-ui/theme": "1.1.0",
    "@chakra-ui/theme-tools": "^1.0.1",
    "@deckdeckgo/highlight-code": "^2.2.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.32",
    "@fortawesome/free-solid-svg-icons": "^5.15.1",
    "@fortawesome/react-fontawesome": "^0.1.13",
    "@mdx-js/mdx": "<1.6.17",
    "@mdx-js/react": "<1.6.17",
    "@mdx-js/runtime": "<1.6.17",
    "@tippyjs/react": "^4.2.0",
    "base64id": "^2.0.0",
    "framer-motion": "^2.9.4",
    "gatsby": "2.27.2",
    "gatsby-image": "^2.6.0",
    "gatsby-plugin-advanced-sitemap": "^1.5.6",
    "gatsby-plugin-catch-links": "^2.5.0",
    "gatsby-plugin-chakra-ui": "^1.0.0-rc.7",
    "gatsby-plugin-exclude": "^1.0.2",
    "gatsby-plugin-google-gtag": "^2.3.0",
    "gatsby-plugin-manifest": "^2.7.0",
    "gatsby-plugin-mdx": "<1.2.40",
    "gatsby-plugin-meta-redirect": "^1.1.1",
    "gatsby-plugin-offline": "^3.5.0",
    "gatsby-plugin-react-helmet": "^3.5.0",
    "gatsby-plugin-s3": "^0.3.8",
    "gatsby-plugin-sass": "^2.6.0",
    "gatsby-plugin-sharp": "^2.9.0",
    "gatsby-plugin-typegen": "^2.2.1",
    "gatsby-plugin-typescript": "^2.7.0",
    "gatsby-plugin-web-vitals": "^1.0.3",
    "gatsby-plugin-webfonts": "^1.1.3",
    "gatsby-remark-autolink-headers": "^2.6.0",
    "gatsby-remark-highlight-code": "^2.1.0",
    "gatsby-remark-prismjs": "^3.8.0",
    "gatsby-source-filesystem": "^2.6.1",
    "gatsby-transformer-json": "^2.6.0",
    "gatsby-transformer-sharp": "^2.7.0",
    "gatsby-transformer-yaml": "^2.6.0",
    "moment": "^2.28.0",
    "moment-duration-format": "^2.3.2",
    "prismjs": "^1.22.0",
    "prop-types": "^15.7.2",
    "query-string": "^6.13.7",
    "react": "^17.0.1",
    "react-device-detect": "^1.14.0",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-swipeable": "^6.0.0",
    "url-join": "^4.0.1",
    "xss": "^1.0.8"
  },
  "devDependencies": {
    "@types/moment-duration-format": "^2.2.2",
    "@types/node": "^14.14.10",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-helmet": "^6.1.0",
    "@typescript-eslint/eslint-plugin": "^4.8.2",
    "@typescript-eslint/parser": "^4.8.2",
    "eslint": "^7.14.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-react": "^7.21.5",
    "gatsby-plugin-eslint": "^2.0.8",
    "prettier": "^2.2.0",
    "ts-node": "^9.0.0",
    "typescript": "^4.1.2"
  },

sapkra · 2020-11-25T13:49:39Z

@tony Have you really added it as an resolution? It's not a dependency, it overrides dependencies of other packages. btw. I'm using yarn too.

theKashey · 2020-11-25T23:15:26Z

try finding @hot-loader/react-dom in yarn.lock and removing the record to get it updated to the latest version.
You can do the same by adding it as an explicit dependency to your project.

When attempting to run the website in development, after making no changes, I was greeted with the following error message: > The above error occurred in the <StoreStateProvider> component: > in StoreStateProvider > in App After some digging, I dsocvered I needed to update React, React DOM, and Gatsby. See: gatsbyjs/gatsby#19827 Then after resolving the above issue, I found this error message when actually viewing the development server: > Error: React-Hot-Loader: AppContainer should be patched See: gatsbyjs/gatsby#26979

emt-mocha · 2020-12-29T16:57:32Z

I use NPM to install all my package.

I follow the steps at below:

npm install -g npm-check-updates
ncu - u // to update all the package to latest version
npm install // install the package

_//during the npm package installations u will notice many warnings. Just ignore it.

// once the package update done, you need to delete the node_modules folder again from your root directory. DO NOT DELETE "package-lock.json" !!!!

// final steps_

npm ci // once package updates complete follow the normal gatsby commands to start your development server.

// in future if you use ncu -u again then you need to follow the entire steps.
// HOPE THIS HELPS SOMEONE :)

fireairforce · 2021-03-31T03:29:39Z

I meet the same question，I use pnpm as my package manager，doesn't the react-hot-loader can't find the symlink ?

gaearon added the type: bug An issue or pull request relating to a bug in Gatsby label Sep 21, 2020

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Sep 21, 2020

gaearon closed this as completed Sep 22, 2020

gaearon changed the title ~~Gatsby doesn't work with React 17 RC~~ Gatsby doesn't work with React 17 RC (Error: React-Hot-Loader: AppContainer should be patched) Sep 22, 2020

LekoArts removed the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Sep 22, 2020

ynnoj mentioned this issue Jan 19, 2021

chore(deps): Regenerate yarn.lock ynnoj/gatsby-source-printful#68

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gatsby doesn't work with React 17 RC (Error: React-Hot-Loader: AppContainer should be patched) #26979

Gatsby doesn't work with React 17 RC (Error: React-Hot-Loader: AppContainer should be patched) #26979

gaearon commented Sep 21, 2020

theKashey commented Sep 22, 2020

theKashey commented Sep 22, 2020

gaearon commented Sep 22, 2020

gaearon commented Sep 22, 2020

lnikell commented Oct 27, 2020

gaearon commented Oct 27, 2020

mikaelkristiansson commented Oct 28, 2020

sapkra commented Nov 25, 2020 •

edited

tony commented Nov 25, 2020

sapkra commented Nov 25, 2020 •

edited

theKashey commented Nov 25, 2020

emt-mocha commented Dec 29, 2020 •

edited

fireairforce commented Mar 31, 2021

Gatsby doesn't work with React 17 RC (Error: React-Hot-Loader: AppContainer should be patched) #26979

Gatsby doesn't work with React 17 RC (Error: React-Hot-Loader: AppContainer should be patched) #26979

Comments

gaearon commented Sep 21, 2020

theKashey commented Sep 22, 2020

theKashey commented Sep 22, 2020

gaearon commented Sep 22, 2020

gaearon commented Sep 22, 2020

lnikell commented Oct 27, 2020

gaearon commented Oct 27, 2020

mikaelkristiansson commented Oct 28, 2020

sapkra commented Nov 25, 2020 • edited

tony commented Nov 25, 2020

sapkra commented Nov 25, 2020 • edited

theKashey commented Nov 25, 2020

emt-mocha commented Dec 29, 2020 • edited

fireairforce commented Mar 31, 2021

sapkra commented Nov 25, 2020 •

edited

sapkra commented Nov 25, 2020 •

edited

emt-mocha commented Dec 29, 2020 •

edited