Merge pull request storybookjs#31501 from storybookjs/valentin/fix-nextjs-module-transpilation

Next.js: Fix module transpilation

Author: valentinpalkovic

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

@@ -3,7 +3,15 @@ import type { Options } from 'storybook/internal/types';
 
 import { getVirtualModules } from '@storybook/builder-webpack5';
 
-export const configureBabelLoader = async (baseConfig: any, options: Options) => {
+import type { NextConfig } from 'next';
+
+import { getNodeModulesExcludeRegex } from '../utils';
+
+export const configureBabelLoader = async (
+  baseConfig: any,
+  options: Options,
+  nextConfig: NextConfig
+) => {
   const { virtualModules } = await getVirtualModules(options);
 
   const babelOptions = await options.presets.apply('babel', {}, options);
@@ -23,7 +31,10 @@ export const configureBabelLoader = async (baseConfig: any, options: Options) =>
         },
       ],
       include: [getProjectRoot()],
-      exclude: [/node_modules/, ...Object.keys(virtualModules)],
+      exclude: [
+        getNodeModulesExcludeRegex(nextConfig.transpilePackages ?? []),
+        ...Object.keys(virtualModules),
+      ],
     },
   ];
 };

code/frameworks/nextjs/src/preset.ts

@@ -190,7 +190,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
     await configureSWCLoader(baseConfig, options, nextConfig);
   } else {
     logger.info('=> Using Babel as compiler');
-    await configureBabelLoader(baseConfig, options);
+    await configureBabelLoader(baseConfig, options, nextConfig);
   }
 
   return baseConfig;

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

@@ -9,6 +9,8 @@ import type { NextConfig } from 'next';
 import loadJsConfig from 'next/dist/build/load-jsconfig';
 import type { Configuration as WebpackConfig } from 'webpack';
 
+import { getNodeModulesExcludeRegex } from '../utils';
+
 export const configureSWCLoader = async (
   baseConfig: WebpackConfig,
   options: Options,
@@ -30,10 +32,12 @@ export const configureSWCLoader = async (
     rawRule.exclude = /^__barrel_optimize__/;
   }
 
+  const transpilePackages = nextConfig.transpilePackages ?? [];
+
   baseConfig.module?.rules?.push({
     test: /\.((c|m)?(j|t)sx?)$/,
     include: [getProjectRoot()],
-    exclude: [/(node_modules)/, ...Object.keys(virtualModules)],
+    exclude: [getNodeModulesExcludeRegex(transpilePackages), ...Object.keys(virtualModules)],
     use: {
       // we use our own patch because we need to remove tracing from the original code
       // which is not possible otherwise

code/frameworks/nextjs/src/utils.ts

@@ -96,3 +96,20 @@ export const scopedResolve = (id: string): string => {
   const beginningOfMainScriptPath = moduleFolderStrPosition + id.length;
   return scopedModulePath.substring(0, beginningOfMainScriptPath);
 };
+
+/**
+ * Returns a RegExp that matches node_modules except for the given transpilePackages.
+ *
+ * @param transpilePackages Array of package names to NOT exclude (i.e., to include for
+ *   transpilation)
+ * @returns RegExp for use in Webpack's exclude
+ */
+export function getNodeModulesExcludeRegex(transpilePackages: string[]): RegExp {
+  if (!transpilePackages || transpilePackages.length === 0) {
+    return /node_modules/;
+  }
+  const escaped = transpilePackages
+    .map((pkg) => pkg.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+    .join('|');
+  return new RegExp(`node_modules/(?!(${escaped})/)`);
+}