Storybook Integration in PNPM Monorepo: "ReferenceError: c is not defined"

[bennoinbeta]

Summary

Hello everyone,

I'm facing a challenge with integrating Storybook into the @dyn/comp-svg-editor package within my PNPM monorepo. This package relies on another internal package, @dyn/ui, which already runs Storybook successfully.

Despite the configurations being quite similar between the two, Storybook in @dyn/comp-svg-editor is not functioning correctly. The @dyn/ui is referenced as "@dyn/ui": "workspace:*" in the dependencies.

The specific error I encounter is:

ReferenceError: c is not defined
    at http://localhost:6006/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/index.js:3:2

First thing I noticed is that Storybook doesn't utilize the @dyn/ui library from node_modules; it accesses it directly from the monorepo at monorepo/packages/ui/dist/esm/index.js:3:2.

But the actual issue comes from Storybook's modification of the index.js file, adding __docgenInfos to non-exported components, causing the c reference error (see "additional infos", if you search for "as c" there doesn't seem to be a directly exported component? Also c is referenced multiple times for different components). The as c referenced component is likely the AppleIcon.tsx which is exported through icons/index.ts.

Although I've explored a related discussion with a proposed solution, it hasn't resolved my issue. Insights or suggestions from anyone who has navigated similar challenges would be greatly appreciated. Thanks :)

Additional information

.storybook configs

https://github.com/dyndotart/monorepo/tree/77-create-comp-svg-editor-package/packages/comp-svg-editor/.storybook

The by storybook modified index.js file

'use strict';
import {Card as r, CardContent as t, CardDescription as n, CardFooter as p, CardHeader as a, CardTitle as l} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/layout/Card.js";
import {Collapsible as i, CollapsibleContent as m, CollapsibleTrigger as u} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/layout/Collapsible.js";
import {Container as x} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/layout/Container.js";
import {ResizableHandle as d, ResizablePanel as I, ResizablePanelGroup as g} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/layout/Resizable.js";
import {ScrollArea as b, ScrollBar as s} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/layout/ScrollArea.js";
import {Avatar as w, AvatarFallback as D, AvatarImage as M} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/Avatar.js";
import {Badge as B, badgeVariants as G} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/Badge.js";
import {Label as k} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/Label.js";
import {Progress as z} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/Progress.js";
import {Separator as A} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/Separator.js";
import {Skeleton as V} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/Skeleton.js";
import {Tooltip as q, TooltipContent as F, TooltipProvider as U, TooltipTrigger as H} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/Tooltip.js";
import {AppleIcon as W} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/icons/AppleIcon.js";
import {GithubIcon as J} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/icons/GithubIcon.js";
import {GoogleIcon as N} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/icons/GoogleIcon.js";
import {LogoIcon as Q} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/icons/LogoIcon.js";
import {PaypalIcon as Y} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/icons/PaypalIcon.js";
import {SpinnerIcon as _} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/icons/SpinnerIcon.js";
import {TwitterIcon as oo} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/icons/TwitterIcon.js";
import {CheckIcon as ro, ChevronDownIcon as to, ChevronLeftIcon as no, ChevronUpIcon as po, CircleIcon as ao, ClipboardCopyIcon as lo, CopyIcon as co, CursorArrowIcon as io, DiscordLogoIcon as mo, ExternalLinkIcon as uo, FrameIcon as fo, GearIcon as xo, InfoCircledIcon as So, SquareIcon as Io, StarIcon as go, TwitterLogoIcon as Co, VercelLogoIcon as bo} from "/node_modules/.cache/storybook/d8180cd26077675cdb67b6c5ebb3e6dd26376f95d9c1388d74c3c2203f8d8a46/sb-vite/deps/@radix-ui_react-icons.js?v=07204d67";
import {Bird as To, Book as wo, Bot as Do, Code2 as Mo, CornerDownLeft as Lo, LifeBuoy as Bo, Mic as Go, Paperclip as ho, Rabbit as ko, Settings2 as vo, Share as zo, SquareTerminal as Po, SquareUser as Ao, Triangle as Ro, Turtle as Vo} from "/node_modules/.cache/storybook/d8180cd26077675cdb67b6c5ebb3e6dd26376f95d9c1388d74c3c2203f8d8a46/sb-vite/deps/lucide-react.js?v=07204d67";
import {Button as qo, buttonVariants as Fo} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/input/Button.js";
import {DropdownMenu as Ho, DropdownMenuCheckboxItem as Eo, DropdownMenuContent as Wo, DropdownMenuGroup as jo, DropdownMenuItem as Jo, DropdownMenuLabel as Ko, DropdownMenuPortal as No, DropdownMenuRadioGroup as Oo, DropdownMenuRadioItem as Qo, DropdownMenuSeparator as Xo, DropdownMenuShortcut as Yo, DropdownMenuSub as Zo, DropdownMenuSubContent as _o, DropdownMenuSubTrigger as $o, DropdownMenuTrigger as oe} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/input/DropdownMenu.js";
import {IconSelect as re} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/input/IconSelect.js";
import {Input as ne} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/input/Input.js";
import {Select as ae, SelectContent as le, SelectGroup as ce, SelectItem as ie, SelectLabel as me, SelectScrollDownButton as ue, SelectScrollUpButton as fe, SelectSeparator as xe, SelectTrigger as Se, SelectValue as de} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/input/Select.js";
import {Tabs as ge, TabsContent as Ce, TabsList as be, TabsTrigger as se} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/input/Tabs.js";
import {Textarea as we} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/input/Textarea.js";
import {Toggle as Me, toggleVariants as Le} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/input/Toggle.js";
import {ToggleGroup as Ge, ToggleGroupItem as he} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/primitive/input/ToggleGroup.js";
import {ScreenSize as ve} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/components/ScreenSize.js";
import {useSize as Pe} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/hooks/use-size.js";
import {useSizeCallback as Re} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/hooks/use-size-callback.js";
import {useWindowSize as ye} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/hooks/use-window-size.js";
import {cn as Fe} from "/@fs/Users/benno/Desktop/workspace/projects/dyndotart/b_product-development/code/monorepo/packages/ui/dist/esm/utils/cn.js";
export {W as AppleIcon, w as Avatar, D as AvatarFallback, M as AvatarImage, B as Badge, To as Bird, wo as Book, Do as Bot, qo as Button, r as Card, t as CardContent, n as CardDescription, p as CardFooter, a as CardHeader, l as CardTitle, ro as CheckIcon, to as ChevronDownIcon, no as ChevronLeftIcon, po as ChevronUpIcon, ao as CircleIcon, lo as ClipboardCopyIcon, Mo as Code2, i as Collapsible, m as CollapsibleContent, u as CollapsibleTrigger, x as Container, co as CopyIcon, Lo as CornerDownLeft, io as CursorArrowIcon, mo as DiscordLogoIcon, Ho as DropdownMenu, Eo as DropdownMenuCheckboxItem, Wo as DropdownMenuContent, jo as DropdownMenuGroup, Jo as DropdownMenuItem, Ko as DropdownMenuLabel, No as DropdownMenuPortal, Oo as DropdownMenuRadioGroup, Qo as DropdownMenuRadioItem, Xo as DropdownMenuSeparator, Yo as DropdownMenuShortcut, Zo as DropdownMenuSub, _o as DropdownMenuSubContent, $o as DropdownMenuSubTrigger, oe as DropdownMenuTrigger, uo as ExternalLinkIcon, fo as FrameIcon, xo as GearIcon, J as GithubIcon, N as GoogleIcon, re as IconSelect, So as InfoCircledIcon, ne as Input, k as Label, Bo as LifeBuoy, Q as LogoIcon, Go as Mic, ho as Paperclip, Y as PaypalIcon, z as Progress, ko as Rabbit, d as ResizableHandle, I as ResizablePanel, g as ResizablePanelGroup, ve as ScreenSize, b as ScrollArea, s as ScrollBar, ae as Select, le as SelectContent, ce as SelectGroup, ie as SelectItem, me as SelectLabel, ue as SelectScrollDownButton, fe as SelectScrollUpButton, xe as SelectSeparator, Se as SelectTrigger, de as SelectValue, A as Separator, vo as Settings2, zo as Share, V as Skeleton, _ as SpinnerIcon, Io as SquareIcon, Po as SquareTerminal, Ao as SquareUser, go as StarIcon, ge as Tabs, Ce as TabsContent, be as TabsList, se as TabsTrigger, we as Textarea, Me as Toggle, Ge as ToggleGroup, he as ToggleGroupItem, q as Tooltip, F as TooltipContent, U as TooltipProvider, H as TooltipTrigger, Ro as Triangle, Vo as Turtle, oo as TwitterIcon, Co as TwitterLogoIcon, bo as VercelLogoIcon, G as badgeVariants, Fo as buttonVariants, Fe as cn, Le as toggleVariants, Pe as useSize, Re as useSizeCallback, ye as useWindowSize};
;c.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Apple Icon"
};
v.__docgenInfo = {
    "description": "",
    "methods": []
};
N.__docgenInfo = {
    "description": "",
    "methods": []
};
y.__docgenInfo = {
    "description": "",
    "methods": []
};
c.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Button"
};
N.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Card"
};
y.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "CardContent"
};
C.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "CardDescription"
};
b.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "CardFooter"
};
v.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "CardHeader"
};
u.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "CardTitle"
};
m.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Container"
};
D.__docgenInfo = {
    "description": "",
    "methods": []
};
g.__docgenInfo = {
    "description": "",
    "methods": []
};
x.__docgenInfo = {
    "description": "",
    "methods": []
};
M.__docgenInfo = {
    "description": "",
    "methods": []
};
I.__docgenInfo = {
    "description": "",
    "methods": []
};
R.__docgenInfo = {
    "description": "",
    "methods": []
};
v.__docgenInfo = {
    "description": "",
    "methods": []
};
y.__docgenInfo = {
    "description": "",
    "methods": []
};
c.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Github Icon"
};
c.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Google Icon"
};
s.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Input"
};
f.__docgenInfo = {
    "description": "",
    "methods": []
};
p.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Logo Icon"
};
o.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Paypal Icon"
};
m.__docgenInfo = {
    "description": "",
    "methods": []
};
y.__docgenInfo = {
    "description": "",
    "methods": []
};
s.__docgenInfo = {
    "description": "",
    "methods": []
};
v.__docgenInfo = {
    "description": "",
    "methods": []
};
S.__docgenInfo = {
    "description": "",
    "methods": []
};
x.__docgenInfo = {
    "description": "",
    "methods": []
};
N.__docgenInfo = {
    "description": "",
    "methods": []
};
h.__docgenInfo = {
    "description": "",
    "methods": []
};
I.__docgenInfo = {
    "description": "",
    "methods": []
};
g.__docgenInfo = {
    "description": "",
    "methods": []
};
m.__docgenInfo = {
    "description": "",
    "methods": []
};
p.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Spinner Icon"
};
v.__docgenInfo = {
    "description": "",
    "methods": []
};
p.__docgenInfo = {
    "description": "",
    "methods": []
};
g.__docgenInfo = {
    "description": "",
    "methods": []
};
s.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Textarea"
};
c.__docgenInfo = {
    "description": "",
    "methods": []
};
h.__docgenInfo = {
    "description": "",
    "methods": []
};
j.__docgenInfo = {
    "description": "",
    "methods": []
};
l.__docgenInfo = {
    "description": "",
    "methods": []
};
n.__docgenInfo = {
    "description": "",
    "methods": [],
    "displayName": "Twitter Icon"
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImluZGV4LmpzIl0sInNvdXJjZXNDb250ZW50IjpbIid1c2Ugc3RyaWN0JztcbmltcG9ydHtDYXJkIGFzIHIsQ2FyZENvbnRlbnQgYXMgdCxDYXJkRGVzY3JpcHRpb24gYXMgbixDYXJkRm9vdGVyIGFzIHAsQ2FyZEhlYWRlciBhcyBhLENhcmRUaXRsZSBhcyBsfWZyb21cIi4vY29tcG9uZW50cy9sYXlvdXQvQ2FyZC5qc1wiO2ltcG9ydHtDb2xsYXBzaWJsZSBhcyBpLENvbGxhcHNpYmxlQ29udGVudCBhcyBtLENvbGxhcHNpYmxlVHJpZ2dlciBhcyB1fWZyb21cIi4vY29tcG9uZW50cy9sYXlvdXQvQ29sbGFwc2libGUuanNcIjtpbXBvcnR7Q29udGFpbmVyIGFzIHh9ZnJvbVwiLi9jb21wb25lbnRzL2xheW91dC9Db250YWluZXIuanNcIjtpbXBvcnR7UmVzaXphYmxlSGFuZGxlIGFzIGQsUmVzaXphYmxlUGFuZWwgYXMgSSxSZXNpemFibGVQYW5lbEdyb3VwIGFzIGd9ZnJvbVwiLi9jb21wb25lbnRzL2xheW91dC9SZXNpemFibGUuanNcIjtpbXBvcnR7U2Nyb2xsQXJlYSBhcyBiLFNjcm9sbEJhciBhcyBzfWZyb21cIi4vY29tcG9uZW50cy9sYXlvdXQvU2Nyb2xsQXJlYS5qc1wiO2ltcG9ydHtBdmF0YXIgYXMgdyxBdmF0YXJGYWxsYmFjayBhcyBELEF2YXRhckltYWdlIGFzIE19ZnJvbVwiLi9jb21wb25lbnRzL3ByaW1pdGl2ZS9BdmF0YXIuanNcIjtpbXBvcnR7QmFkZ2UgYXMgQixiYWRnZVZhcmlhbnRzIGFzIEd9ZnJvbVwiLi9jb21wb25lbnRzL3ByaW1pdGl2ZS9CYWRnZS5qc1wiO2ltcG9ydHtMYWJlbCBhcyBrfWZyb21cIi4vY29tcG9uZW50cy9wcmltaXRpdmUvTGFiZWwuanNcIjtpbXBvcnR7UHJvZ3Jlc3MgYXMgen1mcm9tXCIuL2NvbXBvbmVudHMvcHJpbWl0aXZlL1Byb2dyZXNzLmpzXCI7aW1wb3J0e1NlcGFyYXRvciBhcyBBfWZyb21cIi4vY29tcG9uZW50cy9wcmltaXRpdmUvU2VwYXJhdG9yLmpzXCI7aW1wb3J0e1NrZWxldG9uIGFzIFZ9ZnJvbVwiLi9jb21wb25lbnRzL3ByaW1pdGl2ZS9Ta2VsZXRvbi5qc1wiO2ltcG9ydHtUb29sdGlwIGFzIHEsVG9vbHRpcENvbnRlbnQgYXMgRixUb29sdGlwUHJvdmlkZXIgYXMgVSxUb29sdGlwVHJpZ2dlciBhcyBIfWZyb21cIi4vY29tcG9uZW50cy9wcmltaXRpdmUvVG9vbHRpcC5qc1wiO2ltcG9ydHtBcHBsZUljb24gYXMgV31mcm9tXCIuL2NvbXBvbmVudHMvcHJpbWl0aXZlL2ljb25zL0FwcGxlSWNvbi5qc1wiO2ltcG9ydHtHaXRodWJJY29uIGFzIEp9ZnJvbVwiLi9jb21wb25lbnRzL3ByaW1pdGl2ZS9pY29ucy9HaXRodWJJY29uLmpzXCI7aW1wb3J0e0dvb2dsZUljb24gYXMgTn1mcm9tXCIuL2NvbXBvbmVudHMvcHJpbWl0aXZlL2ljb25zL0dvb2dsZUljb24uanNcIjtpbXBvcnR7TG9nb0ljb24gYXMgUX1mcm9tXCIuL2NvbXBvbmVudHMvcHJpbWl0aXZlL2ljb25zL0xvZ29JY29uLmpzXCI7aW1wb3J0e1BheXBhbEljb24gYXMgWX1mcm9tXCIuL2NvbXBvbmVudHMvcHJpbWl0aXZlL2ljb25zL1BheXBhbEljb24uanNcIjtpbXBvcnR7U3Bpbm5lckljb24gYXMgX31mcm9tXCIuL2NvbXBvbmVudHMvcHJpbWl0aXZlL2ljb25zL1NwaW5uZXJJY29uLmpzXCI7aW1wb3J0e1R3aXR0ZXJJY29uIGFzIG9vfWZyb21cIi4vY29tcG9uZW50cy9wcmltaXRpdmUvaWNvbnMvVHdpdHRlckljb24uanNcIjtpbXBvcnR7Q2hlY2tJY29uIGFzIHJvLENoZXZyb25Eb3duSWNvbiBhcyB0byxDaGV2cm9uTGVmdEljb24gYXMgbm8sQ2hldnJvblVwSWNvbiBhcyBwbyxDaXJjbGVJY29uIGFzIGFvLENsaXBib2FyZENvcHlJY29uIGFzIGxvLENvcHlJY29uIGFzIGNvLEN1cnNvckFycm93SWNvbiBhcyBpbyxEaXNjb3JkTG9nb0ljb24gYXMgbW8sRXh0ZXJuYWxMaW5rSWNvbiBhcyB1byxGcmFtZUljb24gYXMgZm8sR2Vhckljb24gYXMgeG8sSW5mb0NpcmNsZWRJY29uIGFzIFNvLFNxdWFyZUljb24gYXMgSW8sU3Rhckljb24gYXMgZ28sVHdpdHRlckxvZ29JY29uIGFzIENvLFZlcmNlbExvZ29JY29uIGFzIGJvfWZyb21cIkByYWRpeC11aS9yZWFjdC1pY29uc1wiO2ltcG9ydHtCaXJkIGFzIFRvLEJvb2sgYXMgd28sQm90IGFzIERvLENvZGUyIGFzIE1vLENvcm5lckRvd25MZWZ0IGFzIExvLExpZmVCdW95IGFzIEJvLE1pYyBhcyBHbyxQYXBlcmNsaXAgYXMgaG8sUmFiYml0IGFzIGtvLFNldHRpbmdzMiBhcyB2byxTaGFyZSBhcyB6byxTcXVhcmVUZXJtaW5hbCBhcyBQbyxTcXVhcmVVc2VyIGFzIEFvLFRyaWFuZ2xlIGFzIFJvLFR1cnRsZSBhcyBWb31mcm9tXCJsdWNpZGUtcmVhY3RcIjtpbXBvcnR7QnV0dG9uIGFzIHFvLGJ1dHRvblZhcmlhbnRzIGFzIEZvfWZyb21cIi4vY29tcG9uZW50cy9wcmltaXRpdmUvaW5wdXQvQnV0dG9uLmpzXCI7aW1wb3J0e0Ryb3Bkb3duTWVudSBhcyBIbyxEcm9wZG93bk1lbnVDaGVja2JveEl0ZW0gYXMgRW8sRHJvcGRvd25NZW51Q29udGVudCBhcyBXbyxEcm9wZG93bk1lbnVHcm91cCBhcyBqbyxEcm9wZG93bk1lbnVJdGVtIGFzIEpvLERyb3Bkb3duTWVudUxhYmVsIGFzIEtvLERyb3Bkb3duTWVudVBvcnRhbCBhcyBObyxEcm9wZG93bk1lbnVSYWRpb0dyb3VwIGFzIE9vLERyb3Bkb3duTWVudVJhZGlvSXRlbSBhcyBRbyxEcm9wZG93bk1lbnVTZXBhcmF0b3IgYXMgWG8sRHJvcGRvd25NZW51U2hvcnRjdXQgYXMgWW8sRHJvcGRvd25NZW51U3ViIGFzIFpvLERyb3Bkb3duTWVudVN1YkNvbnRlbnQgYXMgX28sRHJvcGRvd25NZW51U3ViVHJpZ2dlciBhcyAkbyxEcm9wZG93bk1lbnVUcmlnZ2VyIGFzIG9lfWZyb21cIi4vY29tcG9uZW50cy9wcmltaXRpdmUvaW5wdXQvRHJvcGRvd25NZW51LmpzXCI7aW1wb3J0e0ljb25TZWxlY3QgYXMgcmV9ZnJvbVwiLi9jb21wb25lbnRzL3ByaW1pdGl2ZS9pbnB1dC9JY29uU2VsZWN0LmpzXCI7aW1wb3J0e0lucHV0IGFzIG5lfWZyb21cIi4vY29tcG9uZW50cy9wcmltaXRpdmUvaW5wdXQvSW5wdXQuanNcIjtpbXBvcnR7U2VsZWN0IGFzIGFlLFNlbGVjdENvbnRlbnQgYXMgbGUsU2VsZWN0R3JvdXAgYXMgY2UsU2VsZWN0SXRlbSBhcyBpZSxTZWxlY3RMYWJlbCBhcyBtZSxTZWxlY3RTY3JvbGxEb3duQnV0dG9uIGFzIHVlLFNlbGVjdFNjcm9sbFVwQnV0dG9uIGFzIGZlLFNlbGVjdFNlcGFyYXRvciBhcyB4ZSxTZWxlY3RUcmlnZ2VyIGFzIFNlLFNlbGVjdFZhbHVlIGFzIGRlfWZyb21cIi4vY29tcG9uZW50cy9wcmltaXRpdmUvaW5wdXQvU2VsZWN0LmpzXCI7aW1wb3J0e1RhYnMgYXMgZ2UsVGFic0NvbnRlbnQgYXMgQ2UsVGFic0xpc3QgYXMgYmUsVGFic1RyaWdnZXIgYXMgc2V9ZnJvbVwiLi9jb21wb25lbnRzL3ByaW1pdGl2ZS9pbnB1dC9UYWJzLmpzXCI7aW1wb3J0e1RleHRhcmVhIGFzIHdlfWZyb21cIi4vY29tcG9uZW50cy9wcmltaXRpdmUvaW5wdXQvVGV4dGFyZWEuanNcIjtpbXBvcnR7VG9nZ2xlIGFzIE1lLHRvZ2dsZVZhcmlhbnRzIGFzIExlfWZyb21cIi4vY29tcG9uZW50cy9wcmltaXRpdmUvaW5wdXQvVG9nZ2xlLmpzXCI7aW1wb3J0e1RvZ2dsZUdyb3VwIGFzIEdlLFRvZ2dsZUdyb3VwSXRlbSBhcyBoZX1mcm9tXCIuL2NvbXBvbmVudHMvcHJpbWl0aXZlL2lucHV0L1RvZ2dsZUdyb3VwLmpzXCI7aW1wb3J0e1NjcmVlblNpemUgYXMgdmV9ZnJvbVwiLi9jb21wb25lbnRzL1NjcmVlblNpemUuanNcIjtpbXBvcnR7dXNlU2l6ZSBhcyBQZX1mcm9tXCIuL2hvb2tzL3VzZS1zaXplLmpzXCI7aW1wb3J0e3VzZVNpemVDYWxsYmFjayBhcyBSZX1mcm9tXCIuL2hvb2tzL3VzZS1zaXplLWNhbGxiYWNrLmpzXCI7aW1wb3J0e3VzZVdpbmRvd1NpemUgYXMgeWV9ZnJvbVwiLi9ob29rcy91c2Utd2luZG93LXNpemUuanNcIjtpbXBvcnR7Y24gYXMgRmV9ZnJvbVwiLi91dGlscy9jbi5qc1wiO2V4cG9ydHtXIGFzIEFwcGxlSWNvbix3IGFzIEF2YXRhcixEIGFzIEF2YXRhckZhbGxiYWNrLE0gYXMgQXZhdGFySW1hZ2UsQiBhcyBCYWRnZSxUbyBhcyBCaXJkLHdvIGFzIEJvb2ssRG8gYXMgQm90LHFvIGFzIEJ1dHRvbixyIGFzIENhcmQsdCBhcyBDYXJkQ29udGVudCxuIGFzIENhcmREZXNjcmlwdGlvbixwIGFzIENhcmRGb290ZXIsYSBhcyBDYXJkSGVhZGVyLGwgYXMgQ2FyZFRpdGxlLHJvIGFzIENoZWNrSWNvbix0byBhcyBDaGV2cm9uRG93bkljb24sbm8gYXMgQ2hldnJvbkxlZnRJY29uLHBvIGFzIENoZXZyb25VcEljb24sYW8gYXMgQ2lyY2xlSWNvbixsbyBhcyBDbGlwYm9hcmRDb3B5SWNvbixNbyBhcyBDb2RlMixpIGFzIENvbGxhcHNpYmxlLG0gYXMgQ29sbGFwc2libGVDb250ZW50LHUgYXMgQ29sbGFwc2libGVUcmlnZ2VyLHggYXMgQ29udGFpbmVyLGNvIGFzIENvcHlJY29uLExvIGFzIENvcm5lckRvd25MZWZ0LGlvIGFzIEN1cnNvckFycm93SWNvbixtbyBhcyBEaXNjb3JkTG9nb0ljb24sSG8gYXMgRHJvcGRvd25NZW51LEVvIGFzIERyb3Bkb3duTWVudUNoZWNrYm94SXRlbSxXbyBhcyBEcm9wZG93bk1lbnVDb250ZW50LGpvIGFzIERyb3Bkb3duTWVudUdyb3VwLEpvIGFzIERyb3Bkb3duTWVudUl0ZW0sS28gYXMgRHJvcGRvd25NZW51TGFiZWwsTm8gYXMgRHJvcGRvd25NZW51UG9ydGFsLE9vIGFzIERyb3Bkb3duTWVudVJhZGlvR3JvdXAsUW8gYXMgRHJvcGRvd25NZW51UmFkaW9JdGVtLFhvIGFzIERyb3Bkb3duTWVudVNlcGFyYXRvcixZbyBhcyBEcm9wZG93bk1lbnVTaG9ydGN1dCxabyBhcyBEcm9wZG93bk1lbnVTdWIsX28gYXMgRHJvcGRvd25NZW51U3ViQ29udGVudCwkbyBhcyBEcm9wZG93bk1lbnVTdWJUcmlnZ2VyLG9lIGFzIERyb3Bkb3duTWVudVRyaWdnZXIsdW8gYXMgRXh0ZXJuYWxMaW5rSWNvbixmbyBhcyBGcmFtZUljb24seG8gYXMgR2Vhckljb24sSiBhcyBHaXRodWJJY29uLE4gYXMgR29vZ2xlSWNvbixyZSBhcyBJY29uU2VsZWN0LFNvIGFzIEluZm9DaXJjbGVkSWNvbixuZSBhcyBJbnB1dCxrIGFzIExhYmVsLEJvIGFzIExpZmVCdW95LFEgYXMgTG9nb0ljb24sR28gYXMgTWljLGhvIGFzIFBhcGVyY2xpcCxZIGFzIFBheXBhbEljb24seiBhcyBQcm9ncmVzcyxrbyBhcyBSYWJiaXQsZCBhcyBSZXNpemFibGVIYW5kbGUsSSBhcyBSZXNpemFibGVQYW5lbCxnIGFzIFJlc2l6YWJsZVBhbmVsR3JvdXAsdmUgYXMgU2NyZWVuU2l6ZSxiIGFzIFNjcm9sbEFyZWEscyBhcyBTY3JvbGxCYXIsYWUgYXMgU2VsZWN0LGxlIGFzIFNlbGVjdENvbnRlbnQsY2UgYXMgU2VsZWN0R3JvdXAsaWUgYXMgU2VsZWN0SXRlbSxtZSBhcyBTZWxlY3RMYWJlbCx1ZSBhcyBTZWxlY3RTY3JvbGxEb3duQnV0dG9uLGZlIGFzIFNlbGVjdFNjcm9sbFVwQnV0dG9uLHhlIGFzIFNlbGVjdFNlcGFyYXRvcixTZSBhcyBTZWxlY3RUcmlnZ2VyLGRlIGFzIFNlbGVjdFZhbHVlLEEgYXMgU2VwYXJhdG9yLHZvIGFzIFNldHRpbmdzMix6byBhcyBTaGFyZSxWIGFzIFNrZWxldG9uLF8gYXMgU3Bpbm5lckljb24sSW8gYXMgU3F1YXJlSWNvbixQbyBhcyBTcXVhcmVUZXJtaW5hbCxBbyBhcyBTcXVhcmVVc2VyLGdvIGFzIFN0YXJJY29uLGdlIGFzIFRhYnMsQ2UgYXMgVGFic0NvbnRlbnQsYmUgYXMgVGFic0xpc3Qsc2UgYXMgVGFic1RyaWdnZXIsd2UgYXMgVGV4dGFyZWEsTWUgYXMgVG9nZ2xlLEdlIGFzIFRvZ2dsZUdyb3VwLGhlIGFzIFRvZ2dsZUdyb3VwSXRlbSxxIGFzIFRvb2x0aXAsRiBhcyBUb29sdGlwQ29udGVudCxVIGFzIFRvb2x0aXBQcm92aWRlcixIIGFzIFRvb2x0aXBUcmlnZ2VyLFJvIGFzIFRyaWFuZ2xlLFZvIGFzIFR1cnRsZSxvbyBhcyBUd2l0dGVySWNvbixDbyBhcyBUd2l0dGVyTG9nb0ljb24sYm8gYXMgVmVyY2VsTG9nb0ljb24sRyBhcyBiYWRnZVZhcmlhbnRzLEZvIGFzIGJ1dHRvblZhcmlhbnRzLEZlIGFzIGNuLExlIGFzIHRvZ2dsZVZhcmlhbnRzLFBlIGFzIHVzZVNpemUsUmUgYXMgdXNlU2l6ZUNhbGxiYWNrLHllIGFzIHVzZVdpbmRvd1NpemV9O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7In0=

Create a reproduction

No response

[bennoinbeta]

Resolved for now by setting reactDocgen to false in the Storybook TypeScript configuration:

const config = {
    stories: [/* .. */],
    typescript: {
        reactDocgen: false
    },
};

This workaround addresses an issue with React Docgen's handling of components in monorepos or those aggregated through an index.ts file. Reference: Storybook TypeScript Configuration.