Very slow Intellisense with @types/styled-components npm package

Type: Performance Issue

When @types/styled-components npm package is installed the intellisense becomes very slow. The issue occurs as soon as I install @types/styled-components, although I saw that this doesn’t happened when project structure is small, my folder structure is pretty dynamic.

This issue seems similar but it was closed due to lack of information.

I tried :

• VScode insiders build, with no extensions installed.
• Change some configs in tsconfig.json
• Uninstall other npm packages
• Use vscode version of typescript as well as npm installed version.

but nothing seems to make it work but uninstalling @types/styled-components package.

My tsconfig.json looks like this :

{
	"compilerOptions": {
		"target": "es5",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"skipLibCheck": true,
		"strict": true,
		"forceConsistentCasingInFileNames": true,
		"noEmit": true,
		"esModuleInterop": true,
		"module": "esnext",
		"moduleResolution": "node",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"jsx": "preserve",
		"baseUrl": "./",
		"paths": {
			"@components/*": ["./components/*"],
			"@containers/*": ["./containers/*"],
			"@assets/*": ["./assets/*"],
			"@icons/*": ["./assets/Icons/*"],
			"@logo": ["./assets/Logo/MemeChat"],
			"@styles/*": ["./styles/*"],
			"@ui/*": ["./components/UI/*"],
			"@aws/*": ["./aws/*"],
			"@store/*": ["./store/*"],
			"@hooks/*": ["./hooks/*"],
			"@reducer/*": ["./reducer/*"],
			"@mytypes": ["./types/types.ts"],
			"@constants": ["./constants/CONSTANTS.ts"]
		},
		"incremental": true
	},
	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
	"exclude": [
		"node_modules",
		".next",
		"node_modules/**",
		"node_modules/*",
		"**/node_modules",
		"**/.*/"
	]
}

My package.json looks like this :

{
	"name": "meme-chat",
	"version": "0.1.0",
	"private": true,
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"lint": "next lint",
		"host": "next dev -H 192.168.1.7"
	},
	"dependencies": {
		"amazon-cognito-identity-js": "^5.1.0",
		"next": "^12.1.6",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"styled-components": "^5.3.5"
	},
	"devDependencies": {
		"@types/node": "^18.7.14",
		"@types/react": "^18.0.18",
		"@types/react-dom": "^18.0.6",
		"@types/styled-components": "^5.1.26",
		"eslint": "^8.23.0",
		"eslint-config-next": "^12.2.5",
		"typescript": "^4.8.2"
	}
}

And finally the logs : tsserver.log

VS Code version: Code - Insiders 1.71.0-insider (235a92a3693176fbf9af16ec5b829c458a1d682f, 2022-08-22T05:17:21.382Z) OS version: Linux x64 5.19.6-zen1-1-zen Modes: Sandboxed: Yes

System Info

Item	Value
CPUs	AMD Ryzen 5 3400G with Radeon Vega Graphics (8 x 3992)
GPU Status	2d_canvas: enabled canvas_oop_rasterization: disabled_off direct_rendering_display_compositor: disabled_off_ok gpu_compositing: enabled multiple_raster_threads: enabled_on opengl: enabled_on rasterization: enabled raw_draw: disabled_off_ok skia_renderer: enabled_on video_decode: disabled_software video_encode: disabled_software vulkan: disabled_off webgl: enabled webgl2: enabled webgpu: disabled_off
Load (avg)	2, 2, 3
Memory (System)	13.57GB (9.85GB free)
Process Argv	–no-sandbox --unity-launch /home/shashank/Desktop/web/meme-chat --crash-reporter-id f3472e67-d4d0-4363-9779-4cff7e6fb40b
Screen Reader	no
VM	0%
DESKTOP_SESSION	plasma
XDG_CURRENT_DESKTOP	KDE
XDG_SESSION_DESKTOP	KDE
XDG_SESSION_TYPE	x11

Process Info

CPU %	Mem MB	   PID	Process
    0	   167	 69947	code-insiders main
    0	    42	 69949	   zygote
    0	   153	 69978	     gpu-process
    0	    42	 69950	   zygote
    0	   250	 70050	     window (tsserver.log - meme-chat - Visual Studio Code - Insiders)
    0	    83	121311	     issue-reporter
    0	    56	 70027	   utility-network-service
    0	   139	 70090	   shared-process
    0	    69	 70108	     ptyHost
    0	     0	 96201	       /usr/bin/fish
    0	    69	106023	     fileWatcher
    0	     0	121332	     /usr/bin/ps -ax -o pid=,ppid=,pcpu=,pmem=,command=
    0	   125	106011	   extension-host
    0	    69	106047	     /opt/visual-studio-code-insiders/code-insiders --ms-enable-electron-run-as-node /opt/visual-studio-code-insiders/resources/app/extensions/json-language-features/server/dist/node/jsonServerMain --node-ipc --clientProcessId=106011
    0	   125	106129	     /opt/visual-studio-code-insiders/code-insiders --ms-enable-electron-run-as-node --max-old-space-size=3072 /opt/visual-studio-code-insiders/resources/app/extensions/node_modules/typescript/lib/tsserver.js --serverMode partialSemantic --useInferredProjectPerProjectRoot --disableAutomaticTypingAcquisition --cancellationPipeName /tmp/vscode-typescript1000/4fb1a89f2f74ddaeafbd/tscancellation-2651e5a803e08b00959a.tmp* --logVerbosity verbose --logFile /home/shashank/.config/Code - Insiders/logs/20220903T084834/exthost1/vscode.typescript-language-features/tsserver-log-0k49km/tsserver.log --traceDirectory /home/shashank/.config/Code - Insiders/logs/20220903T084834/exthost1/vscode.typescript-language-features/tsserver-log-76wEs6 --locale en --noGetErrOnBackgroundUpdate --validateDefaultNpmLocation --useNodeIpc
    3	   250	106130	     /opt/visual-studio-code-insiders/code-insiders --ms-enable-electron-run-as-node --max-old-space-size=3072 /opt/visual-studio-code-insiders/resources/app/extensions/node_modules/typescript/lib/tsserver.js --useInferredProjectPerProjectRoot --enableTelemetry --cancellationPipeName /tmp/vscode-typescript1000/4fb1a89f2f74ddaeafbd/tscancellation-2bf2733433132e64c261.tmp* --logVerbosity verbose --logFile /home/shashank/.config/Code - Insiders/logs/20220903T084834/exthost1/vscode.typescript-language-features/tsserver-log-kd7RRs/tsserver.log --traceDirectory /home/shashank/.config/Code - Insiders/logs/20220903T084834/exthost1/vscode.typescript-language-features/tsserver-log-GN5E4Z --locale en --noGetErrOnBackgroundUpdate --validateDefaultNpmLocation --useNodeIpc
    0	    83	106145	       /opt/visual-studio-code-insiders/code-insiders --ms-enable-electron-run-as-node /opt/visual-studio-code-insiders/resources/app/extensions/node_modules/typescript/lib/typingsInstaller.js --globalTypingsCacheLocation /home/shashank/.cache/typescript/4.8 --enableTelemetry --logFile /home/shashank/.config/Code - Insiders/logs/20220903T084834/exthost1/vscode.typescript-language-features/tsserver-log-kd7RRs/ti-106130.log --typesMapLocation /opt/visual-studio-code-insiders/resources/app/extensions/node_modules/typescript/lib/typesMap.json --validateDefaultNpmLocation

Workspace Info

|  Window (tsserver.log - meme-chat - Visual Studio Code - Insiders)
|    Folder (meme-chat): 149 files
|      File types: tsx(47) ts(17) json(6) png(6) css(5) svg(3) babelrc(1)
|                  local(1) eslintignore(1) gitignore(1)
|      Conf files: launch.json(1) settings.json(1) package.json(1)
|                  tsconfig.json(1)
|      Launch Configs: firefox;

Extensions: none

A/B Experiments

vsliv695:30137379
vsins829:30139715
vsliv368:30146709
vsreu685:30147344
python383:30185418
vspor879:30202332
vspor708:30202333
vspor363:30204092
vslsvsres303:30308271
pythonvspyl392:30422396
pythontb:30258533
pythonptprofiler:30281269
vshan820:30294714
pythondataviewer:30285072
vscod805:30301674
bridge0708:30335490
bridge0723:30353136
cmake_vspar411:30557514
vsaa593cf:30376535
pythonvs932:30404738
cppdebug:30492333
pylanb8912:30522163
vsclangdf:30492506
c4g48928:30535728
dsvsc012:30540252
pylantcb52:30558418

[BrianRonin]

I have the same problem, I solved it by changing to type 4.0.3, but now I have other incompatibility problems with my typescript just because of the type downgrade, For God’s sake, this problem needs to be solved

[Shashank-Salian]

Can you share a full repro that demonstrates the issue? That is, a full project and instructions on exactly what edits you’re making. You could also try sending us a performance trace of a tsc run.

I won’t be able to share the full repo, sorry. The intellisense is slow on only .ts and .tsx file and on every edit like when accessing object properties and editing attributes in a JSX element. I have provided the vscode logs in-case you have missed it. Here is the performance trace of tsc :

• trace.json
• types.json