N
Nuxt4d ago
Mads

Typescript intellisense extremely slow

Hi I am experiencing extremely slow (sometimes not working) typescript Intellisense. The issue occurs in both VSCode and Zed. It seems to be Nuxt specific. Small Nuxt projects work fine. I'm on Macbook M3 Max with 48GB Ram. Not really sure how to debug. This is my package.json:
"dependencies": {
"@anthropic-ai/sdk": "^0.36.3",
"@aws-sdk/client-s3": "^3.744.0",
"@aws-sdk/s3-presigned-post": "^3.744.0",
"@aws-sdk/s3-request-presigner": "^3.744.0",
"@iconify-json/heroicons": "^1.2.2",
"@iconify-json/simple-icons": "^1.2.24",
"@nuxt/eslint": "1.0.1",
"@nuxt/fonts": "^0.10.3",
"@nuxt/icon": "^1.10.3",
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui@3356",
"@planetscale/database": "^1.19.0",
"@sentry/nuxt": "^8.54.0",
"@sindresorhus/slugify": "^2.2.1",
"@uppy/aws-s3": "^4.2.3",
"@uppy/core": "^4.4.2",
"@uppy/dashboard": "^4.3.1",
"@uppy/drag-drop": "^4.1.1",
"@uppy/file-input": "^4.1.1",
"@uppy/image-editor": "^3.3.0",
"@uppy/locales": "^4.5.1",
"@uppy/progress-bar": "^4.2.1",
"@uppy/vue": "^2.1.1",
"@vuepic/vue-datepicker": "^11.0.1",
"@vueuse/core": "^12.5.0",
"@vueuse/nuxt": "^12.5.0",
"@xstate/store": "^2.6.2",
"@xstate/vue": "^4.0.2",
"better-auth": "1.1.17-beta.3",
"date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0",
"drizzle-kit": "0.30.4",
"drizzle-orm": "^0.39.2",
"drizzle-zod": "^0.7.0",
"immer": "^10.1.1",
"jose": "^5.9.6",
"mysql2": "^3.12.0",
"nuxt": "^3.15.4",
"playwright-core": "^1.48.1",
"simple-crypto-js": "^3.0.1",
"ts-results-es": "^5.0.0",
"use-email": "^0.0.8",
"v-calendar": "^3.1.2",
"vue": "latest",
"vue-sonner": "^1.3.0",
"vuedraggable": "^4.1.0",
"xstate": "^5.19.2",
"zod": "^3.24.1"
},
"devDependencies": {
"@playwright/test": "^1.48.1",
"eslint": "^9.20.0",
"typescript": "^5.7.3",
"vue-tsc": "^2.2.0"
}
"dependencies": {
"@anthropic-ai/sdk": "^0.36.3",
"@aws-sdk/client-s3": "^3.744.0",
"@aws-sdk/s3-presigned-post": "^3.744.0",
"@aws-sdk/s3-request-presigner": "^3.744.0",
"@iconify-json/heroicons": "^1.2.2",
"@iconify-json/simple-icons": "^1.2.24",
"@nuxt/eslint": "1.0.1",
"@nuxt/fonts": "^0.10.3",
"@nuxt/icon": "^1.10.3",
"@nuxt/ui-pro": "https://pkg.pr.new/@nuxt/ui@3356",
"@planetscale/database": "^1.19.0",
"@sentry/nuxt": "^8.54.0",
"@sindresorhus/slugify": "^2.2.1",
"@uppy/aws-s3": "^4.2.3",
"@uppy/core": "^4.4.2",
"@uppy/dashboard": "^4.3.1",
"@uppy/drag-drop": "^4.1.1",
"@uppy/file-input": "^4.1.1",
"@uppy/image-editor": "^3.3.0",
"@uppy/locales": "^4.5.1",
"@uppy/progress-bar": "^4.2.1",
"@uppy/vue": "^2.1.1",
"@vuepic/vue-datepicker": "^11.0.1",
"@vueuse/core": "^12.5.0",
"@vueuse/nuxt": "^12.5.0",
"@xstate/store": "^2.6.2",
"@xstate/vue": "^4.0.2",
"better-auth": "1.1.17-beta.3",
"date-fns": "^4.1.0",
"date-fns-tz": "^3.2.0",
"drizzle-kit": "0.30.4",
"drizzle-orm": "^0.39.2",
"drizzle-zod": "^0.7.0",
"immer": "^10.1.1",
"jose": "^5.9.6",
"mysql2": "^3.12.0",
"nuxt": "^3.15.4",
"playwright-core": "^1.48.1",
"simple-crypto-js": "^3.0.1",
"ts-results-es": "^5.0.0",
"use-email": "^0.0.8",
"v-calendar": "^3.1.2",
"vue": "latest",
"vue-sonner": "^1.3.0",
"vuedraggable": "^4.1.0",
"xstate": "^5.19.2",
"zod": "^3.24.1"
},
"devDependencies": {
"@playwright/test": "^1.48.1",
"eslint": "^9.20.0",
"typescript": "^5.7.3",
"vue-tsc": "^2.2.0"
}
Any ideas on how I debug this?
No description
8 Replies
kapa.ai
kapa.ai4d ago
Hi @Mads. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in your question and the knowledge sources available, I can offer some insights and suggestions regarding the slow TypeScript IntelliSense issue you're experiencing with your Nuxt project. 1. Vue-tsc version compatibility: There's a known issue with vue-tsc version 2 and Nuxt 3. As mentioned in the Nuxt documentation PR, Nuxt 3 doesn't work with vue-tsc version 2. You're currently using "vue-tsc": "^2.2.0" in your devDependencies, which could be causing the slow IntelliSense. To resolve this, try downgrading vue-tsc to version 1.x. You can update your package.json to use:
"vue-tsc": "^1.8.22"

"vue-tsc": "^1.8.22"

Then run your package manager's install command to update the dependency. 2. TypeScript version: You're using TypeScript version 5.7.3, which is quite recent. Sometimes, the latest versions can have performance issues. You might want to try using a slightly older, more stable version like 5.4.x or 5.5.x. 3. Project size and complexity: You mentioned that small Nuxt projects work fine, but larger ones have issues. This suggests that the problem might be related to the project's size and complexity. Nuxt generates type definitions automatically, which can become quite large in bigger projects. 4. Debugging steps: To further debug the issue, you can try the following: a. Enable TypeScript performance tracing: Add "traceResolution": true to your tsconfig.json file's compilerOptions. This will generate logs that can help identify bottlenecks. b. Use the Nuxt DevTools: As mentioned in the Nuxt debugging documentation, you can use the Nuxt DevTools to get more insights into your application's performance. c. Check for circular dependencies: Sometimes, circular dependencies can cause TypeScript to slow down. Review your import statements and try to eliminate any circular references. d. Optimize your tsconfig.json: Ensure that your tsconfig.json is properly configured. You might want to review the Nuxt TypeScript documentation for recommended settings. 5. Consider using Volar: If you're using VSCode, make sure you're using the Volar extension for Vue 3 projects, as it generally provides better performance than the older Vetur extension. If these steps don't resolve the issue, you might want to create a minimal reproduction of the problem and share it with the Nuxt community or open an issue on the Nuxt GitHub repository for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai4d ago
<@335112909350895632> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
harlan
harlan4d ago
what's this give you
pnpm vue-tsc --noEmit --listFiles | grep -E '\.vue$|\.ts$|\.tsx$' | xargs -n 1 stat --format="%s %n" | npx webtreemap-cli
pnpm vue-tsc --noEmit --listFiles | grep -E '\.vue$|\.ts$|\.tsx$' | xargs -n 1 stat --format="%s %n" | npx webtreemap-cli
Mads
MadsOP4d ago
Hey Harlan I get this
bunx vue-tsc --noEmit --listFiles | grep -E '\.vue$|\.ts$|\.tsx$' | xargs -n 1 stat --format="%s %n" | bunx webtreemap-cli


<--- Last few GCs --->

[9818:0x150008000] 59607 ms: Mark-Compact 4039.3 (4131.2) -> 4023.8 (4131.7) MB, 618.58 / 0.00 ms (average mu = 0.118, current mu = 0.009) allocation failure; scavenge might not succeed
[9818:0x150008000] 60208 ms: Mark-Compact 4039.8 (4131.7) -> 4024.4 (4132.2) MB, 595.33 / 0.00 ms (average mu = 0.067, current mu = 0.009) allocation failure; scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

1: 0x1010a50ac node::OOMErrorHandler(char const*, v8::OOMDetails const&) [/Users/madshjorth/.nvm/versions/node/v20.12.0/bin/node]
bunx vue-tsc --noEmit --listFiles | grep -E '\.vue$|\.ts$|\.tsx$' | xargs -n 1 stat --format="%s %n" | bunx webtreemap-cli


<--- Last few GCs --->

[9818:0x150008000] 59607 ms: Mark-Compact 4039.3 (4131.2) -> 4023.8 (4131.7) MB, 618.58 / 0.00 ms (average mu = 0.118, current mu = 0.009) allocation failure; scavenge might not succeed
[9818:0x150008000] 60208 ms: Mark-Compact 4039.8 (4131.7) -> 4024.4 (4132.2) MB, 595.33 / 0.00 ms (average mu = 0.067, current mu = 0.009) allocation failure; scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

1: 0x1010a50ac node::OOMErrorHandler(char const*, v8::OOMDetails const&) [/Users/madshjorth/.nvm/versions/node/v20.12.0/bin/node]
Think I need to run it with bun runtime --bun. Give me a second. It never seems to finish.
dmarr
dmarr4d ago
that command won't work on a mac fyi if you use @Anthony Fu/ni:
nlx vue-tsc --noEmit --listFiles | grep -E '\.vue$|\.ts$|\.tsx$' | xargs -n1 stat -f "%z %N" | nlx webtreemap-cli
nlx vue-tsc --noEmit --listFiles | grep -E '\.vue$|\.ts$|\.tsx$' | xargs -n1 stat -f "%z %N" | nlx webtreemap-cli
or you'd change out nlx there for your own (npx, pnpx, bunx)...
harlan
harlan4d ago
How much ram do you have
Mads
MadsOP3d ago
I found out that having Typescript installed in the latest version as a devdependency messed things up. I now run on Nuxt's dependency and I can now get a result from the command. This also means my Typescript is now working again. I still wish it was faster though. 3-4 seconds wait time on intellisense. No difference between Zed/VSCode. Is this just normal? This is the result.
No description
Mads
MadsOP3d ago
@harlan I have 48gb

Did you find this page helpful?