TS2590: Expression produces a union type that is too complex to represent - (TS v5.0)

🔎 Search Terms

TS2590: Expression produces a union type that is too complex to represent

🕗 Version & Regression Information

• This changed between versions 4.9.4 and 5.0.0-dev.20230125

💻 Code

Simplified Version

import { Button } from "@chakra-ui/react"

export const CustomButtonCell = (): JSX.Element => {
  return (
    <Button
      gap={3}
      p={4}
      h={"initial"}
      textAlign={"left"}
      fontWeight={"initial"}
      rounded={"xl"}
    />
  )
}

Actual Version

import { Button } from "@chakra-ui/react"
import { ComponentProps } from "react"

export interface CustomButtonCellProps extends ComponentProps<typeof Button> {
  highlighted?: boolean
  transparent?: boolean
}

export const CustomButtonCell = ({
  highlighted,
  transparent,
  ...rest
}: CustomButtonCellProps): JSX.Element => {
  const colorScheme = transparent
    ? "transparent"
    : highlighted
    ? "tertiary"
    : "neutrals"
  return (
    <Button
      gap={3}
      p={4}
      h={"initial"}
      textAlign={"left"}
      fontWeight={"initial"}
      colorScheme={colorScheme}
      rounded={"xl"}
      {...rest}
    />
  )
}

🙁 Actual behavior

On both of the versions, typescript throws similar error:

ERROR in ./src/ui/components/CustomButtonCell.tsx:4:18
TS2590: Expression produces a union type that is too complex to represent.
    2 | import { ComponentProps } from "react"
    3 |
  > 4 | export interface CustomButtonCellProps extends ComponentProps<typeof Button> {
      |                  ^^^^^^^^^^^^^^^^^^^^^
    5 |   highlighted?: boolean
    6 |   transparent?: boolean
    7 | }

🙂 Expected behavior

This is a very simple JSX.Element. It worked fine with typescript 4.9.4 but our project needed the latest moduleResolution: "bundler" support for some of the dependencies.

External Dependencies

"@chakra-ui/react": 2.9.4 - also tried 2.7.4