nuxt: Memory Leak on route navigation

I often regret interim updates, but - 🤷 - my current hypothesis is that this is an issue with <Suspense> + <Transition> preserving the context in the pending branch, meaning every click handler (for example) preserves a reference to potentially thousands of removed DOM nodes.

Having entirely disabled <NuxtPage> and <NuxtLayout> in the Nuxt Movies project, I still get the behaviour with the following template. (If you want to replicate, you will also need to swap out the auto-imports of useRoute and useRouter to be from vue-router for as pure a Vue experience as possible).

<template>
  <div>
    <RouterView v-slot="{ Component }">
      <template v-if="Component">
        <Transition mode="out-in">
          <Suspense>
            <component :is="Component" />
          </Suspense>
        </Transition>
      </template>
    </RouterView>
  </div>
</template>

https://vuejs.org/guide/built-ins/suspense.html#combining-with-other-components

Removing <Transition>, either from the template above, or if using NuxtPage, via app.pageTransition and app.layoutTransition greatly reduces the issue in my testing (that is, in the Nuxt Movies repro, decreases leak from 1.7Mb per navigation to 70Kb). Nevertheless, there are still some preserved detached DOM nodes from the pending state of <Suspense> , which suggests that the real core issue here is coming from <Suspense>.

The next step is likely to attempt to reproduce using Vue without Nuxt to confirm my hypothesis.

Possible causes I’ve ruled out:

• NuxtLink’s intersection observer implementation
• NuxtLayout
• NuxtPage and page progress hooks
• useHead

Gotcha, got a pretty tight schedule today unfortunately but should I get to it I’ll post it here. Enjoy family time and the rest of your sunday!

We are also struggling with terrible memory leaks. At some point the service crashes and is being restarted.

Discord Thread: https://discord.com/channels/473401852243869706/1204168609547427870