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

[dhruvkelawala]

🔎 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

[gabritto]

Hi @dhruvkelawala, could you share a repro as a project, or at least the tsconfig and dependency versions you used? I tried to repro this error with both examples provided, but I get a different error on ComponentProps<typeof Button>: "An interface can only extend an object type or intersection of object types with statically known members.ts(2312)" instead of the reported error.
Thanks!

[dhruvkelawala]

https://github.com/argentlabs/argent-x/blob/feat/starknet-v5-beta/packages/extension/src/ui/components/CustomButtonCell.tsx

Hey, this is the file. It's a monorepo and quite a big project. But I hope you get what you are looking for. Otherwise, I can create a new project and try to reproduce it. Thanks

Note: It's still using "typescript": "5.0.0-dev.20230125", because I haven't tried it with stable releases.

[anilanar]

@gabritto You got everything you need? Otherwise I'll work on a repro.

[jpace121]

I think I ran into this same issue today. Luckily the project I’m working on is small, so I could just convert from TS to JS. 😭

I’ll post a simplified repro if there is interest. In my case, I was trying to use a Button from react-bootstrap.

EDIT: After more sleuthing I’m guessing my actual issue is when I added three-js/drei. See issue pmndrs/drei#704

[ennioVisco]

I think I ran into this same issue today. Luckily the project I’m working on is small, so I could just convert from TS to JS. 😭

I’ll post a simplified repro if there is interest. In my case, I was trying to use a Button from react-bootstrap.

EDIT: After more sleuthing I’m guessing my actual issue is when I added three-js/drei. See issue pmndrs/drei#704

Converting from TS to js seems quite excessive, can't you just use any in that case?

[jpace121]

Maybe? I write C++ professionally and am playing with JS for fun, so I kind of unstuck myself the nuclear way once I ran out of tips from the internet...

…

On Sun, Dec 24, 2023 at 2:34 AM Ennio Visconti ***@***.***> wrote: I think I ran into this same issue today. Luckily the project I’m working on is small, so I could just convert from TS to JS. 😭 I’ll post a simplified repro if there is interest. In my case, I was trying to use a Button from react-bootstrap. EDIT: After more sleuthing I’m guessing my actual issue is when I added three-js/drei. See issue pmndrs/drei#704 <pmndrs/drei#704> Converting from TS to js seems quite excessive, can't you just use any in that case? — Reply to this email directly, view it on GitHub <#52459 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA6WAHZJ4IOVJULYHULUICDYK7LJZAVCNFSM6AAAAAAUIV2A5SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTQNRYGQ2TGMBWGM> . You are receiving this because you commented.Message ID: ***@***.***>

[jpace121]

Update: I didn't realize how to get // @ts-ignore to be found in JSX.... Once I figured that out, I was able to just ignore the one line.