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

[gaearon]

1. Update react and react-dom to 17.0.0-rc.1
2. Update gatsby to latest
3. 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 https://github.com/hot-loader/react-dom/issues/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.

[theKashey]

Reason: RHL "hot-patch" was not applied to createFiberFromTypeAndProps and AppContainer was left _unpatched_ ("as is")
Tracked at: https://github.com/gaearon/react-hot-loader/pull/1557

[theKashey]

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]

Thank you so much!

[gaearon]

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]

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]

Still getting error that React is not defined

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

[mikaelkristiansson]

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:
https://github.com/gatsbyjs/gatsby/issues/27694

[sapkra]

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]

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

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

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.