Merge pull request #24239 from storybookjs/norbert/fix-nextjs-13-5-co…

…mpatibility

NextJS: Add compatibility with nextjs `13.5`

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

@@ -5,6 +5,14 @@ import type { NextConfig } from 'next';
 import { DefinePlugin } from 'webpack';
 import { addScopedAlias, getNextjsVersion, resolveNextConfig } from '../utils';
 
+const tryResolve = (path: string) => {
+  try {
+    return require.resolve(path);
+  } catch (err) {
+    return false;
+  }
+};
+
 export const configureConfig = async ({
   baseConfig,
   nextConfigPath,
@@ -17,8 +25,12 @@ export const configureConfig = async ({
   const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir });
 
   addScopedAlias(baseConfig, 'next/config');
-  addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
-  addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
+  if (tryResolve('next/dist/compiled/react')) {
+    addScopedAlias(baseConfig, 'react', 'next/dist/compiled/react');
+  }
+  if (tryResolve('next/dist/compiled/react-dom')) {
+    addScopedAlias(baseConfig, 'react-dom', 'next/dist/compiled/react-dom');
+  }
   setupRuntimeConfig(baseConfig, nextConfig);
 
   return nextConfig;

code/frameworks/nextjs/src/dependency-map.ts

@@ -0,0 +1,36 @@
+import type { Configuration as WebpackConfig } from 'webpack';
+import semver from 'semver';
+import { getNextjsVersion, addScopedAlias } from './utils';
+
+const mapping: Record<string, Record<string, string>> = {
+  '<11.1.0': {
+    'next/dist/next-server/lib/router-context': 'next/dist/next-server/lib/router-context',
+  },
+  '>=11.1.0': {
+    'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context',
+  },
+  '>=13.5.0': {
+    'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context.shared-runtime',
+    'next/dist/shared/lib/head-manager-context':
+      'next/dist/shared/lib/head-manager-context.shared-runtime',
+    'next/dist/shared/lib/app-router-context':
+      'next/dist/shared/lib/app-router-context.shared-runtime',
+    'next/dist/shared/lib/hooks-client-context':
+      'next/dist/shared/lib/hooks-client-context.shared-runtime',
+  },
+};
+
+export const configureAliasing = (baseConfig: WebpackConfig): void => {
+  const version = getNextjsVersion();
+  const result: Record<string, string> = {};
+
+  Object.keys(mapping).forEach((key) => {
+    if (semver.intersects(version, key)) {
+      Object.assign(result, mapping[key]);
+    }
+  });
+
+  Object.entries(result).forEach(([name, alias]) => {
+    addScopedAlias(baseConfig, name, alias);
+  });
+};

code/frameworks/nextjs/src/preset.ts

@@ -7,7 +7,6 @@ import { getProjectRoot } from '@storybook/core-common';
 import { configureConfig } from './config/webpack';
 import { configureCss } from './css/webpack';
 import { configureImports } from './imports/webpack';
-import { configureRouting } from './routing/webpack';
 import { configureStyledJsx } from './styledJsx/webpack';
 import { configureImages } from './images/webpack';
 import { configureRuntimeNextjsVersionResolution } from './utils';
@@ -17,6 +16,7 @@ import TransformFontImports from './font/babel';
 import { configureNextFont } from './font/webpack/configureNextFont';
 import nextBabelPreset from './babel/preset';
 import { configureNodePolyfills } from './nodePolyfills/webpack';
+import { configureAliasing } from './dependency-map';
 
 export const addons: PresetProperty<'addons', StorybookConfig> = [
   dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
@@ -143,13 +143,13 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
     configDir: options.configDir,
   });
 
+  configureAliasing(baseConfig);
   configureNextFont(baseConfig);
   configureNextImport(baseConfig);
   configureRuntimeNextjsVersionResolution(baseConfig);
   configureImports({ baseConfig, configDir: options.configDir });
   configureCss(baseConfig, nextConfig);
   configureImages(baseConfig, nextConfig);
-  configureRouting(baseConfig);
   configureStyledJsx(baseConfig);
   configureNodePolyfills(baseConfig);