Possible memory leak with TypeScript when importing SxStyleProp objects

[jorisw]

Hi,

We're using ThemeUI in a TypeScript React project, and our component tree kinda looks like this:

components/
  form-fields/
    select.tsx
    select-styles.ts
    ...

So, we separate as many styles as we can into that select-styles.ts file, which we then import like so, in select.tsx:

import {
  arrowStyles,
  defaultSelectStyles,
  ...
} from './select-styles'

Now, when we do this for all the styles we're using in select.tsx, the TypeScript compiler crashes out of memory:

Creating an optimized production build...

<--- Last few GCs --->
al[20770:0x1045cc000]    92826 ms: Mark-sweep 2047.4 (2051.1) -> 2046.4 (2051.1) MB, 1710.8 / 0.0 ms  (+ 0.0 ms in 11 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 1714 ms) (average mu = 0.141, current mu = 0.002) alloca[20770:0x1045cc000]    94438 ms: Mark-sweep 2047.3 (2051.1) -> 2046.5 (2051.4) MB, 1607.8 / 0.0 ms  (+ 0.0 ms in 14 steps since start of marking, biggest step 0.0 ms, walltime since start of marking 1613 ms) (average mu = 0.078, current mu = 0.003) alloca

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x101224565 node::Abort() (.cold.1) [/usr/local/bin/node]
 2: 0x10009d6d9 node::Abort() [/usr/local/bin/node]
 3: 0x10009d83f node::OnFatalError(char const*, char const*) [/usr/local/bin/node]
 4: 0x1001d5ed7 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0x1001d5e77 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 6: 0x100366ba5 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/usr/local/bin/node]
 7: 0x10036841a v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/usr/local/bin/node]
 8: 0x1003643e7 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/local/bin/node]
 9: 0x100361de7 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
10: 0x10036f08a v8::internal::Heap::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0x10036f111 v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
12: 0x10033b9bb v8::internal::Factory::AllocateRawFixedArray(int, v8::internal::AllocationType) [/usr/local/bin/node]
13: 0x100339f07 v8::internal::Handle<v8::internal::FixedArray> v8::internal::Factory::NewFixedArrayWithMap<v8::internal::FixedArray>(v8::internal::RootIndex, int, v8::internal::AllocationType) [/usr/local/bin/node]
14: 0x1005a208d v8::internal::OrderedHashTable<v8::internal::OrderedHashMap, 2>::Rehash(v8::internal::Isolate*, v8::internal::Handle<v8::internal::OrderedHashMap>, int) [/usr/local/bin/node]
15: 0x10068909f v8::internal::Runtime_MapGrow(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
16: 0x1009e7679 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/usr/local/bin/node]
17: 0x1009c26fa Builtins_MapPrototypeSet [/usr/local/bin/node]

Then, simply by removing these imports, and pasting the SxStyleProp declarations directly into the functional component:

export const Select: React.FC<ExtendedSelectProps> = ({
  onChange,
  ...
}: ExtendedSelectProps) => {

  const selectStyles: SxStyleProp = {
    width: '100%',
    maxWidth: '300px',
    height: '64px',
    px: '16px',
    ...
  }

  ...

  return (
     <TUSelect
       ...
       sx={selectStyles}
     >
       ...
     </TUSelect>
  )
}

... the problem goes away and the project compiles fine, with the only difference being that we no longer import SxStyleProps type objects, but we define them inline in the functional component.

Is there some known memory-heavy condition of SxStyleProp that I should know about?

Different things we've tried:

• Upgrade TypeScript
• Downgrade TypeScript
• Upgrade all node modules
• Set a higher node memory limit (all the way up to 12GB from 2GB)
• Disable source map generation in tsconfig

No cigar.

[jorisw]

Another thing we're doing is composing SxStyleProps objects like so:

  const selectStyles: SxStyleProp = {
    ...defaultSelectStyles,
    ...filledOrEmptySelectStyles,
    ...(showSmallLabel ? withSmallLabelSelectStyles : {}),
    ...(focused || hovered ? focusedOrHoveredSelectStyles : {}),
    ...(readOnly || disabled ? disabledStyles : {}),
    ...(hovered ? hoveredStyles : {}),
    ...(focused ? focusedStyles : {}),
    ...(hasErrors ? errorStyles : {}),
    ...(hasWarnings ? warningStyles : {}),
  }

Is this the wrong way to go about it?

[hasparus]

oh! this looks familiar!

microsoft/TypeScript#34599

SxStyleProp is a union type what may be troublesome with spreading, so you could use ThemeUICSSObject (or SystemStyleObject in 0.3.1)

Does replacing spreads with Object.assign help?

[jorisw]

Indeed it does, thanks a lot.

There's a bugfix that's supposedly merged, mentioned in the thread you posted, but upgrading to latest TS didn't change anything here.