chore(docs): Add auto config change for react-dom in Storybook (#37222

)

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