Storybook: React is not defined when upgrading to v18

Question

. 。 Answers to this question are eligible for a +200 reputation bounty. Ben G wants to to this question. 这个问题。

I recently upgraded react , react-dom and their corresponding type packages from v16 to v18.

Since doing so, I get the following error on any Storybook story which features a React component:

    at react-dom/client (http://127.0.0.1:8080/main.1187308f.iframe.bundle.js:1:486489)
    at __webpack_require__ (http://127.0.0.1:8080/runtime~main.bb9256ec.iframe.bundle.js:1:381)
    at __webpack_require__.t (http://127.0.0.1:8080/runtime~main.bb9256ec.iframe.bundle.js:1:1475)

This is a Typescript and Gatsby project. Here are the relevant dependencies/resolutions from package.json :

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
  "@types/react": "^18.0.26",
  "@types/react-dom": "^18.0.10",
  "@storybook/addon-a11y": "^6.5.15",
  "@storybook/addon-essentials": "^6.5.15",
  "@storybook/addon-links": "^6.5.15",
  "@storybook/addons": "^6.5.15",
  "@storybook/builder-webpack5": "^6.5.15",
  "@storybook/cli": "^6.5.15",
  "@storybook/manager-webpack5": "^6.5.15",
  "@storybook/react": "^6.5.15",
  "@storybook/source-loader": "^6.5.15",
},
"resolutions": {
  "@types/react": "^18.0.26",
  "@types/react-dom": "^18.0.10"
}

For my main.js , I precisely copied the Gatsby Storybook instructions .

How can I fix this error and get a working storybook with React v18? Per this github issue comment it should be totally possible with Storybook 6.5+.

Answer 1

You have to use the old ReactDOM.render or upgrade your storybook to 7.beta version to use the new API of React.

Answer 2

It looks like it works when I remove this from the recommended Gatsby Config :

if (parseInt(React.version) <= 18) {
  config.externals = ["react-dom/client"];
}

Perhaps they made an error, and this was supposed to be < not <=