[Bug]: Storybook and Radix-vue memory leak

[dragos199993]

Environment

Developement/Production OS:  macOS 14.4.1
Node version: 20.12.2
Package manager: npm@10.5.0
Radix Vue version: 1.6.2
Vue version: 3.4.21
CSS framework: tailwindcss@3.4.3
Client OS: macOS 14.4.1
Browser: Chrome Version 124.0.6367.92 (Official Build) (arm64)

Link to minimal reproduction

http://nolink

Steps to reproduce

• Scaffold new vue 3 app with vite
• Add radix-vue with shadcn-vue
• Initialize storybook
• Try to render the DropdownMenuContent

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 radix-vue issue!

Expected behavior

To render DropdownMenuContent correctly without a memory leak.

Context & Screenshots (if applicable)

Opened a bug as well on storybook repository, but unfortunately got no response.
storybookjs/storybook#26935

[zernonia]

@dragos199993 have you tried changing the storybook major version to either latest or v7.6.19 maybe?

[dragos199993]

🤔 only used the latest one (8.0.10). Do you suggest to switch to an older one?

[zernonia]

Yeah. Let's give it a try. Also seems like there's another latest 8.0.10

[dragos199993]

ah apologies, just edited the previous comment 😆 using 8.0.10. I'll give a try with an older one rn

[dragos199993]

unfortunately no luck, I suspect this has something to do with vue-component-meta. While I was doing the debug on v8+ storybook, noticed that I get the same error. Now after changing to latest v7, I always get this 🤔

I am confused since this is happening on an extremely simple project, just started and it seems to be a type import issue somehow🤷

10:25:25 AM [vite] Internal server error: ENOENT: no such file or directory, open '../../../node_modules/radix-vue/dist/index.js'

[zernonia]

Try remove the Prop/Emit types, as well as useForwardEmits/useForwardPropsEmits and see?

[dragos199993]

unfortunately no luck 😢 tried with both v7 and v8 storybook
I suspected also that when the dropdown gets mounted via teleport it gets confused by having 2 body elements, so I tried to change the target of the DropdownMenuContent, but no luck as well

[dragos199993]

Maybe this helps, but I created from scratch another example here https://github.com/dragos199993/radix-vue-storybook-memory-leak

Just npm install and then npm run storybook

[zernonia]

@dragos199993 might be your local machine/browser issue. Running locally and on Stackblitz has no issue. Do follow this up on the Storybook issue yaa 😁

[dragos199993]

indeed, it eventually loads, but the memory leak issue is still there. This is not normal behaviour and it's happening only in radix-vue context.

[Halceyon]

unfortunately no luck 😢 tried with both v7 and v8 storybook I suspected also that when the dropdown gets mounted via teleport it gets confused by having 2 body elements, so I tried to change the target of the DropdownMenuContent, but no luck as well

Just a quick question, are you perhaps developing in a container? As I had this exact issue when developing in a dev-container. When I ran this locally on my desktop, I had no issue.