Webpack5: Load babel-options only when necessary

storybookjs · Nov 28, 2023 · 0adaf29 · 0adaf29
1 parent 4933c17
commit 0adaf29
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 8 deletions.
diff --git a/code/builders/builder-webpack5/src/index.ts b/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,
     }

diff --git 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
@@ -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()],