Adjust loading of new root api to newest React 18.0.0 release

.circleci/config.yml

@@ -221,7 +221,7 @@ jobs:
           name: Run E2E tests
           # Do not test CRA here because it's done in PnP part
           # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
-          command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_18
+          command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_new_root_api
           no_output_timeout: 5m
       - store_artifacts:
           path: /tmp/cypress-record

app/react/src/client/preview/render.tsx

@@ -6,9 +6,11 @@ import React, {
   StrictMode,
   Fragment,
 } from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM, { version as reactDomVersion } from 'react-dom';
+
 import { RenderContext } from '@storybook/store';
 import { ArgsStoryFn } from '@storybook/csf';
+import { gte, coerce } from '@storybook/semver';
 
 import { StoryContext } from './types';
 import { ReactFramework } from './types-6-0';
@@ -60,12 +62,15 @@ const unmountElement = (el: Element) => {
   }
 };
 
+const canUseReactRoot =
+  gte(reactDomVersion, '18.0.0') || coerce(reactDomVersion)?.version === '18.0.0';
+
 const getReactRoot = (el: Element): IRoot | null => {
   if (!FRAMEWORK_OPTIONS?.newRootApi) {
     return null;
   }
 
-  if (!(ReactDOM as any).createRoot) {
+  if (!canUseReactRoot) {
     throw new Error(
       "Your React version doesn't support the new React Root Api. Please use react and react-dom in version 18.x or set the storybook feature 'newRootApi' to false"
     );
@@ -74,7 +79,8 @@ const getReactRoot = (el: Element): IRoot | null => {
   let root = nodes.get(el);
 
   if (!root) {
-    root = (ReactDOM as any).createRoot(el) as IRoot;
+    // eslint-disable-next-line global-require
+    root = require('react-dom/client').createRoot(el) as IRoot;
     nodes.set(el, root);
   }
 

lib/cli/src/repro-generators/configs.ts

@@ -64,11 +64,11 @@ export const react: Parameters = {
   additionalDeps: ['prop-types'],
 };
 
-export const react_18: Parameters = {
+export const react_new_root_api: Parameters = {
   framework: 'react',
-  name: 'react_18',
+  name: 'react_new_root_api',
-  version: 'rc',
+  version: 'latest',
-  generator: fromDeps('react@rc', 'react-dom@rc'),
+  generator: fromDeps('react', 'react-dom'),
   additionalDeps: ['prop-types'],
   mainOverrides: {
     reactOptions: {