From 34574894a25607c0ac2767fd6d1745d73cb7eca2 Mon Sep 17 00:00:00 2001 From: Grayson Hicks Date: Fri, 9 Dec 2022 02:02:44 -0600 Subject: [PATCH] chore(docs): Add auto config change for `react-dom` in Storybook (#37222) --- .../testing/visual-testing-with-storybook.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/docs/how-to/testing/visual-testing-with-storybook.md b/docs/docs/how-to/testing/visual-testing-with-storybook.md index dfad002f5ad22..a0c4c7c39f63c 100644 --- a/docs/docs/how-to/testing/visual-testing-with-storybook.md +++ b/docs/docs/how-to/testing/visual-testing-with-storybook.md @@ -64,11 +64,18 @@ Storybook's webpack configuration will require adjustments to allow you to trans In your Storybook configuration file (i.e., `.storybook/main.js`) add the following: ```js:title=.storybook/main.js +const React = require("react"); + module.exports = { webpackFinal: async config => { // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code. config.module.rules[0].exclude = [/node_modules\/(?!(gatsby|gatsby-script)\/)/] + // Use correct react-dom depending on React version. + if (parseInt(React.version) <= 18) { + config.externals = ["react-dom/client"]; + } + // Remove core-js to prevent issues with Storybook config.module.rules[0].exclude= [/core-js/] // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook @@ -85,6 +92,8 @@ module.exports = { The final `.storybook/main.js` should look something like this: ```js:title=.storybook/main.js +const React = require("react"); + module.exports = { // You will want to change this to wherever your Stories will live stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"], @@ -98,6 +107,11 @@ module.exports = { // Transpile Gatsby module because Gatsby includes un-transpiled ES6 code. config.module.rules[0].exclude = [/node_modules\/(?!(gatsby|gatsby-script)\/)/] + // Use correct react-dom depending on React version. + if (parseInt(React.version) <= 18) { + config.externals = ["react-dom/client"]; + } + // Remove core-js to prevent issues with Storybook config.module.rules[0].exclude= [/core-js/] // Use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook