Only add react-docgen info in the file a component is defined

This avoids errors when a component is being imported and re-exported under a different name via a barrel file or similar.
storybookjs · Apr 28, 2024 · cf562cc · cf562cc
1 parent 7e1ee32
commit cf562cc
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 3 deletions.
diff --git a/code/presets/react-webpack/src/loaders/react-docgen-loader.ts b/code/presets/react-webpack/src/loaders/react-docgen-loader.ts
@@ -22,6 +22,7 @@ import {
 const { getNameOrValue, isReactForwardRefCall } = utils;
 
 const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
+  documentation.set('definedInFile', componentDefinition.hub.file.opts.filename);
   if (
     (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
     componentDefinition.has('id')
@@ -58,7 +59,7 @@ const actualNameHandler: Handler = function actualNameHandler(documentation, com
   }
 };
 
-type DocObj = Documentation & { actualName: string };
+type DocObj = Documentation & { actualName: string; definedInFile: string };
 
 const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
 const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
@@ -107,8 +108,8 @@ export default async function reactDocgenLoader(
     const magicString = new MagicString(source);
 
     docgenResults.forEach((info) => {
-      const { actualName, ...docgenInfo } = info;
-      if (actualName) {
+      const { actualName, definedInFile, ...docgenInfo } = info;
+      if (actualName && definedInFile == this.resourcePath) {
         const docNode = JSON.stringify(docgenInfo);
         magicString.append(`;${actualName}.__docgenInfo=${docNode}`);
       }

diff --git a/code/renderers/react/src/docs/extractArgTypes.test.ts b/code/renderers/react/src/docs/extractArgTypes.test.ts
@@ -50,6 +50,7 @@ const annotateWithDocgen = (inputPath: string) => {
 const skippedTests = [
   'js-class-component',
   'js-function-component',
+  'js-re-exported-component',
   'js-function-component-inline-defaults',
   'js-function-component-inline-defaults-no-propTypes',
   'ts-function-component',

diff --git a/...nderers/react/template/stories/docgen-components/js-re-exported-component/docgen.snapshot b/...nderers/react/template/stories/docgen-components/js-re-exported-component/docgen.snapshot
@@ -0,0 +1 @@
+export { component } from '../js-function-component/input.jsx';
diff --git a/code/renderers/react/template/stories/docgen-components/js-re-exported-component/input.jsx b/code/renderers/react/template/stories/docgen-components/js-re-exported-component/input.jsx
@@ -0,0 +1,3 @@
+import { component } from '../js-function-component/input.jsx';
+
+export { component };
diff --git a/code/renderers/react/template/stories/js-argtypes.stories.jsx b/code/renderers/react/template/stories/js-argtypes.stories.jsx
@@ -7,6 +7,7 @@ import { ThemeProvider, themes, convert } from '@storybook/theming';
 
 import { component as JsClassComponentComponent } from './docgen-components/js-class-component/input.jsx';
 import { component as JsFunctionComponentComponent } from './docgen-components/js-function-component/input.jsx';
+import { component as JsRexportedComponentComponent } from './docgen-components/js-re-exported-component/input.jsx';
 import { component as JsFunctionComponentInlineDefaultsComponent } from './docgen-components/js-function-component-inline-defaults/input.jsx';
 import { component as JsFunctionComponentInlineDefaultsNoPropTypesComponent } from './docgen-components/js-function-component-inline-defaults-no-propTypes/input.jsx';
 import { component as JsProptypesShapeComponent } from './docgen-components/9399-js-proptypes-shape/input.jsx';
@@ -60,6 +61,10 @@ export const JsClassComponent = { parameters: { component: JsClassComponentCompo
 
 export const JsFunctionComponent = { parameters: { component: JsFunctionComponentComponent } };
 
+export const JsRexportedComponent = {
+  parameters: { component: JsRexportedComponentComponent },
+};
+
 export const JsFunctionComponentInlineDefaults = {
   parameters: { component: JsFunctionComponentInlineDefaultsComponent },
 };