Next.js: Enable SWC for new Webpack5-based projects

code/builders/builder-webpack5/src/preview/loaders.ts

@@ -49,12 +49,8 @@ export const createSWCLoader = async (excludes: string[] = [], options: Options)
   };
   return {
     test: typescriptOptions.skipCompiler ? /\.(mjs|cjs|jsx?)$/ : /\.(mjs|cjs|tsx?|jsx?)$/,
-    use: [
-      {
-        loader: require.resolve('swc-loader'),
-        options: config,
-      },
-    ],
+    loader: require.resolve('swc-loader'),
+    options: config,
     include: [getProjectRoot()],
     exclude: [/node_modules/, ...excludes],
   };

code/e2e-tests/addon-controls.spec.ts

@@ -31,18 +31,22 @@ test.describe('addon-controls', () => {
     );
     const toggle = sbPage.panelContent().locator('input[name=primary]');
     await toggle.click();
-    await expect(sbPage.previewRoot().locator('button')).toHaveCSS(
-      'background-color',
-      'rgba(0, 0, 0, 0)'
-    );
+    await expect(async () => {
+      await expect(sbPage.previewRoot().locator('button')).toHaveCSS(
+        'background-color',
+        'rgba(0, 0, 0, 0)'
+      );
+    }).toPass();
 
     // Color picker: Background color
     const color = sbPage.panelContent().locator('input[placeholder="Choose color..."]');
     await color.fill('red');
-    await expect(sbPage.previewRoot().locator('button')).toHaveCSS(
-      'background-color',
-      'rgb(255, 0, 0)'
-    );
+    await expect(async () => {
+      await expect(sbPage.previewRoot().locator('button')).toHaveCSS(
+        'background-color',
+        'rgb(255, 0, 0)'
+      );
+    }).toPass();
 
     // TODO: enable this once the controls for size are aligned in all CLI templates.
     // Radio buttons: Size

code/frameworks/nextjs/src/swc/loader.ts

@@ -6,8 +6,7 @@ import type { NextConfig } from 'next';
 import path from 'path';
 import type { RuleSetRule } from 'webpack';
 import semver from 'semver';
-import { dedent } from 'ts-dedent';
-import { logger } from '@storybook/node-logger';
+import { NextjsSWCNotSupportedError } from 'lib/core-events/src/errors/server-errors';
 import { getNextjsVersion } from '../utils';
 
 export const configureSWCLoader = async (
@@ -19,13 +18,7 @@ export const configureSWCLoader = async (
   const version = getNextjsVersion();
 
   if (semver.lt(version, '14.0.0')) {
-    logger.warn(
-      dedent`You have activated the SWC mode for Next.js, but you are not using Next.js 14.0.0 or higher. 
-      SWC is only supported in Next.js 14.0.0 and higher. 
-      Skipping SWC and using Babel instead.
-      `
-    );
-    return;
+    throw new NextjsSWCNotSupportedError();
   }
 
   const dir = getProjectRoot();
@@ -43,14 +36,14 @@ export const configureSWCLoader = async (
 
   baseConfig.module.rules = [
     // TODO: Remove filtering in Storybook 8.0
-    ...baseConfig.module.rules.filter(
-      (r: RuleSetRule) =>
-        !(typeof r.use === 'object' && 'loader' in r.use && r.use.loader?.includes('swc-loader'))
-    ),
+    ...baseConfig.module.rules.filter((r: RuleSetRule) => {
+      return !r.loader?.includes('swc-loader');
+    }),
     {
       test: /\.(m?(j|t)sx?)$/,
       include: [getProjectRoot()],
       exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
+      enforce: 'post',
       use: {
         // we use our own patch because we need to remove tracing from the original code
         // which is not possible otherwise
@@ -61,14 +54,12 @@ export const configureSWCLoader = async (
           pagesDir: `${dir}/pages`,
           appDir: `${dir}/apps`,
           hasReactRefresh: isDevelopment,
-          hasServerComponents: true,
           nextConfig,
           supportedBrowsers: require('next/dist/build/utils').getSupportedBrowsers(
             dir,
             isDevelopment
           ),
           swcCacheDir: path.join(dir, nextConfig?.distDir ?? '.next', 'cache', 'swc'),
-          isServerLayer: false,
           bundleTarget: 'default',
         },
       },

code/frameworks/nextjs/src/swc/next-swc-loader-patch.ts

@@ -165,11 +165,20 @@ export function pitch(this: any) {
   }, callback);
 }
 
+function sanitizeSourceMap(rawSourceMap: any): any {
+  const { sourcesContent, ...sourceMap } = rawSourceMap ?? {};
+
+  // JSON parse/stringify trick required for swc to accept the SourceMap
+  return JSON.parse(JSON.stringify(sourceMap));
+}
+
 export default function swcLoader(this: any, inputSource: string, inputSourceMap: any) {
   const loaderSpan = mockCurrentTraceSpan.traceChild('next-swc-loader');
   const callback = this.async();
   loaderSpan
-    .traceAsyncFn(() => loaderTransform.call(this, loaderSpan, inputSource, inputSourceMap))
+    .traceAsyncFn(() =>
+      loaderTransform.call(this, loaderSpan, inputSource, sanitizeSourceMap(inputSourceMap))
+    )
     .then(
       ([transformedSource, outputSourceMap]: any) => {
         callback(null, transformedSource, outputSourceMap || inputSourceMap);

code/lib/cli/src/generators/ANGULAR/index.ts

@@ -1,5 +1,4 @@
 import { join } from 'path';
-import semver from 'semver';
 import { baseGenerator } from '../baseGenerator';
 import type { Generator } from '../types';
 import { CoreBuilder } from '../../project_types';
@@ -13,10 +12,6 @@ const generator: Generator<{ projectName: string }> = async (
   options,
   commandOptions
 ) => {
-  const angularVersion = await packageManager.getPackageVersion('@angular/core');
-  const isWebpack5 = angularVersion && semver.gte(angularVersion, '12.0.0');
-  const updatedOptions = isWebpack5 ? { ...options, builder: CoreBuilder.Webpack5 } : options;
-
   const angularJSON = new AngularJSON();
 
   if (
@@ -62,7 +57,8 @@ const generator: Generator<{ projectName: string }> = async (
     packageManager,
     npmOptions,
     {
-      ...updatedOptions,
+      ...options,
+      builder: CoreBuilder.Webpack5,
       ...(useCompodoc && {
         frameworkPreviewParts: {
           prefix: compoDocPreviewPrefix,

code/lib/cli/src/generators/baseGenerator.ts

@@ -4,7 +4,7 @@ import { dedent } from 'ts-dedent';
 import ora from 'ora';
 import type { NpmOptions } from '../NpmOptions';
 import type { SupportedRenderers, SupportedFrameworks, Builder } from '../project_types';
-import { SupportedLanguage, externalFrameworks, CoreBuilder } from '../project_types';
+import { SupportedLanguage, externalFrameworks, CoreBuilder, ProjectType } from '../project_types';
 import { copyTemplateFiles } from '../helpers';
 import { configureMain, configurePreview } from './configure';
 import type { JsPackageManager } from '../js-package-manager';
@@ -171,6 +171,15 @@ const hasInteractiveStories = (rendererId: SupportedRenderers) =>
 const hasFrameworkTemplates = (framework?: SupportedFrameworks) =>
   ['angular', 'nextjs'].includes(framework);
 
+function shouldUseSWCCompiler(builder: Builder, projectType: ProjectType) {
+  return (
+    builder === CoreBuilder.Webpack5 &&
+    projectType !== ProjectType.ANGULAR &&
+    // TODO: Remove in Storybook 8.0
+    projectType !== ProjectType.NEXTJS
+  );
+}
+
 export async function baseGenerator(
   packageManager: JsPackageManager,
   npmOptions: NpmOptions,
@@ -194,14 +203,30 @@ export async function baseGenerator(
     builder = await detectBuilder(packageManager, projectType);
   }
 
+  const useSWC = shouldUseSWCCompiler(builder, projectType);
+
+  const {
+    packages: frameworkPackages,
+    type,
+    rendererId,
+    framework: frameworkInclude,
+    builder: builderInclude,
+  } = getFrameworkDetails(
+    renderer,
+    builder,
+    pnp,
+    language,
+    framework,
+    shouldApplyRequireWrapperOnPackageNames
+  );
+
   const {
     extraAddons: extraAddonPackages,
     extraPackages,
     staticDir,
     addScripts,
     addMainFile,
     addComponents,
-    skipBabel,
     extraMain,
     extensions,
     storybookConfigFolder,
@@ -211,20 +236,14 @@ export async function baseGenerator(
     ...options,
   };
 
-  const {
-    packages: frameworkPackages,
-    type,
-    rendererId,
-    framework: frameworkInclude,
-    builder: builderInclude,
-  } = getFrameworkDetails(
-    renderer,
-    builder,
-    pnp,
-    language,
-    framework,
-    shouldApplyRequireWrapperOnPackageNames
-  );
+  let { skipBabel } = {
+    ...defaultOptions,
+    ...options,
+  };
+
+  if (useSWC) {
+    skipBabel = true;
+  }
 
   const extraAddonsToInstall =
     typeof extraAddonPackages === 'function'
@@ -401,7 +420,18 @@ export async function baseGenerator(
       : [];
 
     await configureMain({
-      framework: { name: frameworkInclude, options: options.framework || {} },
+      framework: {
+        name: frameworkInclude,
+        options: useSWC
+          ? {
+              ...(options.framework ?? {}),
+              builder: {
+                ...(options.framework?.builder ?? {}),
+                useSWC: true,
+              },
+            }
+          : options.framework || {},
+      },
       prefixes,
       storybookConfigFolder,
       docs: { autodocs: 'tag' },

code/lib/cli/src/initiate.ts

@@ -57,7 +57,7 @@ const installStorybook = async <Project extends ProjectType>(
     linkable: !!options.linkable,
     pnp: pnp || options.usePnp,
     yes: options.yes,
-    projectType: options.type,
+    projectType,
   };
 
   const runGenerator: () => Promise<any> = async () => {

code/lib/core-events/src/errors/server-errors.ts

@@ -368,3 +368,20 @@ export class GoogleFontsLoadingError extends StorybookError {
     `;
   }
 }
+
+export class NextjsSWCNotSupportedError extends StorybookError {
+  readonly category = Category.FRAMEWORK_NEXTJS;
+
+  readonly code = 3;
+
+  public readonly documentation =
+    'https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#manual-migration';
+
+  template() {
+    return dedent`
+    You have activated the SWC mode for Next.js, but you are not using Next.js 14.0.0 or higher. 
+    SWC is only supported in Next.js 14.0.0 and higher. Please go to your .storybook/main.<js|ts> file
+    and remove the { framework: { options: { builder: { useSWC: true } } } } option or upgrade to Next.js v14 or later.
+    `;
+  }
+}