[Bug]: Error when parsing a file that renames named imports via the `as` keyword

[doytch]

Describe the bug

In some of my stories I import from an index.ts file as so:

import { Button, Chip } from '..';

That path points to a directory containing an index.ts file. It is structured a la

import Button from './Button/Button';
import Chip from './Chip/Chip';
import Dialog, { Content as DialogContent } from './Dialog/Dialog';
...

export {
  Button,
  Chip,
  Dialog,
  DialogContent,
  ...
}

In SB v7.0.21, everything worked fine. In SB v7.6.10, when viewing a story that imports from that index.ts file, an error and stacktrace is rendered rather than the story. The error is a ReferenceError: Content is not defined. Note that this error occurs if I merely import anything from the index.ts, not necessarily the component that was renamed (DialogContent in the above example).

If I rewrite my index.ts without the as, everything works. Eg,

import Dialog, { Content } from './Dialog/Dialog';
const DialogContent = Content;
export { ... DialogContent }

I don't see any issue with what I'm doing using an as, so perhaps some parser changed in the interim?

To Reproduce

No response

System

Storybook Environment Info:

  System:
    OS: macOS 14.2.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn <----- active
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
  Browsers:
    Chrome: 120.0.6099.234
    Safari: 17.2.1
  npmPackages:
    @storybook/addon-a11y: ^7.6.10 => 7.6.10
    @storybook/addon-actions: ^7.6.10 => 7.6.10
    @storybook/addon-controls: ^7.6.10 => 7.6.10
    @storybook/addon-docs: ^7.6.10 => 7.6.10
    @storybook/addon-links: ^7.6.10 => 7.6.10
    @storybook/addon-storysource: ^7.6.10 => 7.6.10
    @storybook/addon-styling: ^1.3.7 => 1.3.7
    @storybook/addons: ^7.6.10 => 7.6.10
    @storybook/preset-scss: ^1.0.3 => 1.0.3
    @storybook/react: ^7.6.10 => 7.6.10
    @storybook/react-webpack5: ^7.6.10 => 7.6.10
    @storybook/theming: ^7.6.10 => 7.6.10
    apollo-storybook-react: ^0.2.4 => 0.2.4
    chromatic: ^7.5.0 => 7.5.0
    eslint-plugin-storybook: ^0.6.12 => 0.6.12
    storybook: ^7.6.10 => 7.6.10
    storybook-addon-apollo-client: ^4.1.4 => 4.1.4

Additional context

No response

[shilman]

Do you a have a reproduction repo you can share? If not, can you create one? Go to https://storybook.new or see repro docs. Thank you! 🙏

[saravanan10393]

We also faced the same. The problem is Re-Exporting the Aliased the import DialogContent. Try this instead, it worked for us.

import Button from './Button/Button';
import Chip from './Chip/Chip';
import Dialog from './Dialog/Dialog';
...
export {Content as DialogContent} from "./Dialog/Dialog";

While it works, we also see something needs to be corrected in the code itself. If things are exported from Dialog component. it should be exported as DialogContent from source itself instead of exporting as Content.

We have asked our developers try not to modify using alised import. If needed use the above mentioned convention.

[github-actions[bot]]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions[bot]]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.