Next.js: Pass jsConfig to SWC Loader and load config with defaults

.circleci/config.yml

@@ -706,30 +706,30 @@ 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:
           parallelism: 2
           requires:
             - create-sandboxes
       - test-runner-production:
-          parallelism: 27
+          parallelism: 28
           requires:
             - build-sandboxes
 

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<NextConfig> => {
-  const nextConfig = await resolveNextConfig({ baseConfig, nextConfigPath, configDir });
+  const nextConfig = await resolveNextConfig({ nextConfigPath });
 
   addScopedAlias(baseConfig, 'next/config');
   if (tryResolve('next/dist/compiled/react')) {

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');

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,

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<Promise<undefined | string>>(
-    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<NextConfig> => {
-  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

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',
@@ -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)',