React: Avoid 'Dynamic require of react is not possible' issue

Author: valentinpalkovic

code/lib/react-dom-shim/src/react-16.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-deprecated */
 import type { ReactElement } from 'react';
-import ReactDOM from 'react-dom';
+import * as ReactDOM from 'react-dom';
 
 export const renderElement = async (node: ReactElement, el: Element) => {
   return new Promise<null>((resolve) => {

code/lib/react-dom-shim/src/react-18.tsx

@@ -1,7 +1,7 @@
 import type { FC, ReactElement } from 'react';
-import React, { useLayoutEffect, useRef } from 'react';
+import * as React from 'react';
 import type { Root as ReactRoot, RootOptions } from 'react-dom/client';
-import ReactDOM from 'react-dom/client';
+import * as ReactDOM from 'react-dom/client';
 
 // A map of all rendered React 18 nodes
 const nodes = new Map<Element, ReactRoot>();
@@ -11,8 +11,8 @@ const WithCallback: FC<{ callback: () => void; children: ReactElement }> = ({
   children,
 }) => {
   // See https://github.com/reactwg/react-18/discussions/5#discussioncomment-2276079
-  const once = useRef<() => void>();
-  useLayoutEffect(() => {
+  const once = React.useRef<() => void>();
+  React.useLayoutEffect(() => {
     if (once.current === callback) return;
     once.current = callback;
     callback();

code/renderers/react/src/renderToCanvas.tsx

@@ -1,7 +1,6 @@
 import { global } from '@storybook/global';
 import type { FC } from 'react';
 import React, { Component as ReactComponent, StrictMode, Fragment } from 'react';
-import { renderElement, unmountElement } from '@storybook/react-dom-shim';
 
 import type { RenderContext } from 'storybook/internal/types';
 
@@ -54,6 +53,7 @@ export async function renderToCanvas(
   }: RenderContext<ReactRenderer>,
   canvasElement: ReactRenderer['canvasElement']
 ) {
+  const { renderElement, unmountElement } = (await import('@storybook/react-dom-shim')).default;
   const Story = unboundStoryFn as FC<StoryContext<ReactRenderer>>;
 
   const content = (