reactjs - Storybook: React är inte definierat vid uppgradering till v18

Jag uppgraderade nyligen react, react-dom och deras motsvarande typ-paket från v16 till v18.

Sedan jag gjorde det får jag följande fel på vilken Storybook-berättelse som helst som innehåller en React-komponent:

    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)

Detta är ett Typescript- och Gatsby-projekt. Här är de relevanta beroendena/lösningarna från 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"
}

För min main.js kopierade jag exakt Gatsby Storybook-instruktionerna.

Hur kan jag åtgärda detta fel och få ett fungerande storybook med React v18? Enligt denna kommentar på GitHub-ärenden borde det vara helt möjligt med Storybook 6.5+.

Svar #1

Du måste använda den gamla ReactDOM.render eller uppgradera din storybook till version 7.beta för att använda det nya API:et för React.

Svar #2

Det verkar fungera när jag tar bort detta från den rekommenderade Gatsby-konfigurationen:

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

Kanske gjorde de ett misstag, och detta skulle ha varit < inte <=

Relaterade artiklar