Open hanshank opened 4 months ago
These error messages aren't very helpful either. Complaining about Modal being undefined, and I can't even see a reference to Modal in the file it claims the error is in:
UPDATE: I've looked into the barrel imports (using index.js to re-export modules), and it seems to be causing issues when @storybook/addon-controls
is enabled. Even though the story only uses certain modules that are re-exported in those index.js files, I'm wondering if react-docgen scans all the other imported modules too and then somehow errors out down the line. I've tried following the import trails, but I can't even get to the file the screenshot above is claiming has an undefined modal.
It's just super weird, cause everything works fine when @storybook/addon-controls
or @storybook/addon-essentials
are not enabled
Also - using TypeScript, Webpack 5 and Babel here + the storybook nextjs framework
I've narrowed it down to be happening for the following scenario:
controls
or docs
are NOT set to false (they are enabled). Disabling both of these will fix the issueimport React from 'react';
import TestComponent from '@/src/components/TestComponent'; // imports from barrel file (index.tsx)
export default {
component: TestComponent,
};
export const CoolStory = (args) => <TestComponent {...args} />;
CoolStory.args = {
text: 'Hello',
};
And the @/src/components/TestComponent
import from the index.tsx file:
import AnotherModule from "../AnotherModule"; // this is not utilized or explicitly imported, but I think react-docgen analyzes it which causes the undefined module error???
import TestComponent from './TestComponent';
export { AnotherModule };
export default TestComponent;
I haven't heard of this issue before. One thing you can try is to turn off docgen in .storybook/main.js
:
// .storybook/main.js
export default {
typescript: { reactDocgen: false }
}
This means that you will not get autogenerated controls, but if you still want docs/controls it could be a workaround.
If you can create a reproduction at https://storybook.new or see repro docs it might be possible for somebody from the team to debug what's going on.
Describe the bug
Working on a Storybook application for a large corporation and we are trying to upgrade from Storybook v6 to v7. I have already gotten rid of the old addon-knobs library in favor of @storybook/addon-controls before the migration. The issue I'm seeing is with one specific story file and I can't for the life of me figure out what's going on. The story works perfect when I don't add @storybook/addon-controls inside of the addons array in main.js. As soon as adding it, I see some error about
Modal is undefined
, Modal being a component that is not even imported in my Story. I've noticed that for some broken stories I can fix them by converting certain barrel imports (using index.js files for re-exporting modules) into importing from each separate module.I'm stumped at this point. I've tried downgrading to earlier minor versions of Storybook, switched to @storybook/addon-essentials - I just don't get what the issue could be.
Here's storybook/main.js:
To Reproduce
I can't share the repo since it's for my work - But hoping this is a common issue with @storybook/addon-controls
System
Additional context
No response