NextJS: Mock out server-only package for RSC

code/frameworks/nextjs/package.json

@@ -42,7 +42,7 @@
       "import": "./dist/font/webpack/loader/storybook-nextjs-font-loader.mjs"
     },
     "./dist/preview.mjs": "./dist/preview.mjs",
-    "./dist/previewRSC.mjs": "./dist/previewRSC.mjs",
+    "./dist/rsc/preview.mjs": "./dist/rsc/preview.mjs",
     "./next-image-loader-stub.js": {
       "types": "./dist/next-image-loader-stub.d.ts",
       "require": "./dist/next-image-loader-stub.js",
@@ -153,12 +153,13 @@
       "./src/index.ts",
       "./src/preset.ts",
       "./src/preview.tsx",
-      "./src/previewRSC.tsx",
       "./src/next-image-loader-stub.ts",
       "./src/images/decorator.tsx",
       "./src/images/next-legacy-image.tsx",
       "./src/images/next-image.tsx",
       "./src/font/webpack/loader/storybook-nextjs-font-loader.ts",
+      "./src/rsc/preview.tsx",
+      "./src/rsc/server-only.ts",
       "./src/swc/next-swc-loader-patch.ts"
     ],
     "externals": [

code/frameworks/nextjs/src/preset.ts

@@ -9,6 +9,7 @@ import { configureCss } from './css/webpack';
 import { configureImports } from './imports/webpack';
 import { configureStyledJsx } from './styledJsx/webpack';
 import { configureImages } from './images/webpack';
+import { configureRSC } from './rsc/webpack';
 import { configureRuntimeNextjsVersionResolution } from './utils';
 import type { FrameworkOptions, StorybookConfig } from './types';
 import TransformFontImports from './font/babel';
@@ -72,7 +73,7 @@ export const previewAnnotations: PresetProperty<'previewAnnotations'> = (
   const nextDir = dirname(require.resolve('@storybook/nextjs/package.json'));
   const result = [...entry, join(nextDir, 'dist/preview.mjs')];
   if (features?.experimentalNextRSC) {
-    result.unshift(join(nextDir, 'dist/previewRSC.mjs'));
+    result.unshift(join(nextDir, 'dist/rsc/preview.mjs'));
   }
   return result;
 };
@@ -155,6 +156,10 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
   configureStyledJsx(baseConfig);
   configureNodePolyfills(baseConfig);
 
+  if (options.features?.experimentalNextRSC) {
+    configureRSC(baseConfig);
+  }
+
   // TODO: In Storybook 8.0, we have to check whether the babel-compiler addon is used. Otherwise, swc should be used.
   if (builder?.useSWC) {
     await configureSWCLoader(baseConfig, options, nextConfig);

code/frameworks/nextjs/src/previewRSC.tsx → code/frameworks/nextjs/src/rsc/preview.tsx

@@ -1,5 +1,5 @@
 import type { Addon_DecoratorFunction } from '@storybook/types';
-import { ServerComponentDecorator } from './rsc/decorator';
+import { ServerComponentDecorator } from './decorator';
 
 export const decorators: Addon_DecoratorFunction<any>[] = [ServerComponentDecorator];
 

code/frameworks/nextjs/src/rsc/server-only.ts

@@ -0,0 +1,2 @@
+// dummy export to make this a module
+export default {};

code/frameworks/nextjs/src/rsc/webpack.ts

@@ -0,0 +1,9 @@
+import type { Configuration as WebpackConfig } from 'webpack';
+
+export const configureRSC = (baseConfig: WebpackConfig): void => {
+  const resolve = baseConfig.resolve ?? {};
+  resolve.alias = {
+    ...resolve.alias,
+    'server-only$': require.resolve('./rsc/server-only.js'),
+  };
+};

code/frameworks/nextjs/template/stories/RSC.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import 'server-only';
 
 export const RSC = async ({ label }) => <>RSC {label}</>;
 

code/lib/cli/src/sandbox-templates.ts

@@ -73,6 +73,7 @@ export type Template = {
     mainConfig?: Partial<StorybookConfigRaw>;
     testBuild?: boolean;
     disableDocs?: boolean;
+    extraDependencies?: string[];
   };
   /**
    * Flag to indicate that this template is a secondary template, which is used mainly to test rather specific features.
@@ -124,6 +125,7 @@ const baseTemplates = {
       mainConfig: {
         features: { experimentalNextRSC: true },
       },
+      extraDependencies: ['server-only'],
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
     inDevelopment: true,
@@ -141,6 +143,7 @@ const baseTemplates = {
       mainConfig: {
         features: { experimentalNextRSC: true },
       },
+      extraDependencies: ['server-only'],
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
@@ -157,6 +160,7 @@ const baseTemplates = {
       mainConfig: {
         features: { experimentalNextRSC: true },
       },
+      extraDependencies: ['server-only'],
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },
@@ -173,6 +177,7 @@ const baseTemplates = {
       mainConfig: {
         features: { experimentalNextRSC: true },
       },
+      extraDependencies: ['server-only'],
     },
     skipTasks: ['e2e-tests-dev', 'bench'],
   },

scripts/tasks/sandbox-parts.ts

@@ -40,6 +40,7 @@ import { workspacePath } from '../utils/workspace';
 import { babelParse } from '../../code/lib/csf-tools/src/babelParse';
 import { CODE_DIRECTORY, REPROS_DIRECTORY } from '../utils/constants';
 import type { TemplateKey } from '../../code/lib/cli/src/sandbox-templates';
+import type { JsPackageManager } from '../../code/lib/cli/src/js-package-manager';
 
 const logger = console;
 
@@ -380,21 +381,28 @@ export async function addExtraDependencies({
   cwd,
   dryRun,
   debug,
+  extraDeps,
 }: {
   cwd: string;
   dryRun: boolean;
   debug: boolean;
+  extraDeps?: string[];
 }) {
   // web-components doesn't install '@storybook/testing-library' by default
-  const extraDeps = [
+  const extraDevDeps = [
     '@storybook/jest@next',
     '@storybook/testing-library@next',
     '@storybook/test-runner@next',
   ];
-  if (debug) logger.log('🎁 Adding extra deps', extraDeps);
+  if (debug) logger.log('🎁 Adding extra dev deps', extraDevDeps);
+  let packageManager: JsPackageManager;
   if (!dryRun) {
-    const packageManager = JsPackageManagerFactory.getPackageManager({}, cwd);
-    await packageManager.addDependencies({ installAsDevDependencies: true }, extraDeps);
+    packageManager = JsPackageManagerFactory.getPackageManager({}, cwd);
+    await packageManager.addDependencies({ installAsDevDependencies: true }, extraDevDeps);
+  }
+  if (extraDeps) {
+    if (debug) logger.log('🎁 Adding extra deps', extraDeps);
+    await packageManager.addDependencies({ installAsDevDependencies: false }, extraDeps);
   }
 }
 

scripts/tasks/sandbox.ts

@@ -79,6 +79,7 @@ export const sandbox: Task = {
       cwd: details.sandboxDir,
       debug: options.debug,
       dryRun: options.dryRun,
+      extraDeps: details.template.modifications?.extraDependencies,
     });
 
     await extendMain(details, options);