vuetifyjs / nuxt-module

Zero-config Nuxt Module for Vuetify
https://nuxt.vuetifyjs.com/
MIT License
225 stars 22 forks source link

VDialog - Memory Leak with SSR #282

Open SparkDragon opened 1 month ago

SparkDragon commented 1 month ago

Environment

Description

Using "v-dialog" component causes memory leaks with Nuxt SSR.

Reproduction case

  1. Create a new nuxt project: yarn dlx nuxi@latest init test
  2. Add vuetify-nuxt-module: yarn nuxi@latest module add vuetify-nuxt-module
  3. Edit app.vue content:
    
    <template>
    <div>
    <NuxtRouteAnnouncer />
    <NuxtWelcome />
    <v-dialog v-model="open">
      Hello world!
    </v-dialog>
    </div>
    </template>

4. Build the application: `yarn build`
5. Run with inspector: `node --expose-gc --inspect .output/server/index.mjs`
6. Go to [http://localhost:3000](http://localhost:3000) with Google Chrome
7. Open dev console (F12)
8. Click on the node icon "Open dedicated DevTools for Node.js" on the top of the DevTools
9. Take a snapshot
10. Reload the page multiple times (10 times in my case) and wait a moment to let Nuxt clear memory
11. Take a snapshot and compare with previous one

The property "Object" went from 4 846 852 bytes to 7 564 180 bytes and I can see there are a lot of new "v-dialog" objects which are not deleted. The more I wait, the more there are new "v-dialog" in memory (even without refreshing the page).
After several minutes, it was more than 20 Mbytes.

Here is a screenshot of the snapshot.
![image](https://github.com/user-attachments/assets/5b0ba7d5-8deb-4502-acab-bcc63b2a3fbd)

I've created a new project to isolate the issue, but I encountered the same problem with a real app, and with other vuetify components.

Any idea ?