Skip to content

[Bug]: Storybook and Radix-vue memory leak #26935

@dragos199993

Description

@dragos199993

Describe the bug

Started a vue app from scratch and added strybook 8.0.9 and Radix-vue with shadcn-vue. When I try to render a component into a story DropdownMenuContent and open storybook with npm run storybook, it fails to render and it freezes the browser. It crashes the app after 30s-1min with a FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory error.

What I tried:

  • bumped the space size for NODE using --max-old-space-size=32768
  • duplicated vite.config.js into storybook, then pointed via main.ts to the colocated one, just to exclude random configurations from there
  • sourceMap: false from viteFinal within main.ts in .storybook

Apologies if this isn't really a storybook issue, but it happens only in storybook context.

To Reproduce

  1. Scaffold new vue 3 app with vite
  2. Add radix-vue with shadcn-vue
  3. Initialize storybook
  4. Try to render the DropdownMenuContent

System

Storybook Environment Info:

  System:
    OS: macOS 14.4.1
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm <----- active
    pnpm: 8.15.4 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 124.0.6367.62
    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/blocks: ^8.0.9 => 8.0.9 
    @storybook/test: ^8.0.9 => 8.0.9 
    @storybook/vue3: ^8.0.9 => 8.0.9 
    @storybook/vue3-vite: ^8.0.9 => 8.0.9 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.0.9 => 8.0.9

Additional context

I suspect this is an issue with typescript. I localised the issue and it happens when I import a type within DropdownMenuContent.
image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions