[Bug]: Importing anything that contains a word raw in NextJS+Storybook project from ant-design makes every other import null

[11bit]

Describe the bug

There is a weird bug that happens in a project with latest NextJS 14 + Stroybook + Ant-Design. In Next everything works as expected but when I am trying to run storybook some imports from Ant-Design do not work. For instance this code works when I run NextJS server and doesn't work in Storybook (Drawer is null):

import { Drawer } from 'antd'

export default function Page() {
  return (
    <>
      <Drawer>test</Drawer>
    </>
  );
}

After some experimenting I found that problem arise only with ant-design components that have the word raw in them. So, importing Button works but Drawer doesn't.

Note:

1. I am using transpilePackages and optimizePackageImports to make ant-design work with NextJS. So probably bug is somewhere in @storybook/nextjs
2. Bug is reproducible with a few other packages. For instance rxjs. Maybe this is because of the next's internal optimizations for these packages
3. Everything works well with NextJS 13

To Reproduce

Reproduction repository

Here I:

1. Installed nextjs, Storybook, Ant-Desigin
2. Added transpiration options for ant-design to next.config.mjs
3. Created a test story. It doesn't work until Drawer is removed

System

System:
    OS: macOS 14.4.1
    CPU: (12) arm64 Apple M3 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 21.7.3 - ~/.asdf/installs/nodejs/21.7.3/bin/node
    Yarn: 1.22.22 - ~/.asdf/installs/nodejs/21.7.3/bin/yarn
    npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm <----- active
    pnpm: 9.0.6 - ~/.asdf/installs/nodejs/21.7.3/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.93
    Safari: 17.4.1
  npmPackages:
    @storybook/addon-essentials: ^8.0.9 => 8.0.9
    @storybook/addon-interactions: ^8.0.9 => 8.0.9
    @storybook/addon-links: ^8.0.9 => 8.0.9
    @storybook/addon-onboarding: ^8.0.9 => 8.0.9
    @storybook/addon-webpack5-compiler-babel: ^3.0.3 => 3.0.3
    @storybook/blocks: ^8.0.9 => 8.0.9
    @storybook/nextjs: ^8.0.9 => 8.0.9
    @storybook/react: ^8.0.9 => 8.0.9
    @storybook/test: ^8.0.9 => 8.0.9
    storybook: ^8.0.9 => 8.0.9

Additional context

Error screenshot, but it just says that all imports from ant-design are empty:

[seanparmelee]

We started seeing similar when trying to upgrade to Storybook 8 (presumably because it automatically uses SWC now, which we weren't using before) where the only stories that aren't rendering are those for our LeftNavDrawer component (which is built from MUI's Drawer component).

Your mention of the import needing to contain "raw" led me to this webpack rule. Out of curiosity, I programmatically removed that rule as part of our webpackFinal config and the LeftNavDrawer stories starting working again.

It seems this rule is probably interfering with the __barrel_optimize__? imports that SWC creates as part of the optimizePackageImports (ex: "__barrel_optimize__?names=Box,Button,Divider,Drawer,List,useMediaQuery,useTheme!=!./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected]__@emotion+style_6tay2ra76drsmamcoqb5ygip6u/node_modules/@mui/material/index.js).

[11bit]

Seems to be a promising direction. Removing this rule from storybook's web pack config fixes the build indeed. Thanks for finding this!

[11bit]

Thank you @seanparmelee!