Definitelytyped: [@types/styled-components] tsserver running at 100% CPU

[andrew-humu]

If you know how to fix the issue, make a pull request instead.

• [x] I tried using the @types/xxxx package and had problems.
• [ ] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [ ] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @Igorbek @Igmat @lavoaster @Jessidhia
  
  

Versions

• @types/[email protected]
• [email protected]

Summary

Upon upgrading to the latest version of @types/styled-components and using VS Code, I noticed that editing typescript files was suddenly causing my CPU usage to jump to 100%. My editor's typescript auto-complete features and lint warnings suddenly took multiple seconds to resolve after typing each character.

On further investigation, I could see that tsserver.js was responsible for all of that CPU usage. Downgrading one version at a time, I was able to isolate the performance slowdown to something that changed between @types/[email protected] and @types/[email protected].

It looks like the two commits added in that version are:

https://github.com/DefinitelyTyped/DefinitelyTyped/commit/5c49d4ddc6f5bd06c5cf04d911398f3db05ead54#diff-9726c25d6953300e0670141c0abac3db

https://github.com/DefinitelyTyped/DefinitelyTyped/commit/59ab5b3aef80fa55010f7d8385f785514d2e0b1a#diff-9726c25d6953300e0670141c0abac3db

To reproduce

1. In a new typescript project:

yarn add [email protected] [email protected] @types/[email protected]

1. Import styled-components and begin editing the file.

---

This issue seems similar, but not exactly the same: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/34391

[deleonn]

I'm experiencing exactly the same issue with:

"typescript": "^3.4.5",
"styled-components": "^4.2.0",
"@types/styled-components": "^4.1.14"

Fixed it by downgrading @types/styled-components to 4.0.3

[ChrisBews]

So it turns out this was due to TypeScript itself. This RC of 3.5 fixes the problem entirely - https://devblogs.microsoft.com/typescript/announcing-typescript-3-5-rc/

[jewseppi]

I've been trying to debug this for a while now and nothing seems to resolve the issue.

TS-RC 3.5 helps but it doesn't take long for the CPU to max out; especially when connected to the AC.

I am on @types/styled-components to 4.0.3 and still maxing out the CPU.

[andrew-humu]

I've been trying to debug this for a while now and nothing seems to resolve the issue.

TS-RC 3.5 helps but it doesn't take long for the CPU to max out; especially when connected to the AC.

I am on @types/styled-components to 4.0.3 and still maxing out the CPU.

@jewseppi Is it possible you have a separate issue? If you remove @types/styled-components entirely, does your CPU still max out?

[jewseppi]

@andrew-humu I just upgraded Node to the latest stable release v12 and it seems to have improved the CPU usage. Node is now capping out at ~60-65% and the CPU is under 80% now.

I am aware that HP EliteBooks have an issue with the CPU usage when connected to AC; currently on battery now. Will test the AC later.

[ChrisBews]

I've been trying to debug this for a while now and nothing seems to resolve the issue.

TS-RC 3.5 helps but it doesn't take long for the CPU to max out; especially when connected to the AC.

I am on @types/styled-components to 4.0.3 and still maxing out the CPU.

This sounds like a separate issue - 4.0.3 never had the problem. The new version of TypeScript fixes the problem for newer versions of the styled-components types. I can't replicate your issue with 4.0.3. Would be interesting to find out what's causing this issue for you.

[dev1lmini]

Any news? I have the same issue, also everything becomes fine when I downgrade to 4.0.3 but I can't use it as it has breaking changes for types. The VSCode is very slow when I use styled-components in a project

• typescript: 3.7.2;
• styled-components: 4.4.0;
• @types/styled-components: 4.4.0;

[Aleksion]

Same thing - Running

typescript: 3.7.3;
styled-components: 5.0;
@types/styled-components: 4.4.2;

vs-code frequently becomes unusable. And the types don't resolve for components 50% of the time.
If I downgrade to 4.0.4 it works, but typings obviously fail for new api features.

[Aleksion]

For anyone looking for a temp fix to this, the following patch to 4.0.3 makes it work (and FAST) for me again. Such a relief 😂

@types+styled-components+4.0.3.patch

diff --git a/node_modules/@types/styled-components/README.md b/node_modules/@types/styled-components/README.md
deleted file mode 100644
index 8864c54..0000000
--- a/node_modules/@types/styled-components/README.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Installation
-> `npm install --save @types/styled-components`
-
-# Summary
-This package contains type definitions for styled-components (https://github.com/styled-components/styled-components).
-
-# Details
-Files were exported from https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/styled-components
-
-Additional Details
- * Last updated: Fri, 26 Oct 2018 06:20:19 GMT
- * Dependencies: react, node
- * Global values: none
-
-# Credits
-These definitions were written by Igor Oleinikov <https://github.com/Igorbek>, Ihor Chulinda <https://github.com/Igmat>, Adam Lavin <https://github.com/lavoaster>.
diff --git a/node_modules/@types/styled-components/index.d.ts b/node_modules/@types/styled-components/index.d.ts
index f436b8d..21c3425 100644
--- a/node_modules/@types/styled-components/index.d.ts
+++ b/node_modules/@types/styled-components/index.d.ts
@@ -59,8 +59,13 @@ export type ThemedGlobalStyledClassProps<P, T> = P & {
 export interface GlobalStyleClass<P, T>
     extends React.ComponentClass<ThemedGlobalStyledClassProps<P, T>> {}

+    type ForwardRefExoticBase<P> = Pick<
+    React.ForwardRefExoticComponent<P>,
+    keyof React.ForwardRefExoticComponent<any>
+>;
+
 export interface StyledComponentClass<P, T, O = P>
-    extends React.ComponentClass<ThemedOuterStyledProps<O, T>> {
+    extends React.FunctionComponentFactory<ThemedOuterStyledProps<O, T>> {
     withComponent<K extends keyof JSX.IntrinsicElements>(
         tag: K,
     ): StyledComponentClass<

[dgarciamuria]

I'm having the same problem, even with a minimal example using the following package.json:

{
  "name": "styled-components-minimal",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "@types/styled-components": "^5.1.0",
    "styled-components": "^5.1.0",
  }
}

As soon as I remove @types/styled-components CPU usage goes back to normal and intellisense becomes responsive.

@types/[email protected] is the last version that works for me, it seems that something from the @types/react is causing it. React.ComponentPropsWithRef is one of my main suspects

[kachkaev]

@dgarciamuria have you tried TypeScript 3.9? It promises speed improvements for ‘packages like material-ui and styled-components’.

[dgarciamuria]

@kachkaev yep I did. Unfortunately, the problem is still there for me. Removing @types/styled-components is the only way to make vscode usable again