From 0adaf29a72bf7cb775f15b98cedde8e3a9f5167d Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Tue, 28 Nov 2023 09:26:16 +0100
Subject: [PATCH] Webpack5: Load babel-options only when necessary

---
 code/builders/builder-webpack5/src/index.ts                | 2 --
 .../builder-webpack5/src/preview/iframe-webpack.config.ts  | 5 ++---
 code/builders/builder-webpack5/src/preview/loaders.ts      | 7 ++++---
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/code/builders/builder-webpack5/src/index.ts b/code/builders/builder-webpack5/src/index.ts
index 53c4fba32df5..b4725b4a1f4c 100644
--- a/code/builders/builder-webpack5/src/index.ts
+++ b/code/builders/builder-webpack5/src/index.ts
@@ -61,7 +61,6 @@ 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(
@@ -69,7 +68,6 @@ export const getConfig: WebpackBuilder['getConfig'] = async (options) => {
     {},
     {
       ...options,
-      babelOptions,
       typescriptOptions,
       frameworkOptions,
     }
diff --git a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts b/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
index f1598a66e5da..773d5a9d14bb 100644
--- a/code/builders/builder-webpack5/src/preview/iframe-webpack.config.ts
+++ b/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',
diff --git a/code/builders/builder-webpack5/src/preview/loaders.ts b/code/builders/builder-webpack5/src/preview/loaders.ts
index f10bd93a5ebc..868d35ba394c 100644
--- a/code/builders/builder-webpack5/src/preview/loaders.ts
+++ b/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()],