Out of memory on React dynamic tag

[dragomirtitian]

TypeScript Version: 3.5.0-dev.20190503

Search Terms: performance, Out of memory, 3.4

Code

interface CompProps {
  tag: keyof JSX.IntrinsicElements;
}

const MyComponent: React.FunctionComponent<CompProps> = ({
  tag = "div",
  children
}) => {
  const Wrapper = tag;

  return <Wrapper>{children}</Wrapper>;
};

Expected behavior:
Code type checks

Actual behavior:
on 3.3: OK
on 3.4, 3.5: JavaScript heap out of memory

Playground Link: link

Related Issues: #30663 (which was closed), maybe #30819 or #30973 (not sure if same root cause with either)

Note: Found while answering this SO question

[confusingstraw]

I believe it is just the usage of keyof JSX.IntrinsicElements, as adding that to an interface in one of my projects causes the same issue.

[dragomirtitian]

@rgfoley keyof JSX.IntrinsicElements is an unusually large union, there were several some issues 3.4 with unions and distributive conditional over them. Maybe you could also post the code that is causing issues for you ?

[confusingstraw]

@dragomirtitian Any usage of keyof JSX.IntrinsicElements is enough to cause the issue. I don't get any problems when using keyof HTMLElementTagNameMap. This code seems to reproduce it (the TSC language server bit of my editor stops providing autocompletion and memory usage spikes after adding it):

interface IProps {
  isOpen: boolean;
  tag?: keyof JSX.IntrinsicElements;
}

const foo: IProps = {
  isOpen: true,
  tag: 'span',
};

[dragomirtitian]

Seems to have been fixed in latest nightly builds.