TypeScript: Expression produces a union type that is too complex to represent. ts(2590)

🐛 Bug report

in some cases, instead of updating the theme, we want to change some defaults in components directly, to fit a more opinionated approach, and proxy ChakraUI components … f.ex:

import { ModalBody as ModalBodyComponent, ModalBodyProps } from '@chakra-ui/modal';
import { forwardRef } from '@chakra-ui/system';
import * as React from 'react';

export const ModalBody = forwardRef<ModalBodyProps, 'div'>((props, ref) => {
  return <ModalBodyComponent pb={6} {...props} ref={ref} />;
});

💥 Steps to reproduce

components with a lot of props (number unknown) seem to be the culprit

💻 Link to reproduction

Note, I cannot seem to reproduce this on Codesandbox, but I can reproduce this locally in a clean project, So i suggest cloing the codesandbox locally. CodeSandbox reproduction: https://codesandbox.io/s/summer-night-bmzsl?file=/src/ModalBody.tsx

🧐 Expected behavior

union types should not be extra complex using this method

🧭 Possible Solution

n/a

🌍 System information

Software	Version(s)
Chakra UI	“@chakra-ui/modal”: “1.7.0”, “@chakra-ui/system”: “1.4.0”, “@chakra-ui/utils”: “1.4.0”,
Browser	n/a
Operating System	MacOS

📝 Additional information

could be related to #3706

[Daggy1234]

Hey so I’m habing the same problem with this Jsx snippet.

                                   <MenuButton
                                        size="lg"
                                        borderColor="transparent"
                                        variant="outline"
                                        as={Button}
                                        rightIcon={<FaChevronDown />}>
                                        <Avatar size="md" src={user.photoURL} alt={user.name} />
                                    </MenuButton>

Expression produces a union type that is too complex to represent.ts(2590)

I’m on: “@chakra-ui/react”: “^1.1.0”, “next”: “10.0.4”, “typescript”: “^4.1.2”

[FreePhoenix888]

Solution

1. Open a JavaScript or TypeScript file in VS Code.
2. In the VS Code command palette, run the TypeScript: Select TypeScript version command.
3. Make sure you have Use workspace version selected

UPD: I have created a question+answer on stackoverflow. I hope it helps someone 😃