From 80ee481f3eec833fd3c2a21be232ce80fd486f98 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 20 Sep 2023 11:28:07 +0200 Subject: [PATCH 1/3] Make Nextjs 13.5 work again by mapping it's dependencies to aliasses Co-authored-by: Yann Braga --- code/frameworks/nextjs/src/dependency-map.ts | 40 +++++++++++++++++++ code/frameworks/nextjs/src/preset.ts | 4 +- .../frameworks/nextjs/src/routing/webpack.tsx | 18 --------- 3 files changed, 42 insertions(+), 20 deletions(-) create mode 100644 code/frameworks/nextjs/src/dependency-map.ts delete mode 100644 code/frameworks/nextjs/src/routing/webpack.tsx diff --git a/code/frameworks/nextjs/src/dependency-map.ts b/code/frameworks/nextjs/src/dependency-map.ts new file mode 100644 index 000000000000..c60c99630027 --- /dev/null +++ b/code/frameworks/nextjs/src/dependency-map.ts @@ -0,0 +1,40 @@ +import type { Configuration as WebpackConfig } from 'webpack'; +import semver from 'semver'; +import { getNextjsVersion, addScopedAlias } from './utils'; + +const mapping = { + default: { + 'next/dist/shared/lib/router-context': 'next/dist/next-server/lib/router-context', + 'next/dist/shared/lib/head-manager-context': 'next/dist/shared/lib/head-manager-context', + 'next/dist/shared/lib/app-router-context': 'next/dist/shared/lib/app-router-context', + 'next/dist/shared/lib/hooks-client-context': 'next/dist/shared/lib/hooks-client-context', + }, + '11.1.0': { + 'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context', + 'next/dist/shared/lib/head-manager-context': 'next/dist/shared/lib/head-manager-context', + 'next/dist/shared/lib/app-router-context': 'next/dist/shared/lib/app-router-context', + 'next/dist/shared/lib/hooks-client-context': 'next/dist/shared/lib/hooks-client-context', + }, + '13.5.1': { + '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 = { ...mapping.default }; + + if (semver.gte(version, '13.5.1')) { + Object.assign(result, mapping['13.5.1']); + } + + Object.entries(result).forEach(([name, alias]) => { + addScopedAlias(baseConfig, name, alias); + }); +}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 4aa06d54c4d0..db1c276da9b4 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/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); diff --git a/code/frameworks/nextjs/src/routing/webpack.tsx b/code/frameworks/nextjs/src/routing/webpack.tsx deleted file mode 100644 index c0d245219742..000000000000 --- a/code/frameworks/nextjs/src/routing/webpack.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { Configuration as WebpackConfig } from 'webpack'; -import semver from 'semver'; -import { addScopedAlias, getNextjsVersion } from '../utils'; - -export const configureRouting = (baseConfig: WebpackConfig): void => { - // here we resolve the router context path with the installed version of Next.js - const routerContextPath = getRouterContextPath(); - addScopedAlias(baseConfig, routerContextPath); -}; - -const getRouterContextPath = () => { - const version = getNextjsVersion(); - if (semver.gte(version, '11.1.0')) { - return 'next/dist/shared/lib/router-context'; - } - - return 'next/dist/next-server/lib/router-context'; -}; From 1ce0548b2543e87945356659d0aa5895f93f985f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 20 Sep 2023 12:15:20 +0200 Subject: [PATCH 2/3] improve the mapping of versions so we can easily change which versions get which aliases --- code/frameworks/nextjs/src/config/webpack.ts | 16 ++++++++++-- code/frameworks/nextjs/src/dependency-map.ts | 26 +++++++++----------- 2 files changed, 25 insertions(+), 17 deletions(-) diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts index 13c1a251cebe..f5e72bc360d8 100644 --- a/code/frameworks/nextjs/src/config/webpack.ts +++ b/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; diff --git a/code/frameworks/nextjs/src/dependency-map.ts b/code/frameworks/nextjs/src/dependency-map.ts index c60c99630027..31342722fb50 100644 --- a/code/frameworks/nextjs/src/dependency-map.ts +++ b/code/frameworks/nextjs/src/dependency-map.ts @@ -2,20 +2,14 @@ import type { Configuration as WebpackConfig } from 'webpack'; import semver from 'semver'; import { getNextjsVersion, addScopedAlias } from './utils'; -const mapping = { - default: { - 'next/dist/shared/lib/router-context': 'next/dist/next-server/lib/router-context', - 'next/dist/shared/lib/head-manager-context': 'next/dist/shared/lib/head-manager-context', - 'next/dist/shared/lib/app-router-context': 'next/dist/shared/lib/app-router-context', - 'next/dist/shared/lib/hooks-client-context': 'next/dist/shared/lib/hooks-client-context', +const mapping: Record> = { + '<11.1.0': { + 'next/dist/next-server/lib/router-context': 'next/dist/next-server/lib/router-context', }, - '11.1.0': { + '>11.1.0': { 'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context', - 'next/dist/shared/lib/head-manager-context': 'next/dist/shared/lib/head-manager-context', - 'next/dist/shared/lib/app-router-context': 'next/dist/shared/lib/app-router-context', - 'next/dist/shared/lib/hooks-client-context': 'next/dist/shared/lib/hooks-client-context', }, - '13.5.1': { + '>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', @@ -28,11 +22,13 @@ const mapping = { export const configureAliasing = (baseConfig: WebpackConfig): void => { const version = getNextjsVersion(); - const result: Record = { ...mapping.default }; + const result: Record = {}; - if (semver.gte(version, '13.5.1')) { - Object.assign(result, mapping['13.5.1']); - } + 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); From afe4c537810f28191168b5b19a0c33fa366c386f Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Wed, 20 Sep 2023 12:55:24 +0200 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Yann Braga --- code/frameworks/nextjs/src/dependency-map.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/frameworks/nextjs/src/dependency-map.ts b/code/frameworks/nextjs/src/dependency-map.ts index 31342722fb50..70ad2ece94e0 100644 --- a/code/frameworks/nextjs/src/dependency-map.ts +++ b/code/frameworks/nextjs/src/dependency-map.ts @@ -6,10 +6,10 @@ const mapping: Record> = { '<11.1.0': { 'next/dist/next-server/lib/router-context': 'next/dist/next-server/lib/router-context', }, - '>11.1.0': { + '>=11.1.0': { 'next/dist/shared/lib/router-context': 'next/dist/shared/lib/router-context', }, - '>13.5.0': { + '>=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',