From feb02f87f7611868d13462441f9554700f99e873 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 12 Dec 2023 17:46:50 +0100 Subject: [PATCH 1/4] Pass jsConfig to Next.js SWC Loader and load Next.js config with default --- code/frameworks/nextjs/src/config/webpack.ts | 4 +- code/frameworks/nextjs/src/preset.ts | 1 - code/frameworks/nextjs/src/swc/loader.ts | 4 ++ code/frameworks/nextjs/src/utils.ts | 42 ++------------------ 4 files changed, 9 insertions(+), 42 deletions(-) diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts index be2a983fceec..1abc8684c4d5 100644 --- a/code/frameworks/nextjs/src/config/webpack.ts +++ b/code/frameworks/nextjs/src/config/webpack.ts @@ -15,13 +15,11 @@ const tryResolve = (path: string) => { export const configureConfig = async ({ baseConfig, nextConfigPath, - configDir, }: { baseConfig: WebpackConfig; nextConfigPath?: string; - configDir: string; }): Promise => { - const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir }); + const nextConfig = await resolveNextConfig({ nextConfigPath }); addScopedAlias(baseConfig, 'next/config'); if (tryResolve('next/dist/compiled/react')) { diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index da332d81e4ef..d1bdb71527bf 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -146,7 +146,6 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, const nextConfig = await configureConfig({ baseConfig, nextConfigPath, - configDir: options.configDir, }); const babelRCPath = join(getProjectRoot(), '.babelrc'); diff --git a/code/frameworks/nextjs/src/swc/loader.ts b/code/frameworks/nextjs/src/swc/loader.ts index 255305d0b713..d1b5c6e7ab98 100644 --- a/code/frameworks/nextjs/src/swc/loader.ts +++ b/code/frameworks/nextjs/src/swc/loader.ts @@ -3,6 +3,7 @@ import { getVirtualModules } from '@storybook/builder-webpack5'; import type { Options } from '@storybook/types'; import type { NextConfig } from 'next'; import path from 'path'; +import loadJsConfig from 'next/dist/build/load-jsconfig'; export const configureSWCLoader = async ( baseConfig: any, @@ -15,6 +16,8 @@ export const configureSWCLoader = async ( const { virtualModules } = await getVirtualModules(options); + const { jsConfig } = await loadJsConfig(dir, nextConfig as any); + baseConfig.module.rules = [ ...baseConfig.module.rules, { @@ -32,6 +35,7 @@ export const configureSWCLoader = async ( pagesDir: `${dir}/pages`, appDir: `${dir}/apps`, hasReactRefresh: isDevelopment, + jsConfig, nextConfig, supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers( dir, diff --git a/code/frameworks/nextjs/src/utils.ts b/code/frameworks/nextjs/src/utils.ts index c119db2dbff7..6429ed718759 100644 --- a/code/frameworks/nextjs/src/utils.ts +++ b/code/frameworks/nextjs/src/utils.ts @@ -1,11 +1,10 @@ import path from 'path'; import { DefinePlugin } from 'webpack'; import { PHASE_DEVELOPMENT_SERVER } from 'next/constants'; -import findUp from 'find-up'; -import { pathExists } from 'fs-extra'; import type { Configuration as WebpackConfig } from 'webpack'; import type { NextConfig } from 'next'; -import { pathToFileURL } from 'node:url'; +import loadConfig from 'next/dist/server/config'; +import { getProjectRoot } from '@storybook/core-common'; export const configureRuntimeNextjsVersionResolution = (baseConfig: WebpackConfig): void => { baseConfig.plugins?.push( @@ -17,46 +16,13 @@ export const configureRuntimeNextjsVersionResolution = (baseConfig: WebpackConfi export const getNextjsVersion = (): string => require(scopedResolve('next/package.json')).version; -const findNextConfigFile = async (configDir: string) => { - const supportedExtensions = ['mjs', 'js']; - return supportedExtensions.reduce>( - async (acc, ext: string | undefined) => { - const resolved = await acc; - if (!resolved) { - acc = findUp(`next.config.${ext}`, { cwd: configDir }); - } - - return acc; - }, - Promise.resolve(undefined) - ); -}; - export const resolveNextConfig = async ({ - baseConfig = {}, nextConfigPath, - configDir, }: { - baseConfig?: WebpackConfig; nextConfigPath?: string; - configDir: string; }): Promise => { - const nextConfigFile = nextConfigPath || (await findNextConfigFile(configDir)); - - if (!nextConfigFile || (await pathExists(nextConfigFile)) === false) { - return {}; - } - - const nextConfigExport = await import(pathToFileURL(nextConfigFile).href); - - const nextConfig = - typeof nextConfigExport === 'function' - ? nextConfigExport(PHASE_DEVELOPMENT_SERVER, { - defaultConfig: baseConfig, - }) - : nextConfigExport; - - return nextConfig.default || nextConfig; + const dir = nextConfigPath ? path.dirname(nextConfigPath) : getProjectRoot(); + return loadConfig(PHASE_DEVELOPMENT_SERVER, dir, undefined); }; // This is to help the addon in development From 98cdbf9c61e997a91118d69f46007b3becf04add Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Tue, 12 Dec 2023 18:06:21 +0100 Subject: [PATCH 2/4] Activate Next.js 13 sandbox --- code/lib/cli/src/sandbox-templates.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index a882d2be3bba..d909792fc4e6 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -129,7 +129,6 @@ const baseTemplates = { extraDependencies: ['server-only'], }, skipTasks: ['e2e-tests-dev', 'bench'], - inDevelopment: true, }, 'nextjs/default-js': { name: 'Next.js Latest (Webpack | JavaScript)', From d2e6f238722277fc4e862fdafb3294d93c8a1123 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 13 Dec 2023 14:45:21 +0100 Subject: [PATCH 3/4] Fix generation of Next.js 13 sandbox --- code/lib/cli/src/sandbox-templates.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts index d909792fc4e6..8451d086194e 100644 --- a/code/lib/cli/src/sandbox-templates.ts +++ b/code/lib/cli/src/sandbox-templates.ts @@ -116,7 +116,7 @@ const baseTemplates = { 'nextjs/13-ts': { name: 'Next.js v13.5 (Webpack | TypeScript)', script: - 'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-13/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^12.2.0" && yarn && git add . && git commit --amend --no-edit && cd ..', + 'yarn create next-app {{beforeDir}} -e https://github.com/vercel/next.js/tree/next-13/examples/hello-world && cd {{beforeDir}} && npm pkg set "dependencies.next"="^13.5.6" && yarn && git add . && git commit --amend --no-edit && cd ..', expected: { framework: '@storybook/nextjs', renderer: '@storybook/react', From 39660d67c9be7788b7d3a6a48043df859d2c3c39 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Wed, 27 Dec 2023 08:55:48 +0100 Subject: [PATCH 4/4] Fix parallelism --- .circleci/config.yml | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 5aa1adf2ec7f..8e93487dd40a 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -706,22 +706,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 32 + parallelism: 33 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 32 + parallelism: 33 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 29 + parallelism: 30 requires: - build-sandboxes - e2e-production: - parallelism: 27 + parallelism: 28 requires: - build-sandboxes - e2e-dev: @@ -729,7 +729,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 27 + parallelism: 28 requires: - build-sandboxes