Memory leak when loading vuetify via nuxt plugin

[tobiasklemp]

Environment

• Operating System: Darwin
• Node Version: v16.13.2
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: css, build, vite
• Runtime Modules: -
• Build Modules: -

Reproduction

Clone this minimal starter project:
https://github.com/CodyBontecou/nuxt3-and-vuetify

do a

yarn 
yarn build

Then run the build with

node --expose-gc --inspect .output/server/index.mjs

Open the devtools and watch the memory tab.

I used k6 to run a small load test against my project:

import http from 'k6/http'
import { sleep } from 'k6'

export const options = {
  stages: [
    { duration: '20s', target: 100 }, // simulate ramp-up of traffic from 1 to 100 users over 5 minutes.
    { duration: '20s', target: 100 }, // stay at 100 users for 10 minutes
    { duration: '20s', target: 0 }, // ramp-down to 0 users
  ],
}

const BASE_URL = 'http://localhost:3000'

export default () => {
  http.get(`${BASE_URL}`)
  sleep(1)
}

Describe the bug

After running the test, about 160 mb of ram get stuck, indicating that something is leaking. After some investigation it appears to be related with the usage of the head composable in combination with a computed value outside of a component context.

This is the relevant code, which is causing the leak:

// node_modules/vuetify/lib/composables/theme.mjs
function install(app) {
    const head = app._context.provides.usehead;
    if (head) {
      head.addHeadObjs(computed(() => {
        const style = {
          children: styles.value,
          type: 'text/css',
          id: 'vuetify-theme-stylesheet'
        };
        if (parsedOptions.cspNonce) style.nonce = parsedOptions.cspNonce;
        return {
          style: [style]
        };
      }));
      if (IN_BROWSER) {
        watchEffect(() => head.updateDOM());
      }
    } else {
      let styleEl = IN_BROWSER ? document.getElementById('vuetify-theme-stylesheet') : null;
      watch(styles, updateStyles, {
        immediate: true
      });
      function updateStyles() {
        if (parsedOptions.isDisabled) return;
        if (typeof document !== 'undefined' && !styleEl) {
          const el = document.createElement('style');
          el.type = 'text/css';
          el.id = 'vuetify-theme-stylesheet';
          if (parsedOptions.cspNonce) el.setAttribute('nonce', parsedOptions.cspNonce);
          styleEl = el;
          document.head.appendChild(styleEl);
        }
        if (styleEl) styleEl.innerHTML = styles.value;
      }
    }
  }

I found this issue which also indicates that this is a problem, but I don't know how i would be able to use vuetify during ssr.

Additional context

No response

Logs

No response

[danielroe]

This sounds like it might be an issue for the vuetify team to have a look at.

[harlan-zw]

This isn't specific to Nuxt and there already exists an issue on the Vuetify repo (vuetifyjs/vuetify#16156).

I've put the likely problem on that issue and will leave for them to fix.

Will close this issue