Webpack5: Only load babel config when babel-loader is used

code/builders/builder-webpack5/src/index.ts

@@ -61,15 +61,13 @@ export const executor = {
 export const getConfig: WebpackBuilder['getConfig'] = async (options) => {
   const { presets } = options;
   const typescriptOptions = await presets.apply('typescript', {}, options);
-  const babelOptions = await presets.apply('babel', {}, { ...options, typescriptOptions });
   const frameworkOptions = await presets.apply<any>('frameworkOptions');
 
   return presets.apply(
     'webpack',
     {},
     {
       ...options,
-      babelOptions,
       typescriptOptions,
       frameworkOptions,
     }

code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts

@@ -57,7 +57,7 @@ const storybookPaths: Record<string, string> = {
 };
 
 export default async (
-  options: Options & Record<string, any> & { typescriptOptions: TypescriptOptions }
+  options: Options & { typescriptOptions: TypescriptOptions }
 ): Promise<Configuration> => {
   const {
     outputDir = join('.', 'public'),
@@ -66,7 +66,6 @@ export default async (
     configType,
     presets,
     previewUrl,
-    babelOptions,
     typescriptOptions,
     features,
   } = options;
@@ -240,7 +239,7 @@ export default async (
         },
         builderOptions.useSWC
           ? await createSWCLoader(Object.keys(virtualModuleMapping), options)
-          : createBabelLoader(babelOptions, typescriptOptions, Object.keys(virtualModuleMapping)),
+          : await createBabelLoader(options, typescriptOptions, Object.keys(virtualModuleMapping)),
         {
           test: /\.md$/,
           type: 'asset/source',

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

@@ -5,18 +5,19 @@ import { logger } from '@storybook/node-logger';
 import type { Options } from '@storybook/types';
 import type { TypescriptOptions } from '../types';
 
-export const createBabelLoader = (
-  options: any,
+export const createBabelLoader = async (
+  options: Options & { typescriptOptions: TypescriptOptions },
   typescriptOptions: TypescriptOptions,
   excludes: string[] = []
 ) => {
   logger.info(dedent`Using Babel compiler`);
+  const babelOptions = await options.presets.apply('babel', {}, options);
   return {
     test: typescriptOptions.skipBabel ? /\.(mjs|jsx?)$/ : /\.(mjs|tsx?|jsx?)$/,
     use: [
       {
         loader: require.resolve('babel-loader'),
-        options,
+        options: babelOptions,
       },
     ],
     include: [getProjectRoot()],

code/presets/create-react-app/src/helpers/processCraConfig.ts

@@ -19,10 +19,10 @@ const testMatch = (rule: RuleSetRule, string: string): boolean => {
     : isRegExp(rule.test) && rule.test.test(string);
 };
 
-export const processCraConfig = (
+export const processCraConfig = async (
   craWebpackConfig: Configuration,
   options: PluginOptions
-): RuleSetRule[] => {
+): Promise<RuleSetRule[]> => {
   const configDir = resolve(options.configDir);
 
   /*
@@ -37,6 +37,7 @@ export const processCraConfig = (
    */
   const storybookVersion = semver.coerce(options.packageJson.version) || '';
   const isStorybook530 = semver.gte(storybookVersion, '5.3.0');
+  const babelOptions = await options.presets.apply('babel');
 
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   return craWebpackConfig.module!.rules.reduce((rules, rule): RuleSetRule[] => {
@@ -108,12 +109,7 @@ export const processCraConfig = (
                 overrides: TransformOptions[] | null;
               };
 
-              const {
-                extends: _extends,
-                plugins,
-                presets,
-                overrides,
-              } = (options as any).babelOptions;
+              const { extends: _extends, plugins, presets, overrides } = babelOptions;
 
               return {
                 ...oneOfRule,

code/presets/create-react-app/src/index.ts

@@ -92,7 +92,7 @@ const webpack = async (
 
   // Select the relevant CRA rules and add the Storybook config directory.
   logger.info(`=> Modifying Create React App rules.`);
-  const craRules = processCraConfig(craWebpackConfig, options);
+  const craRules = await processCraConfig(craWebpackConfig, options);
 
   // NOTE: These are set by default in Storybook 6.
   const isStorybook6 = semver.gte(options.packageJson.version || '', '6.0.0');