Merge pull request #30847 from storybookjs/kasper/ssr-portable-stories

React: Allow portable stories to be used in SSR
(cherry picked from commit e289186)

Author: kasperpeulen

code/renderers/react/src/act-compat.ts

@@ -2,8 +2,6 @@
 // https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/src/act-compat.js
 import * as React from 'react';
 
-import * as DeprecatedReactTestUtils from 'react-dom/test-utils';
-
 declare const globalThis: {
   IS_REACT_ACT_ENVIRONMENT: boolean;
 };
@@ -13,9 +11,6 @@ declare const globalThis: {
 // We do check if act exists, but webpack will still throw an error on compile time
 const clonedReact = { ...React };
 
-const reactAct =
-  typeof clonedReact.act === 'function' ? clonedReact.act : DeprecatedReactTestUtils.act;
-
 export function setReactActEnvironment(isReactActEnvironment: boolean) {
   globalThis.IS_REACT_ACT_ENVIRONMENT = isReactActEnvironment;
 }
@@ -67,7 +62,15 @@ function withGlobalActEnvironment(actImplementation: (callback: () => void) => P
   };
 }
 
-export const act =
-  process.env.NODE_ENV === 'production'
+export const getAct = async () => {
+  // Lazy loading this makes sure that @storybook/react can be loaded in SSR contexts
+  // For example when SSR'ing portable stories
+  const reactAct =
+    typeof clonedReact.act === 'function'
+      ? clonedReact.act
+      : (await import('react-dom/test-utils')).act;
+
+  return process.env.NODE_ENV === 'production'
     ? (cb: (...args: any[]) => any) => cb()
     : withGlobalActEnvironment(reactAct);
+};

code/renderers/react/src/entry-preview.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 
 import semver from 'semver';
 
-import { act, getReactActEnvironment, setReactActEnvironment } from './act-compat';
+import { getAct, getReactActEnvironment, setReactActEnvironment } from './act-compat';
 import type { Decorator } from './public-types';
 
 export const parameters = { renderer: 'react' };
@@ -32,6 +32,8 @@ export const beforeAll = async () => {
     // https://github.com/testing-library/react-testing-library/blob/3dcd8a9649e25054c0e650d95fca2317b7008576/src/pure.js
     const { configure } = await import('@storybook/test');
 
+    const act = await getAct();
+
     configure({
       unstable_advanceTimersWrapper: (cb) => {
         return act(cb);

code/renderers/react/src/renderToCanvas.tsx

@@ -5,7 +5,7 @@ import type { RenderContext } from 'storybook/internal/types';
 
 import { global } from '@storybook/global';
 
-import { act } from './act-compat';
+import { getAct } from './act-compat';
 import type { ReactRenderer, StoryContext } from './types';
 
 const { FRAMEWORK_OPTIONS } = global;
@@ -98,6 +98,7 @@ export async function renderToCanvas(
     unmountElement(canvasElement);
   }
 
+  const act = await getAct();
   await new Promise<void>(async (resolve, reject) => {
     actQueue.push(async () => {
       try {