Merge branch 'next' into shilman/onboarding-user-agent

Author: shilman

code/core/src/common/utils/load-main-config.ts

@@ -1,8 +1,12 @@
-import { relative, resolve } from 'node:path';
+import { readFile, rm, writeFile } from 'node:fs/promises';
+import { join, parse, relative, resolve } from 'node:path';
 
+import { logger } from 'storybook/internal/node-logger';
 import { MainFileEvaluationError } from 'storybook/internal/server-errors';
 import type { StorybookConfig } from 'storybook/internal/types';
 
+import { dedent } from 'ts-dedent';
+
 import { importModule } from '../../shared/utils/module';
 import { getInterpretedFile } from './interpret-files';
 import { validateConfigurationFiles } from './validate-configuration-files';
@@ -25,6 +29,37 @@ export async function loadMainConfig({
     if (!(e instanceof Error)) {
       throw e;
     }
+    if (e.message.includes('require is not defined')) {
+      logger.info(
+        'Loading main config failed, trying a temporary fix, Please ensure the main config is valid ESM'
+      );
+      const comment =
+        '// end of Storybook 10 migration assistant header, you can delete the above code';
+      const content = await readFile(mainPath, 'utf-8');
+
+      if (!content.includes(comment)) {
+        const header = dedent`
+          import { createRequire } from "node:module";
+          import { dirname } from "node:path";
+          import { fileURLToPath } from "node:url";
+    
+          const __filename = fileURLToPath(import.meta.url);
+          const __dirname = dirname(__filename);
+          const require = createRequire(import.meta.url);
+        `;
+
+        const { ext, name, dir } = parse(mainPath);
+        const modifiedMainPath = join(dir, `${name}.tmp.${ext}`);
+        await writeFile(modifiedMainPath, [header, comment, content].join('\n\n'));
+        let out;
+        try {
+          out = await importModule(modifiedMainPath);
+        } finally {
+          await rm(modifiedMainPath);
+        }
+        return out;
+      }
+    }
 
     throw new MainFileEvaluationError({
       location: relative(process.cwd(), mainPath),

code/frameworks/nextjs-vite/build-config.ts

@@ -11,6 +11,11 @@ const config: BuildEntries = {
         exportEntries: ['./preview'],
         entryPoint: './src/preview.tsx',
       },
+      {
+        exportEntries: ['./config/preview'],
+        entryPoint: './src/config/preview.ts',
+        dts: false,
+      },
       {
         exportEntries: ['./cache.mock'],
         entryPoint: './src/export-mocks/cache/index.ts',

code/frameworks/nextjs-vite/package.json

@@ -35,6 +35,7 @@
       "types": "./dist/export-mocks/cache/index.d.ts",
       "default": "./dist/export-mocks/cache/index.js"
     },
+    "./config/preview": "./dist/config/preview.js",
     "./headers.mock": {
       "types": "./dist/export-mocks/headers/index.d.ts",
       "default": "./dist/export-mocks/headers/index.js"
@@ -88,6 +89,7 @@
     "@types/node": "^22.0.0",
     "next": "^15.2.3",
     "postcss-load-config": "^6.0.1",
+    "semver": "^7.3.5",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {

code/frameworks/nextjs-vite/src/preset.ts

@@ -11,8 +11,10 @@ import type { StorybookConfigVite } from '@storybook/builder-vite';
 import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset';
 
 import postCssLoadConfig from 'postcss-load-config';
+import semver from 'semver';
 
 import type { FrameworkOptions } from './types';
+import { getNextjsVersion } from './utils';
 
 const require = createRequire(import.meta.url);
 
@@ -35,8 +37,20 @@ export const core: PresetProperty<'core'> = async (config, options) => {
 };
 
 export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => {
-  const result = [...entry, fileURLToPath(import.meta.resolve('@storybook/nextjs-vite/preview'))];
-  return result;
+  const annotations = [
+    ...entry,
+    fileURLToPath(import.meta.resolve('@storybook/nextjs-vite/preview')),
+  ];
+
+  const nextjsVersion = getNextjsVersion();
+  const isNext16orNewer = semver.gte(nextjsVersion, '16.0.0');
+
+  // TODO: Remove this once we only support Next.js v16 and above
+  if (!isNext16orNewer) {
+    annotations.push(fileURLToPath(import.meta.resolve('@storybook/nextjs-vite/config/preview')));
+  }
+
+  return annotations;
 };
 
 export const optimizeViteDeps = [

code/frameworks/nextjs-vite/src/preview.tsx

@@ -2,7 +2,7 @@ import type * as React from 'react';
 
 import type { Addon_DecoratorFunction, LoaderFunction } from 'storybook/internal/types';
 
-import type { ReactRenderer, StoryFn } from '@storybook/react';
+import type { ReactRenderer } from '@storybook/react';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore we must ignore types here as during compilation they are not generated yet
@@ -13,7 +13,6 @@ import { createRouter } from '@storybook/nextjs-vite/router.mock';
 
 import { isNextRouterError } from 'next/dist/client/components/is-next-router-error';
 
-import './config/preview';
 import { HeadManagerDecorator } from './head-manager/decorator';
 import { ImageDecorator } from './images/decorator';
 import { RouterDecorator } from './routing/decorator';

code/frameworks/nextjs-vite/src/utils.ts

@@ -0,0 +1,7 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+import { resolvePackageDir } from '../../../core/src/shared/utils/module';
+
+export const getNextjsVersion = (): string =>
+  JSON.parse(readFileSync(join(resolvePackageDir('next'), 'package.json'), 'utf8')).version;

code/frameworks/nextjs/build-config.ts

@@ -11,6 +11,11 @@ const config: BuildEntries = {
         exportEntries: ['./preview'],
         entryPoint: './src/preview.tsx',
       },
+      {
+        exportEntries: ['./config/preview'],
+        entryPoint: './src/config/preview.ts',
+        dts: false,
+      },
       {
         exportEntries: ['./cache.mock'],
         entryPoint: './src/export-mocks/cache/index.ts',

code/frameworks/nextjs/package.json

@@ -35,6 +35,7 @@
       "default": "./dist/export-mocks/cache/index.js"
     },
     "./compatibility/draft-mode.compat": "./dist/compatibility/draft-mode.compat.js",
+    "./config/preview": "./dist/config/preview.js",
     "./export-mocks": "./dist/export-mocks/index.js",
     "./headers.mock": {
       "types": "./dist/export-mocks/headers/index.d.ts",

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

@@ -1,9 +1,13 @@
 import { fileURLToPath } from 'node:url';
 
 import type { NextConfig } from 'next';
+import semver from 'semver';
 import type { Configuration as WebpackConfig } from 'webpack';
 
-import { addScopedAlias, resolveNextConfig } from '../utils';
+import { addScopedAlias, getNextjsVersion, resolveNextConfig } from '../utils';
+
+const nextjsVersion = getNextjsVersion();
+const isNext16orNewer = semver.gte(nextjsVersion, '16.0.0');
 
 const tryResolve = (path: string) => {
   try {
@@ -22,7 +26,10 @@ export const configureConfig = async ({
 }): Promise<NextConfig> => {
   const nextConfig = await resolveNextConfig({ nextConfigPath });
 
-  addScopedAlias(baseConfig, 'next/config');
+  // TODO: Remove this once we only support Next.js 16 and above
+  if (!isNext16orNewer) {
+    addScopedAlias(baseConfig, 'next/config');
+  }
 
   // @ts-expect-error We know that alias is an object
   if (baseConfig.resolve?.alias?.['react-dom']) {
@@ -58,14 +65,17 @@ const setupRuntimeConfig = async (
   baseConfig: WebpackConfig,
   nextConfig: NextConfig
 ): Promise<void> => {
-  const definePluginConfig: Record<string, any> = {
+  const definePluginConfig: Record<string, any> = {};
+
+  // TODO: Remove this once we only support Next.js 16 and above
+  if (!isNext16orNewer) {
     // this mimics what nextjs does client side
     // https://github.com/vercel/next.js/blob/57702cb2a9a9dba4b552e0007c16449cf36cfb44/packages/next/client/index.tsx#L101
-    'process.env.__NEXT_RUNTIME_CONFIG': JSON.stringify({
+    definePluginConfig['process.env.__NEXT_RUNTIME_CONFIG'] = JSON.stringify({
       serverRuntimeConfig: {},
       publicRuntimeConfig: nextConfig.publicRuntimeConfig,
-    }),
-  };
+    });
+  }
 
   const newNextLinkBehavior = (nextConfig.experimental as any)?.newNextLinkBehavior;
 

code/frameworks/nextjs/src/preset.ts

@@ -15,6 +15,7 @@ import nextBabelPreset from './babel/preset';
 import { configureConfig } from './config/webpack';
 import TransformFontImports from './font/babel';
 import type { FrameworkOptions, StorybookConfig } from './types';
+import { getNextjsVersion } from './utils';
 
 export const addons: PresetProperty<'addons'> = [
   fileURLToPath(import.meta.resolve('@storybook/preset-react-webpack')),
@@ -48,8 +49,17 @@ export const core: PresetProperty<'core'> = async (config, options) => {
 };
 
 export const previewAnnotations: PresetProperty<'previewAnnotations'> = (entry = []) => {
-  const result = [...entry, fileURLToPath(import.meta.resolve('@storybook/nextjs/preview'))];
-  return result;
+  const annotations = [...entry, fileURLToPath(import.meta.resolve('@storybook/nextjs/preview'))];
+
+  const nextjsVersion = getNextjsVersion();
+  const isNext16orNewer = semver.gte(nextjsVersion, '16.0.0');
+
+  // TODO: Remove this once we only support Next.js v16 and above
+  if (!isNext16orNewer) {
+    annotations.push(fileURLToPath(import.meta.resolve('@storybook/nextjs/config/preview')));
+  }
+
+  return annotations;
 };
 
 export const babel: PresetProperty<'babel'> = async (baseConfig: TransformOptions) => {