Merge pull request #77 from storybookjs/copilot/fix-dynamic-mocking-issue

Fix next/dynamic mock to properly handle ssr: false option

Author: valentinpalkovic

example/src/app/components/DynamicImport/DynamicImport.stories.tsx

@@ -7,6 +7,16 @@ const DynamicComponentNoSSR = dynamic(() => import("./DynamicImport"), {
   ssr: false,
 });
 
+// Test case that matches the user's issue pattern: using .then((mod) => mod.Component) with ssr: false
+const namedExportLoader = () =>
+  import("./NamedExport").then((mod) => mod.NamedComponent);
+const DynamicNamedComponentNoSSR = dynamic(namedExportLoader, { ssr: false });
+
+// Test without ssr: false to check if issue is SSR-specific
+const DynamicNamedComponent = dynamic(() =>
+  import("./NamedExport").then((mod) => mod.NamedComponent),
+);
+
 function Component() {
   return <DynamicComponent />;
 }
@@ -31,4 +41,35 @@ export const Default: Story = {
 
 export const NoSSR: Story = {
   render: () => <DynamicComponentNoSSR />,
+  play: async ({ canvas }) => {
+    await waitFor(() =>
+      expect(
+        canvas.getByText("I am a dynamically loaded component"),
+      ).toBeDefined(),
+    );
+  },
+};
+
+// Test without ssr: false
+export const NamedExport: Story = {
+  render: () => <DynamicNamedComponent />,
+  play: async ({ canvas }) => {
+    await waitFor(() =>
+      expect(
+        canvas.getByText("I am a named export dynamically loaded component"),
+      ).toBeDefined(),
+    );
+  },
+};
+
+// This test case matches the user's issue pattern
+export const NamedExportNoSSR: Story = {
+  render: () => <DynamicNamedComponentNoSSR />,
+  play: async ({ canvas }) => {
+    await waitFor(() =>
+      expect(
+        canvas.getByText("I am a named export dynamically loaded component"),
+      ).toBeDefined(),
+    );
+  },
 };

example/src/app/components/DynamicImport/NamedExport.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+export function NamedComponent() {
+  return <div>I am a named export dynamically loaded component</div>;
+}

src/plugins/next-mocks/alias/dynamic/index.tsx

@@ -76,10 +76,6 @@ export default function dynamic<P = Record<string, unknown>>(
   options?: DynamicOptions<P>,
 ): React.ComponentType<P> {
   const loadableFn = Loadable as LoadableFn<P>;
-  if (options?.ssr === false) {
-    // biome-ignore lint/performance/noDelete: <explanation>
-    delete options.ssr;
-  }
 
   let loadableOptions: LoadableOptions<P> = {
     // A loading component is not required, so we default it
@@ -136,5 +132,17 @@ export default function dynamic<P = Record<string, unknown>>(
     delete loadableOptions.loadableGenerated;
   }
 
+  // support for disabling server side rendering, eg: dynamic(() => import('../hello-world'), {ssr: false}).
+  // In browser environments (Storybook/Vitest), we simply remove webpack and modules options
+  // and proceed with the loadable component since we're always on the client-side.
+  if (typeof loadableOptions.ssr === "boolean" && !loadableOptions.ssr) {
+    // biome-ignore lint/performance/noDelete: <explanation>
+    delete loadableOptions.ssr;
+    // biome-ignore lint/performance/noDelete: <explanation>
+    delete loadableOptions.webpack;
+    // biome-ignore lint/performance/noDelete: <explanation>
+    delete loadableOptions.modules;
+  }
+
   return loadableFn({ ...loadableOptions, loader: loader as Loader<P> });
 }