diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts index 9ec5fd3bd029..e3dac587cb54 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.test.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.test.ts @@ -18,11 +18,23 @@ describe('framework-preset-react-docgen', () => { const config = await preset.webpackFinal?.(webpackConfig, { presets: { - apply: async () => - ({ - check: false, - reactDocgen: 'react-docgen', - } as Partial), + apply: async (name: string) => { + if (name === 'typescript') { + return { + check: false, + reactDocgen: 'react-docgen', + } as Partial; + } + + if (name === 'babel') { + return { + plugins: [], + presets: [], + }; + } + + return undefined; + }, }, presetsList: presetsListWithDocs, } as any); @@ -33,6 +45,7 @@ describe('framework-preset-react-docgen', () => { { exclude: /node_modules\/.*/, loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader', + options: { babelOptions: { plugins: [], presets: [] } }, test: /\.(cjs|mjs|tsx?|jsx?)$/, }, ], @@ -50,11 +63,23 @@ describe('framework-preset-react-docgen', () => { const config = await preset.webpackFinal?.(webpackConfig, { presets: { // @ts-expect-error (not strict) - apply: async () => - ({ - check: false, - reactDocgen: 'react-docgen-typescript', - } as Partial), + apply: async (name: string) => { + if (name === 'typescript') { + return { + check: false, + reactDocgen: 'react-docgen-typescript', + } as Partial; + } + + if (name === 'babel') { + return { + plugins: [], + presets: [], + }; + } + + return undefined; + }, }, presetsList: presetsListWithDocs, }); @@ -65,6 +90,7 @@ describe('framework-preset-react-docgen', () => { { exclude: /node_modules\/.*/, loader: '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader', + options: { babelOptions: { plugins: [], presets: [] } }, test: /\.(cjs|mjs|jsx?)$/, }, ], diff --git a/code/presets/react-webpack/src/framework-preset-react-docs.ts b/code/presets/react-webpack/src/framework-preset-react-docs.ts index 3538c2c8dbad..5ccaaf14ba51 100644 --- a/code/presets/react-webpack/src/framework-preset-react-docs.ts +++ b/code/presets/react-webpack/src/framework-preset-react-docs.ts @@ -22,6 +22,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( } if (reactDocgen !== 'react-docgen-typescript') { + const babelOptions = await options.presets.apply('babel', {}); return { ...config, module: { @@ -34,6 +35,9 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( require.resolve, '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader' ), + options: { + babelOptions, + }, exclude: /node_modules\/.*/, }, ], @@ -43,6 +47,8 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( const { ReactDocgenTypeScriptPlugin } = await import('@storybook/react-docgen-typescript-plugin'); + const babelOptions = await options.presets.apply('babel', {}); + return { ...config, module: { @@ -55,6 +61,9 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async ( require.resolve, '@storybook/preset-react-webpack/dist/loaders/react-docgen-loader' ), + options: { + babelOptions, + }, exclude: /node_modules\/.*/, }, ], diff --git a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts index 279840739014..aa1724fd880f 100644 --- a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts +++ b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts @@ -58,6 +58,11 @@ const handlers = [...defaultHandlers, actualNameHandler]; export default async function reactDocgenLoader(this: LoaderContext, source: string) { const callback = this.async(); + // get options + const options = this.getOptions() || {}; + const { babelOptions = {} } = options; + + const { plugins, presets } = babelOptions; try { const docgenResults = parse(source, { @@ -65,6 +70,12 @@ export default async function reactDocgenLoader(this: LoaderContext, source resolver: defaultResolver, handlers, importer: defaultImporter, + babelOptions: { + babelrc: false, + configFile: false, + plugins, + presets, + }, }) as DocObj[]; const magicString = new MagicString(source);