[Bug]: @storybook/addon-controls break some stories about storybook HOT 5 OPEN

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:

from storybook.

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

from storybook.

Also - using TypeScript, Webpack 5 and Babel here + the storybook nextjs framework

from storybook.

I've narrowed it down to be happening for the following scenario:

1. @storybook/addon-essentials are added to main.ts and either controls or docs are NOT set to false (they are enabled). Disabling both of these will fix the issue
2. A simple Story that is importing a component/function from an index file with other imports that are unused, e.g.

import 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;

from storybook.

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.

from storybook.