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

Question

I am trying to use Button from @chakra-ui/react npm library but the Button element produces this error:

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

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

function Page() {
  return <Button onClick={(event) => {}}>Text</Button>
}

FreePhoenix888 · Accepted Answer · 2023-07-04T08:27:52.100

253

VSCode Typescript Extension

Make sure you are using the right typescript version. Typescript extension can use its own version instead of using your project's typescript version which is set in package.json

Open a JavaScript or TypeScript file in VS Code.
In the VS Code command palette (F1 is the shortcut by default), run the TypeScript: Select TypeScript version command.
Make sure you have Use workspace version selected

If there is no Use workspace version option Make sure you have typescript in your dependencies in package.json and you have installed your dependencies by using npm install or npm clean-install
If you still do not have it - add typescript.enablePromptUseWorkspaceTsdk: true to .vscode/settings.json or find setting Enable Prompt Use Workspace Tsdk and enable it

Recomendation

Setup typescript extension to prompt you whether to use workspace version
Find setting 'Typescript: Enable Prompt Use Workspace Tsdk' in VsCode settings and enable it In the next time you open your workspace in VsCode you will see this notification: You want to click "Allow" :)

Other Possible Solutions

Update npm version
If you use nvm - nvm install --latest-npm
Update nodejs version
If you are unable to update nodejs at the moment to the latest version you can update it to atlest the latest minor+path version (x.latest.latest) to not have breaking changes
Remove node_modules and npm install
if you have project separated by folders and it is situated inside of those, you are unable to select typescript version in vscode. In that case open new vscode and go directly into your folder with package.json. (https://stackoverflow.com/users/5246617/pavol-travnik)

edited Jul 04 '23 at 08:27

answered Dec 19 '22 at 06:46

FreePhoenix888

4,510
3
13
22

1

In my case, I was not able to see `Use workspace version` option in my editor. Then this solved my problem https://stackoverflow.com/a/74940837/13822685 – abdadeel Dec 28 '22 at 13:27
@abdadeel, do you have installed typescript npm package in your npm package? – FreePhoenix888 Dec 29 '22 at 09:40
yes I have. `typescript: 4.7.4` – abdadeel Dec 30 '22 at 10:18
@abdadeel. It is interesting. VSCode must see it if you have typescript installed in your node_modules – FreePhoenix888 Dec 30 '22 at 15:35
it picked it up after I added `typescript.enablePromptUseWorkspaceTsdk: true` in `.vscode/settings.json` – abdadeel Dec 30 '22 at 22:23
I have personnaly the error with TS 4.7.4, I don't know understand why this fix would work. – Alexis Delrieu Jan 05 '23 at 10:56
This worked for me in the 3rd steps everything went back to normal. thanks – Laura Díaz Mar 31 '23 at 17:16
`enablePromptUseWorkspaceTsdk` did not work for me, I had to add `typescript.tsdk: "path/to/node_modules/typescript/lib"` as well, probably since `node_modules` wasn't in the root of the project. – notme1560 Apr 06 '23 at 03:22
2

excellent, but this works only if the package.json is in top level in vscode - if you have project separated by folders and it is situated inside of those, you are unable to select typescript version in vscode. In that case open new vscode and go directly into your folder with package.json – Pavol Travnik Apr 19 '23 at 14:12
@PavolTravnik, thank you! I have added your words to my answer and marked that you are the author – FreePhoenix888 Apr 20 '23 at 07:22

score 17 · Answer 2 · answered Mar 23 '23 at 13:40

17

Myself also faced same issue on using chakra-ui components in next js 13.

The next js version 13 was coming with typescript version 5.0.2. I have changed the typescript version to 4.9.5 on package.json file and reinstalled the npm packages after deleting package-lock.json file. This issue got solved and I tested with typescript compiler command

npx tsc --noEmit

answered Mar 23 '23 at 13:40

hariAnitha

341
3
5

Likely because VS Code was still using v4.9.5 and the workspace was v5.0.2. – jinsley8 Mar 27 '23 at 17:48
It was not only in VS Code but also when I run eslint (lint checker) from command line. – hariAnitha Mar 30 '23 at 05:27
oh my word, that was annoying to solve. this really helped thanks. For some reason, the error just appeared out of nowhere (thinking back it was after I added a new package to package.json), so deleting package-lock and reinstalling was the solution for me – timhc22 Aug 23 '23 at 07:21

score 9 · Answer 3 · answered Mar 20 '23 at 07:20

9

changing version of typescript to "typescript": "^4.9.5" in package.json and running yarn/npm install helped me to solve the issue.

answered Mar 20 '23 at 07:20

muhammed770

101
1
1

1

Downgrading Typescript to 4.9.5 and selecting `Use workspace version` afterwards fixed it for me too. Thanks – PRSHL Apr 03 '23 at 07:02

score 8 · Answer 4 · answered Mar 30 '23 at 00:21

8

Go to the bottom bar in VSCode and pick the version of TS that match your package.json :

vs code

It will be better if the TS version being used by vscode is higher than the current namespace version (in your project)

answered Mar 30 '23 at 00:21

aircrosspad

91
1
1

score 5 · Answer 5 · edited Jul 06 '23 at 19:39

5

Go to Settings in VSCode and search for 'TypeScript version' tick 'Typescript: Enable Prompt Use Workspace Tsdk'

You'll get a prompt, click use workspace version.

edited Jul 06 '23 at 19:39

Slate

221
5
14

answered Apr 27 '23 at 12:50

Robert Rendell

1,658
15
18

score 4 · Answer 6 · answered Apr 06 '23 at 14:59

4

Same issue, but i am solved by to config

{
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.tsdk": "node_modules/typescript/lib"
}

into ./.vscode/settings.json

answered Apr 06 '23 at 14:59

diqye

54
2

j0hn.sm1th1 · Answer 7 · 2023-04-27T10:37:24.407

3

I believe the issue is related to the NX env setup. I guess you've chosen the "emotion" option when setting up the NX app (I did the same as well).

I can confirm that the issue has been resolved by removing "jsxImportSource": "@emotion/react" from tsconfig.json. No extra steps needed.

Using "typescript": "5.0.4" and "@chakra-ui/react": "2.6.0". All good.

edited Apr 27 '23 at 10:37

answered Apr 27 '23 at 10:29

j0hn.sm1th1

31
3

This is the only thing that worked for me..... Thank you!! – K.H. B Jun 09 '23 at 18:40
This helped me a lot, Thank you – Ahmed Tarek Aug 20 '23 at 19:45

score 2 · Answer 8 · answered Apr 17 '23 at 15:59

2

After trying almost everything available here with no success, removing this line from my tsconfig.json worked for me:

"jsxImportSource": "@emotion/react"

It should be noted that this was done just after trying @FreePhoenix888 answer.

answered Apr 17 '23 at 15:59

danyhiol

594
2
7
26

G. Siganos · Answer 9 · 2023-03-01T09:37:40.513

1

For anyone that doesn't work the accepted solution try to delete the node_modules folder in your project and run again npm install or yarn install

Running both commands was triggering the issue for me.

Also you could check this answer for @mui/material relative error

edited Mar 01 '23 at 09:37

answered Mar 01 '23 at 08:49

G. Siganos

747
1
12
21

score 1 · Answer 10 · answered Apr 05 '23 at 03:30

For me I face the same issue. the chakra-ui version is 2.5.3 typescript version is 5.0.2. now Going back to typescript@4.9.5 this error getting solved. enter image description here and last you should set user workspace typescript version,if your system is windows, snippt is ctrl + shift + p,choose your version, and reopen the tab, the error will disappear enter image description here enter image description here

score 1 · Answer 11 · answered Apr 10 '23 at 09:46

Add this into "./.vscode/settings.json":

{
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.tsdk": "absolute_path_to/node_modules/typescript/lib"
}

**Note: typescript.tsdk use "absolute path" (not relative path), if not, it will not work.

score 1 · Answer 12 · answered May 17 '23 at 22:05

1

My issue was solved by changing the tsconfig.json file.
I removed "jsxImportSource": "@emotion/react", and it worked.

answered May 17 '23 at 22:05

Mrochu

11
2

score 0 · Answer 13 · answered Aug 25 '23 at 07:15

After some investigation, I realized that the TypeScript type inference was struggling with the complexity of thecomponent's types. To resolve this, I added the css="" prop to the Checkbox component. This seemed to help TypeScript better understand the type and eliminate the error.

import { Checkbox } from '@chakra-ui/react';

// ...

<Checkbox
  colorScheme="red"
  defaultChecked
  aria-label="Checkbox"
  css=""  // Adding this prop resolved the error
/>

score -1 · Answer 14 · edited Apr 10 '23 at 09:39

I correct the error by having this in tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "components/Profile.jsx",
    "pages/profile.js",
    "pages/index.jsx"
  ],
  "exclude": ["node_modules"]
}

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

14 Answers14

VSCode Typescript Extension

Recomendation

Other Possible Solutions

Linked