#nuxt dev - memory leak - due @nuxtjs/tailwindcss

1 messages · Page 1 of 1 (latest)

vagrant bone
#

when i'm working with nuxt dev suddenly it crashes, i tried with passing --max-old-space-size=4096

i can't track what is causing this, guide me how can i help myself and community

  • best regards

here are my dependencies,

  "devDependencies": {
    "@antfu/eslint-config": "^0.40.0",
    "@faker-js/faker": "^8.0.2",
    "@formkit/auto-animate": "^0.7.0",
    "@neshan-maps-platform/vue3-openlayers": "^1.0.6",
    "@nuxt/devtools": "latest",
    "@nuxtjs/eslint-config-typescript": "^12.0.0",
    "@nuxtjs/eslint-module": "^4.1.0",
    "@nuxtjs/fontaine": "^0.4.1",
    "@nuxtjs/tailwindcss": "^6.8.0",
    "@pinia/nuxt": "^0.4.11",
    "@sfxcode/nuxt-primevue": "^1.3.4",
    "@storybook-vue/nuxt": "rc",
    "@storybook-vue/nuxt-storybook": "rc",
    "@storybook/addon-essentials": "next",
    "@storybook/addon-interactions": "next",
    "@storybook/addon-links": "next",
    "@storybook/blocks": "next",
    "@storybook/builder-vite": "next",
    "@storybook/testing-library": "^0.2.0",
    "@storybook/vue3": "next",
    "@storybook/vue3-vite": "^7.4.0",
    "@studio-freight/lenis": "^1.0.23",
    "@types/lodash": "^4.14.197",
    "@types/node": "^18.17.5",
    "@types/three": "^0.155.0",
    "@vue-macros/nuxt": "^1.4.1",
    "@vueuse/core": "^10.3.0",
    "@vueuse/nuxt": "^10.3.0",
    "autoprefixer": "^10.4.15",
    "eslint": "^8.46.0",
    "gsap": "^3.12.2",
    "lodash": "^4.17.21",
    "nuxt": "^3.6.3",
    "nuxt-svgo": "^3.4.0",
    "pinia": "^2.1.6",
    "postcss": "^8.4.29",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sass": "^1.64.1",
    "storybook": "next",
    "storybook-addon-sass-postcss": "^0.1.3",
    "three": "^0.155.0",
    "vue-composable": "^1.0.0-beta.24",
    "vue3-persian-datetime-picker": "^1.2.2"
  }
image.png
empty stream
#

The dependencies alone won't help debugging this, I suggest either sending or checking yourself the code in the page/component where this is occuring

vagrant bone
vagrant bone
#

@empty stream

empty stream
#

What do I need to test it

vagrant bone
empty stream
#

I see

#

Well, the md sure is passive aggressive

vagrant bone
#

😬 forgive my bad attitude

#

i'm frustrated over this

empty stream
#

Well, HMR does take some resources, why do you need to update 500 times with 0.05 seconds per update?

vagrant bone
#

to simulate a heavy page i suspect it doesn't matter as in develompent i see a crash on 23 or so update

empty stream
#

What if you try

#

Just an empty template

#

No components no nothing

#

I have a sneaking suspicion that in your current repro you're just writing a memory leak

vagrant bone
#

but in the component nothing is being registered or retained so ...

empty stream
vagrant bone
#

i've tested it with 0.5 second and the button does crash, template? never crashes

but button is just consisted of computed and css v-bind

empty stream
#

So we now know it's something to do with the button rather than the whole page

#

I'm gonna run some tests here and get back to you

vagrant bone
#

thank u ❤️

empty stream
#

Hmm

#

Looks like npm is struggling a bit on my machine

#

What I can recommend you

#

Is try to strip away all the code from the button

#

Just have like

#

A basic design

#

And see which part you add

#

That causes the memory leak

vocal peak
#

react, react-dom

why though

vagrant bone
#

@vocal peak @empty stream i reduced it to @nuxt/tailwind
when style is directly imported into component the problem happens

#

leak can be prevented by not importing style/global.scc inside the component but why? (see line 52 in KButton)

vocal peak
#

Nice catch

#

You should make an issue on the GitHub repo 🙂

vagrant bone
meager frigate
#

Hi, lets discuss your issue here for quick triage 🙂

#

For ideal setup and usage of Tailwind in your project, first thing I'd recommend is keeping your custom styles apart from Tailwind, so you can remove the @tailwind directives in your global.scss and also your tailwindcss.cssPath - let the module handle that using PostCSS

vagrant bone
#

nuxt dev - memory leak - due @nuxtjs/tailwindcss