[Bug]: Infinite Loading State When Using Dynamic Import Between Storybook Files

[yuheiy]

Describe the bug

In my project, I are using two different configurations of Storybook. One configuration uses the [name].stories.tsx file, while the other uses [name].test.stories.tsx. I encountered an issue when trying to dynamically import stories from [name].stories.tsx into [name].test.stories.tsx. While everything works fine during development, the build process results in an infinite loading state for the pages where this dynamic import is used.

Reproduction link

https://github.com/yuheiy/storybook-issue-infinite-loading-state-when-using-dynamic-import-between-storybook-files

Reproduction steps

1. Set up a project with two Storybook configurations:
   • One using [name].stories.tsx file.
   • Another using [name].test.stories.tsx file.
2. Use dynamic import in the [name].test.stories.tsx to load stories from [name].stories.tsx.

Button.stories.ts:

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  title: 'Button',
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

Button.test.stories.ts:

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';

const meta = {
  title: 'Button',
  component: Button,
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  ...(await import('./Button.stories')).Primary,
};

System

Storybook Environment Info:

  System:
    OS: macOS 14.5
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.13.1 - ~/.nvm/versions/node/v20.13.1/bin/node
    npm: 10.5.2 - ~/.nvm/versions/node/v20.13.1/bin/npm <----- active
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 17.5
  npmPackages:
    @storybook/react: ^8.1.11 => 8.1.11 
    @storybook/react-vite: ^8.1.11 => 8.1.11 
    storybook: ^8.1.11 => 8.1.11

Additional context

• The issue occurs only when using dynamic import. Static imports do not cause this issue.
• The problem arises specifically when importing story files associated with a different Storybook configuration. For example, importing from [name].stories.tsx to [name].stories.tsx or from [name].test.stories.tsx to [name].test.stories.tsx does not cause any issues.
• The issue is not present during development but only appears after the build process.