Merge pull request #24993 from storybookjs/valentin/fix-react-docgen-…

…for-nextjs Next.js: Fix react-docgen usage with preset-env settings
storybookjs · Nov 28, 2023 · a60f3dd · a60f3dd
2 parents c4d5f05 + 4933c17
commit a60f3dd
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 10 deletions.
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
@@ -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<TypescriptOptions>),
+          apply: async (name: string) => {
+            if (name === 'typescript') {
+              return {
+                check: false,
+                reactDocgen: 'react-docgen',
+              } as Partial<TypescriptOptions>;
+            }
+
+            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<TypescriptOptions>),
+          apply: async (name: string) => {
+            if (name === 'typescript') {
+              return {
+                check: false,
+                reactDocgen: 'react-docgen-typescript',
+              } as Partial<TypescriptOptions>;
+            }
+
+            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
@@ -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
@@ -58,13 +58,24 @@ const handlers = [...defaultHandlers, actualNameHandler];
 
 export default async function reactDocgenLoader(this: LoaderContext<any>, source: string) {
   const callback = this.async();
+  // get options
+  const options = this.getOptions() || {};
+  const { babelOptions = {} } = options;
+
+  const { plugins, presets } = babelOptions;
 
   try {
     const docgenResults = parse(source, {
       filename: this.resourcePath,
       resolver: defaultResolver,
       handlers,
       importer: defaultImporter,
+      babelOptions: {
+        babelrc: false,
+        configFile: false,
+        plugins,
+        presets,
+      },
     }) as DocObj[];
 
     const magicString = new MagicString(source);