TypeScript: JavaScript heap out of memory after upgrading to 4.3

Bug Report

πŸ”Ž Search Terms

Memory

πŸ•— Version & Regression Information

After upgrading to 4.3.2 I get a β€œJavaScript heap out of memory” exception when i try to run tsc. Downgrading to 4.2.4 does not yield the same error.

<--- Last few GCs --->

[43233:0x108008000]    75872 ms: Scavenge 2043.5 (2049.9) -> 2043.0 (2049.9) MB, 6.6 / 0.0 ms  (average mu = 0.119, current mu = 0.127) allocation failure 
[43233:0x108008000]    75927 ms: Scavenge 2043.8 (2049.9) -> 2043.3 (2050.2) MB, 6.5 / 0.0 ms  (average mu = 0.119, current mu = 0.127) allocation failure 
[43233:0x108008000]    75986 ms: Scavenge 2044.0 (2050.2) -> 2043.5 (2050.4) MB, 7.0 / 0.0 ms  (average mu = 0.119, current mu = 0.127) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x100930c99]
Security context: 0x390dbb3008a1 <JSObject>
    1: getIntersectionType(aka getIntersectionType) [0x390df5b65bb9] [/.../node_modules/typescript/lib/tsc.js:~47588] [pc=0x1a0124246ed4](this=0x390d982804a9 <undefined>,0x390d7a08df51 <JSArray[18]>,0x390d982804a9 <undefined>,0x390d982804a9 <undefined>)
    2: getCrossProductIntersections(aka getCrossProductIntersections) [0...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10007e9b3 node::Abort() [/usr/local/bin/node]
 2: 0x10007eb37 node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0x100176337 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0x1001762d3 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x1002fa485 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 6: 0x1002fbb54 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
 7: 0x1002f8a27 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 8: 0x1002f6a0d v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 9: 0x1002f58c1 v8::internal::Heap::HandleGCRequest() [/usr/local/bin/node]
10: 0x1002bac3f v8::internal::StackGuard::HandleInterrupts() [/usr/local/bin/node]
11: 0x1005f7b6c v8::internal::Runtime_StackGuard(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
12: 0x100930c99 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
13: 0x1a0124246ed4

πŸ™ Actual behavior

It crashed.

πŸ™‚ Expected behavior

No crash

About this issue

  • Original URL
  • State: open
  • Created 3 years ago
  • Reactions: 43
  • Comments: 47 (16 by maintainers)

Commits related to this issue

Most upvoted comments

We’re experiencing this against both our front and backend applications which is interesting as they share little code. By any chance is anyone else here using Zod? It’s perhaps the most type-complex library which we’re using in both.

FWIW I’m not using Zod, but the codebase is quite large.

I’m also having issues moving from 4.5.5 to 4.6.2 while doing a type check tsc --noEmit -p tsconfig.json and one component is taking a crazy amount of time when usually the whole process takes between 3 and 8 seconds.

The compoent involved is a Button created with @stitches/react so I think there is a pattern here that something is wrong with libraries that are using CSS types perhaps.

I followed the instructions https://github.com/microsoft/TypeScript/wiki/Performance#performance-tracing but no idea if this is a problem on my side or a regression in Typescript πŸ‘€

Adding this: the memory usage is constantly increasing but eventually the process ends (I’m on OS X with 32GB RAM)

`$ npx analyze-trace trace`
Hot Spots
└─ Check file /src/components/ui/button.tsx (94911ms)
   └─ Check deferred node from (line 155, char 5) to (line 185, char 20) (94848ms)
      └─ Compare types 15946 and 2127 (93953ms)
         └─ Compare types 15946 and 2118 (93953ms)
            └─ Determine variance of type 1987 (93906ms)
               β”œβ”€ Compare types 78756 and 78764 (15979ms)
               β”‚  └─ Compare types 78756 and 78761 (15815ms)
               β”‚     β”œβ”€ {"id":78756,"kind":"AliasedIntersection","name":"CSS","aliasTypeArguments":[1938,43,1983,1979],"count":5,"types":[78749,78751,78753,1981,78755],"location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":18,"char":1}}
               β”‚     β”‚  β”œβ”€ {"id":1938,"kind":"TypeParameter","name":"Media","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":19,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":43,"kind":"TypeParameter"}
               β”‚     β”‚  β”œβ”€ {"id":1983,"kind":"TypeParameter","name":"ThemeMap","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":21,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":1979,"kind":"TypeParameter","name":"Utils","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":22,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":78749,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":25,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":78751,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":78753,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":1981,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":85,"char":4}}
               β”‚     β”‚  └─ {"id":78755,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":93,"char":4}}
               β”‚     └─ {"id":78761,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”œβ”€ Compare types 231488 and 231496 (15823ms)
               β”‚  └─ Compare types 231488 and 231491 (15823ms)
               β”‚     β”œβ”€ {"id":231488,"kind":"AliasedIntersection","name":"CSS","aliasTypeArguments":[1938,1986,1983,43],"count":5,"types":[231481,1975,231483,231485,231487],"location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":18,"char":1}}
               β”‚     β”‚  β”œβ”€ {"id":1938,"kind":"TypeParameter","name":"Media","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":19,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":1986,"kind":"TypeParameter","name":"Theme","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":20,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":1983,"kind":"TypeParameter","name":"ThemeMap","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":21,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":43,"kind":"TypeParameter"}
               β”‚     β”‚  β”œβ”€ {"id":231481,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":25,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":231483,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":231485,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":85,"char":4}}
               β”‚     β”‚  └─ {"id":231487,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":93,"char":4}}
               β”‚     └─ {"id":231491,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”œβ”€ Compare types 78764 and 78756 (15815ms)
               β”‚  └─ Compare types 78764 and 78753 (15599ms)
               β”‚     β”œβ”€ {"id":78764,"kind":"AliasedIntersection","name":"CSS","aliasTypeArguments":[1938,44,1983,1979],"count":5,"types":[78757,78759,78761,1981,78763],"location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":18,"char":1}}
               β”‚     β”‚  β”œβ”€ {"id":1938,"kind":"TypeParameter","name":"Media","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":19,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":44,"kind":"TypeParameter"}
               β”‚     β”‚  β”œβ”€ {"id":1983,"kind":"TypeParameter","name":"ThemeMap","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":21,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":1979,"kind":"TypeParameter","name":"Utils","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":22,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":78757,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":25,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":78759,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":78761,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":1981,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":85,"char":4}}
               β”‚     β”‚  └─ {"id":78763,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":93,"char":4}}
               β”‚     └─ {"id":78753,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”œβ”€ Compare types 231496 and 231488 (15440ms)
               β”‚  └─ Compare types 231496 and 231485 (15435ms)
               β”‚     β”œβ”€ {"id":231496,"kind":"AliasedIntersection","name":"CSS","aliasTypeArguments":[1938,1986,1983,44],"count":5,"types":[231489,1975,231491,231493,231495],"location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":18,"char":1}}
               β”‚     β”‚  β”œβ”€ {"id":1938,"kind":"TypeParameter","name":"Media","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":19,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":1986,"kind":"TypeParameter","name":"Theme","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":20,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":1983,"kind":"TypeParameter","name":"ThemeMap","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":21,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":44,"kind":"TypeParameter"}
               β”‚     β”‚  β”œβ”€ {"id":231489,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":25,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":231491,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":231493,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":85,"char":4}}
               β”‚     β”‚  └─ {"id":231495,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":93,"char":4}}
               β”‚     └─ {"id":231485,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":85,"char":4}}
               β”œβ”€ Compare types 155144 and 155154 (15072ms)
               β”‚  └─ Compare types 155144 and 155149 (14981ms)
               β”‚     β”œβ”€ {"id":155144,"kind":"AliasedIntersection","name":"CSS","aliasTypeArguments":[1938,1986,43,1979],"count":5,"types":[155135,155137,155139,155141,155143],"location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":18,"char":1}}
               β”‚     β”‚  β”œβ”€ {"id":1938,"kind":"TypeParameter","name":"Media","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":19,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":1986,"kind":"TypeParameter","name":"Theme","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":20,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":43,"kind":"TypeParameter"}
               β”‚     β”‚  β”œβ”€ {"id":1979,"kind":"TypeParameter","name":"Utils","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":22,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":155135,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":25,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":155137,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":155139,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":155141,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":85,"char":4}}
               β”‚     β”‚  └─ {"id":155143,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":93,"char":4}}
               β”‚     └─ {"id":155149,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”œβ”€ Compare types 155154 and 155144 (14572ms)
               β”‚  └─ Compare types 155154 and 155139 (14300ms)
               β”‚     β”œβ”€ {"id":155154,"kind":"AliasedIntersection","name":"CSS","aliasTypeArguments":[1938,1986,44,1979],"count":5,"types":[155145,155147,155149,155151,155153],"location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":18,"char":1}}
               β”‚     β”‚  β”œβ”€ {"id":1938,"kind":"TypeParameter","name":"Media","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":19,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":1986,"kind":"TypeParameter","name":"Theme","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":20,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":44,"kind":"TypeParameter"}
               β”‚     β”‚  β”œβ”€ {"id":1979,"kind":"TypeParameter","name":"Utils","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":22,"char":2}}
               β”‚     β”‚  β”œβ”€ {"id":155145,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":25,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":155147,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":155149,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”‚     β”‚  β”œβ”€ {"id":155151,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":85,"char":4}}
               β”‚     β”‚  └─ {"id":155153,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":93,"char":4}}
               β”‚     └─ {"id":155139,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":40,"char":4}}
               β”œβ”€ Compare types 21391 and 21397 (600ms)
               β”‚  └─ Compare types 21391 and 21394 (599ms)
               β”‚     └─ Compare types 1975 and 21394 (599ms)
               β”‚        └─ Compare types 25830 and 21397 (594ms)
               β”‚           β”œβ”€ {"id":25830,"kind":"Union","count":428,"types":[25402,25403,25404,25405,25406,25407,25408,25409,25410,25411,25412,25413,25414,25415,25416,25417,25418,25419,25420,25421,25422,25423,25424,25425,25426,25427,25428,25429,25430,25431,25432,25433,25434,25435,25436,25437,25438,25439,25440,25441,25442,25443,25444,25445,25446,25447,25448,25449,25450,25451,25452,25453,25454,25455,25456,25457,25458,25459,25460,25461,25462,25463,25464,25465,25466,25467,25468,25469,25470,25471,25472,25473,25474,25475,25476,25477,25478,25479,25480,25481,25482,25483,25484,25485,25486,25487,25488,25489,25490,25491,25492,25493,25494,25495,25496,25497,25498,25499,25500,25501,25502,25503,25504,25505,25506,25507,25508,25509,25510,25511,25512,25513,25514,25515,25516,25517,25518,25519,25520,25521,25522,25523,25524,25525,25526,25527,25528,25529,25530,25531,25532,25533,25534,25535,25536,25537,25538,25539,25540,25541,25542,25543,25544,25545,25546,25547,25548,25549,25550,25551,25552,25553,25554,25555,25556,25557,25558,25559,25560,25561,25562,25563,25564,25565,25566,25567,25568,25569,25570,25571,25572,25573,25574,25575,25576,25577,25578,25579,25580,25581,25582,25583,25584,25585,25586,25587,25588,25589,25590,25591,25592,25593,25594,25595,25596,25597,25598,25599,25600,25601,25602,25603,25604,25605,25606,25607,25608,25609,25610,25611,25612,25613,25614,25615,25616,25617,25618,25619,25620,25621,25622,25623,25624,25625,25626,25627,25628,25629,25630,25631,25632,25633,25634,25635,25636,25637,25638,25639,25640,25641,25642,25643,25644,25645,25646,25647,25648,25649,25650,25651,25652,25653,25654,25655,25656,25657,25658,25659,25660,25661,25662,25663,25664,25665,25666,25667,25668,25669,25670,25671,25672,25673,25674,25675,25676,25677,25678,25679,25680,25681,25682,25683,25684,25685,25686,25687,25688,25689,25690,25691,25692,25693,25694,25695,25696,25697,25698,25699,25700,25701,25702,25703,25704,25705,25706,25707,25708,25709,25710,25711,25712,25713,25714,25715,25716,25717,25718,25719,25720,25721,25722,25723,25724,25725,25726,25727,25728,25729,25730,25731,25732,25733,25734,25735,25736,25737,25738,25739,25740,25741,25742,25743,25744,25745,25746,25747,25748,25749,25750,25751,25752,25753,25754,25755,25756,25757,25758,25759,25760,25761,25762,25763,25764,25765,25766,25767,25768,25769,25770,25771,25772,25773,25774,25775,25776,25777,25778,25779,25780,25781,25782,25783,25784,25785,25786,25787,25788,25789,25790,25791,25792,25793,25794,25795,25796,25797,25798,25799,25800,25801,25802,25803,25804,25805,25806,25807,25808,25809,25810,25811,25812,25813,25814,25815,25816,25817,25818,25819,25820,25821,25822,25823,25824,25825,25826,25827,25828,25829]}
               β”‚           β”‚  β”œβ”€ {"id":25402,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24972}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24972,"kind":"Intersection","count":3,"types":[21393,1378,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1378,"kind":"StringLiteral","value":"\"alignContent\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25403,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24973}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24973,"kind":"Intersection","count":3,"types":[21393,1379,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1379,"kind":"StringLiteral","value":"\"alignItems\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25404,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24974}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24974,"kind":"Intersection","count":3,"types":[21393,1380,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1380,"kind":"StringLiteral","value":"\"alignSelf\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25405,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24975}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24975,"kind":"Intersection","count":3,"types":[21393,1381,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1381,"kind":"StringLiteral","value":"\"alignTracks\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25406,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24976}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24976,"kind":"Intersection","count":3,"types":[21393,1382,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1382,"kind":"StringLiteral","value":"\"animationDelay\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25407,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24977}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24977,"kind":"Intersection","count":3,"types":[21393,1383,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1383,"kind":"StringLiteral","value":"\"animationDirection\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25408,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24978}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24978,"kind":"Intersection","count":3,"types":[21393,1384,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1384,"kind":"StringLiteral","value":"\"animationDuration\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25409,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24979}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24979,"kind":"Intersection","count":3,"types":[21393,1385,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1385,"kind":"StringLiteral","value":"\"animationFillMode\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25410,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24980}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24980,"kind":"Intersection","count":3,"types":[21393,1386,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1386,"kind":"StringLiteral","value":"\"animationIterationCount\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25411,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24981}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24981,"kind":"Intersection","count":3,"types":[21393,1387,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1387,"kind":"StringLiteral","value":"\"animationName\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25412,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24982}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24982,"kind":"Intersection","count":3,"types":[21393,1388,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1388,"kind":"StringLiteral","value":"\"animationPlayState\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25413,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24983}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24983,"kind":"Intersection","count":3,"types":[21393,1389,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1389,"kind":"StringLiteral","value":"\"animationTimingFunction\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25414,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24984}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24984,"kind":"Intersection","count":3,"types":[21393,1390,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1390,"kind":"StringLiteral","value":"\"appearance\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25415,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24985}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24985,"kind":"Intersection","count":3,"types":[21393,1391,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1391,"kind":"StringLiteral","value":"\"aspectRatio\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25416,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24986}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24986,"kind":"Intersection","count":3,"types":[21393,1392,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1392,"kind":"StringLiteral","value":"\"backdropFilter\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25417,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24987}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24987,"kind":"Intersection","count":3,"types":[21393,1393,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1393,"kind":"StringLiteral","value":"\"backfaceVisibility\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25418,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24988}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24988,"kind":"Intersection","count":3,"types":[21393,1394,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1394,"kind":"StringLiteral","value":"\"backgroundAttachment\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25419,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24989}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24989,"kind":"Intersection","count":3,"types":[21393,1395,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1395,"kind":"StringLiteral","value":"\"backgroundBlendMode\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25420,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24990}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24990,"kind":"Intersection","count":3,"types":[21393,1396,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1396,"kind":"StringLiteral","value":"\"backgroundClip\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25421,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24991}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24991,"kind":"Intersection","count":3,"types":[21393,1397,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1397,"kind":"StringLiteral","value":"\"backgroundColor\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25422,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24992}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24992,"kind":"Intersection","count":3,"types":[21393,1398,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1398,"kind":"StringLiteral","value":"\"backgroundImage\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25423,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24993}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24993,"kind":"Intersection","count":3,"types":[21393,1399,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1399,"kind":"StringLiteral","value":"\"backgroundOrigin\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25424,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24994}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
               β”‚           β”‚  β”‚  └─ {"id":24994,"kind":"Intersection","count":3,"types":[21393,1400,21395]}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":21393,"kind":"Other"}
               β”‚           β”‚  β”‚     β”œβ”€ {"id":1400,"kind":"StringLiteral","value":"\"backgroundPositionX\""}
               β”‚           β”‚  β”‚     └─ {"id":21395,"kind":"TypeParameter","name":"K","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":26,"char":4}}
               β”‚           β”‚  β”œβ”€ {"id":25425,"kind":"IndexedAccess","indexedAccessObjectType":1975,"indexedAccessIndexType":24995}
               β”‚           β”‚  β”‚  β”œβ”€ {"id":1975,"kind":"AnonymousType","location":{"path":"/node_modules/@stitches/react/types/css-util.d.ts","line":29,"char":4}}
Component code
import Box from '@components/ui/Box'
import Flex from '@components/ui/Flex'
import Spinner from '@components/ui/Spinner'
import { styled, theme } from '@src/stitches.config'
import * as React from 'react'

const StyledButton = styled('button', { // styles here })

export interface ButtonProps extends React.ComponentProps<typeof StyledButton> {
  as?: keyof JSX.IntrinsicElements
  loading?: boolean
}

const Button: React.FC<ButtonProps> = React.forwardRef(
  (
    {
      children,
      loading = false,
      size,
      variant = 'solid',
      onClick,
      ...remainingProps
    }: ButtonProps,
    ref,
  ) => (
    <StyledButton
      onClick={loading ? undefined : onClick}
      variant={variant}
      size={size}
      ref={ref}
      {...remainingProps}
    >
      <Flex
        css={{
          visibility: loading ? 'hidden' : 'visible',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {children}
      </Flex>
      {loading ? (
        <Box
          css={{
            position: 'absolute',
            width: size === 'large' ? '40px' : '24px',
            height: size === 'large' ? '40px' : '24px',
          }}
        >
          <Spinner
            size={size === 'large' ? 'medium' : 'small'}
            color={variant === 'solid' ? 'light' : 'dark'}
          />
        </Box>
      ) : null}
    </StyledButton>
  ),
)

Button.displayName = 'Button'

export default Button

Running into OOM errors after upgrading from 4.5.5 to 4.6.2. We’re not using zod. Curious if something changed from 4.5 to 4.6 that could cause this problem?

$ tsc --noEmit

<--- Last few GCs --->

[28:0x6298a50]    8[281](https://github.com/myproject/runs/5573794446?check_suite_focus=true#step:2:281)2 ms: Scavenge (reduce) 1021.5 (1041.0) -> 1020.7 (1041.0) MB, 5.1 / 0.0 ms  (average mu = 0.116, current mu = 0.010) allocation failure 
[28:0x6298a50]    8[283](https://github.com/myproject/runs/5573794446?check_suite_focus=true#step:2:283)0 ms: Scavenge (reduce) 1021.6 (1041.0) -> 1021.0 (1041.3) MB, 6.2 / 0.0 ms  (average mu = 0.116, current mu = 0.010) allocation failure 
[28:0x6298a50]    83014 ms: Scavenge (reduce) 1021.7 (1041.3) -> 1021.1 (1041.5) MB, 7.8 / 0.0 ms  (average mu = 0.116, current mu = 0.010) allocation failure 


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb09980 node::Abort() [/usr/local/bin/node]
 2: 0xa1c235 node::FatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0xcf77be v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0xcf7b37 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0xeaf3d5  [/usr/local/bin/node]
 6: 0xeafeb6  [/usr/local/bin/node]
 7: 0xebe3de  [/usr/local/bin/node]
 8: 0xebee20 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 9: 0xec1d9e v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0xe832da v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/usr/local/bin/node]
11: 0x11fc026 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
12: 0x15f0a99  [/usr/local/bin/node]
Aborted (core dumped)

I’ve seen this repeatedly too in different project (can’t share the code yet). E.g. usages suretype and meta-types (both of which I’m the author of). (Again, not in these packages per se, but usages of them).

I’ve stumbled on this many times from at least 3.x. I think TypeScript would benefit from a rather massive bump in meta programming support and much higher limits. I remember back when C++ template programming was unbearably slow, and then about 10 years ago, compilers made a huge leap and started handling meta programming several orders of magnitude faster. I’d love for this to get prio over new features in the language πŸ™

I’m going to investigate Zod, since there’s a repro. Hopefully, the underlying issue will turn out to be the same as @dagstuan’s.

I’ve created a minimal repro here that demonstrates this using Material UI as well. Basically, I’m doing these things:

  • Create a styled component that takes props of type SomeComponentProps
  • Create a wrapper component for that styled component, include some additional custom props
  • Define the wrapper component’s prop types as an intersection between the custom props and SomeComponentProps (my intent here was to make the base props available from within the wrapper component)
  • Try to merge any value from the wrapper’s custom props into the corresponding prop from SomeComponentProps inside the wrapper component.

If I remove the intersection of prop types or the attempt to merge values into one of the base component’s props, all compiles well.

I’ve tried this with ts@next, ts@4.5.4, ts@4.5.2, and ts@4.2.4, as well as node 14.18.2 and 16.5.0 with the same results. It could just be that I just shouldn’t be trying to β€œforward” base component props in the way that I have, but still, I don’t think it should cause a fatal error. It should be detected and thrown instead.

Here’s the code from the repro that produces the problem for me:

import React from "react";
import { styled, SxProps, TextField, TextFieldProps } from "@mui/material";

const StyledTextField = styled(TextField)<TextFieldProps>({ // <-- Using this base component
  border: "1px solid red"
});

type StyledTextFieldWrapperProps = {
  customWidth?: number | string;
  sx?: SxProps;
};

const StyledTextFieldWrapper = ({
  customWidth,
  sx,
...props
}: StyledTextFieldWrapperProps & TextFieldProps) => { // <-- And this intersection which combines the base + wrapper prop types
  return <StyledTextField sx={{ width: customWidth, ...sx }} {...props} />; // <-- With this attempt to merge objects (sx prop)
};

export default function App() {
  return (
    <div>
      <StyledTextFieldWrapper customWidth="80%" />
    </div>
  );
}
```

Any news on this? I attempted to re-run my repro with 4.4.0-beta and it still fails.

Still getting this issue. I’m getting the following error:

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

when running tsc --pretty --noEmit even if I set the space size like the following:

cross-env NODE_OPTIONS=--max-old-space-size=10240 tsc --pretty --noEmit

@autumnblazey It’s a TS problem, but a zod PR might help people until a new version of TS is released. Also, the proposed change to zod will likely make it faster even after the TS fix.

Having this (or similar) issue with zod 3.20.6 and typescript 4.8.2

Just a note that Zod 3.2 is out and it now works. Still, theres some underlying issue here.

I’ve also had an issue with moving to typescript ~5.1 (or even ~5.0 TBH) in a React components library (it uses mui), Here’s how I resolved the TS2590: Expression produces a union type that is too complex to represent error:

tsx files:


// Changed
<StyledChip variant={variant} {...otherProps}>
// To
<StyledChip
    variant={variant as TChipVariants}
    {...(otherProps as React.HTMLAttributes<HTMLDivElement>)}
>

And

// Changed
{...otherProps}
// To
const { sx, ...restProps } = otherProps
...
<StyledRadioGroup {...restProps} >

But had to increase max-old-space-size dramatically to 16384 in order to get the relevant errors… I hope it helps anyone…

I guess there’s another issue about JavaScript heap out of memory errors over here (about 4.9.3):

I’m seeing this with:

  • typescript: 4.9.4
  • zod: 3.21.4

Downgrading to zod: 3.21.2 resolves the issue. Upgrading to typescript: 4.9.5 doesn’t make a difference.

My issue (slowness with CSS types) doesn’t happen with latest 4.7 beta npm i typescript@beta πŸ‘€

@dagstuan Fantastic! I’ll leave it up to @weswigham to decide whether you’re seeing the same underlying issue (I suspect so).

@amcasey sure thing, thank you for the help!

I ran the trace and figured out that a utility type I wrote a year or so ago to help with redux-form typings (DeepPartialExceptArrays<T>) is causing the issue, along with two type guards. I created a repro here. If you leave the tab open it eventually crashes. Without the type guards it works fine, and it also works fine in TS 4.2

Edit: Oh, and it also works fine with only one of the type guards. The issue seems to arise with the intersection type generated by applying both type guards.

I run into the same issue with https://github.com/unional/type-plus. Essentially similar issue with zod

@weswigham Is there something smart we can do with the depth limit in the the toy repros? And does my mitigation look correct enough to submit as a PR to zod?

Ooh, if you comment out these lines, it OOMs:

type ZodFormattedError<T> = T extends [any, ...any] 
    ? { [K in keyof T]?: ZodFormattedError<T[K]>; } & { _errors: string[]; } 
    : T extends any[] 
        ? ZodFormattedError<T[number]>[] & { _errors: string[]; } 
//      : T extends object 
//          ? { [K in keyof T]?: ZodFormattedError<T[K]>; } & { _errors: string[]; } 
            : { _errors: string[]; };

interface ZodError<T> {
    format: () => ZodFormattedError<T>;
}
declare const c1: ZodError<number>;
const c2: ZodError<string> = c1;

Okay, it took a while, but here’s a toy repro with no imports.

export declare type ZodFormattedError<T> = T extends [any, ...any] ? {
    [K in keyof T]?: ZodFormattedError<T[K]>;
} & {
    _errors: string[];
} : T extends any[] ? ZodFormattedError<T[number]>[] & {
    _errors: string[];
} : T extends object ? {
    [K in keyof T]?: ZodFormattedError<T[K]>;
} & {
    _errors: string[];
} : {
    _errors: string[];
};
export declare class ZodError<T> {
    format: () => ZodFormattedError<T>;
}
declare const c1: ZodError<number>;
const c2: ZodError<string> = c1;

Personally, I find it easier to read like this:

type ZodFormattedError<T> = T extends [any, ...any] 
    ? { [K in keyof T]?: ZodFormattedError<T[K]>; } & { _errors: string[]; } 
    : T extends any[] 
        ? ZodFormattedError<T[number]>[] & { _errors: string[]; } 
        : T extends object 
            ? { [K in keyof T]?: ZodFormattedError<T[K]>; } & { _errors: string[]; } 
            : { _errors: string[]; };

interface ZodError<T> {
    format: () => ZodFormattedError<T>;
}
declare const c1: ZodError<number>;
const c2: ZodError<string> = c1;