[Bug]: Storybook and Radix-vue memory leak
dragos199993 opened this issue · comments
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
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
@dragos199993 have you tried changing the storybook major version to either latest or v7.6.19 maybe?
🤔 only used the latest one (8.0.10). Do you suggest to switch to an older one?
Yeah. Let's give it a try. Also seems like there's another latest 8.0.10
ah apologies, just edited the previous comment 😆 using 8.0.10. I'll give a try with an older one rn
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'
Try remove the Prop/Emit types, as well as useForwardEmits/useForwardPropsEmits and see?
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
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
@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 😁
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.
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.
There is definetely a memory leak wtih SB 8.1.9 in vite/vue mode. I constantly get FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed error and crash.