TS2590: Expression produces a union type that is too complex to represent when on TS 5.0.3

[bryanjswift]

Description

Simple components are producing TS2590: Expression produces a union type that is too complex to represent after updating @chakra-ui/system to 2.5.5 and typescript to 5.0.3. Here is a minimal case.

// index.tsx
import { Container } from '@chakra-ui/react';

const t = () => <Container />;

Still produces an error for me with this configuration.

// package.json
{
  "name": "chakra-7526-reproduction",
  "packageManager": "yarn@4.0.0-rc.42",
  "dependencies": {
    "@chakra-ui/icons": "^2.0.18",
    "@chakra-ui/react": "^2.5.5",
    "@chakra-ui/system": "^2.5.5",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "framer-motion": "^10.10.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@tsconfig/node18": "^1.0.1",
    "@types/react": "^18.0.31",
    "@types/react-dom": "^18.0.11",
    "typescript": "^5.0.3"
  }
}

// tsconfig.json
{
  "extends": "@tsconfig/node18/tsconfig.json",
  "compilerOptions": {
    "composite": true,
    "declarationMap": true,
    "incremental": true,
    "lib": [
      "dom",
      "es2021"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "@emotion/react",
    "target": "es2018",
    "outDir": "dist/",
    "declaration": true,
    "emitDeclarationOnly": true,
    "isolatedModules": true
  },
  "include": [
    "src/**/*",
    "test/**/*"
  ],
  "exclude": [
    "node_modules"
  ],
  "references": [
  ]
}

Link to Reproduction

https://gist.github.com/bryanjswift/3caee09992569aa385a15290842c3e92

Steps to reproduce

1. Clone gist at https://gist.github.com/bryanjswift/3caee09992569aa385a15290842c3e92
2. Execute yarn tsc
3. See the compilation errors

Chakra UI Version

2.5.5

Browser

n/a

Operating System

I have not tested other operating systems, this should not be an indication it only occurs on macOS.

• [X] macOS
• [ ] Windows
• [ ] Linux

Additional Information

This has been reported and closed at least twice

https://github.com/chakra-ui/chakra-ui/issues/7459

Closed with the indication the issue was fixed in @chakra-ui/system but as demonstrated in the minimal reproduction provided it was not fixed.

https://github.com/chakra-ui/chakra-ui/issues/3714

Closed due to inactivity, community "consensus" was to downgrade the typescript version

https://github.com/emotion-js/emotion/issues/3068

Same issue reported in the emotion repository.

[anshour]

Its seems like vscode automatically upgrade its typescript version to 5.0. regardless of the typescript version that we use in the project workspace. so the solution is :

1. Ctrl + P and then type ">"
2. type "typescript"
3. Select : "Typescript : Select typescript version..."
4. Select : "Use the workspace version"
5. Now, the error is gone

[bryanjswift]

Its seems like vscode automatically upgrade its typescript version to 5.0. regardless of the typescript version that we use in the project workspace. so the solution is :

1. Ctrl + P and then type ">"
2. type "typescript"
3. Select : "Typescript : Select typescript version..."
4. Select : "Use the workspace version"
5. Now, the error is gone

The error described in this issue is not in within VSCode, it is from the command line as demonstrated in the reproduction steps which include the command yarn tsc. Also, I want to be using TypeScript 5, in which case my workspace version would be TypeScript v5. I am not looking for a temporary fix but rather am reporting an error preventing the use of the latest versions of two libraries which could previously be used together. Put simply, using a different version of TypeScript does not “solve” this problem.

[manurgdev]

Same issue after upgrade TypeScript from 4.5.5 to 5.0.3.

Solved upgrading @chakra-ui/react from 2.5.2 to 2.5.5

In my case I don't use @chakra-ui/system

[nandotess]

I'm using Nx.dev (15.8.6), so I'm tied to typescript 4.9.5. This issue started to happen as soon as I updated @chakra-ui/react to 2.5.5. Downgrading it to 2.5.4 was the only solution that worked for me.

[violabg]

I have the same issue with 2.5.5 even if I force the workspace to use typescript 4.9.5

[paustint]

Lots of conversation happening on this ticket as well: https://github.com/chakra-ui/chakra-ui/issues/3714

Summary of what I think I know:

1. Latest VSCode update uses a newer version of Typescript, so some people (like me) just experience the issue in the editor but the codebase compiles and deploys properly
   • Can be solved by setting your VScode TS version manually or with the setting "typescript.tsdk": "node_modules/typescript/lib"
2. It appears Chakra 2.5.5 is compatible with Typescript 5 (from this thread), but may not be compatible with Typescript 4.9.x

[bryanjswift]

2. It appears Chakra 2.5.5 is compatible with Typescript 5 (from this thread), but may not be compatible with Typescript 4.9.x

Chakra 2.5.5 is not compatible with TypeScript 5, at least when using @chakra-ui/system and is what prompted my creating this ticket.

[paustint]

Chakra 2.5.5 is not compatible with TypeScript 5, at least when using @chakra-ui/system and is what prompted my creating this ticket.

Gotcha, I just assumed that from this comment https://github.com/chakra-ui/chakra-ui/issues/7526#issuecomment-1493396539

I'm using Nx.dev (15.8.6), so I'm tied to typescript 4.9.5. This issue started to happen as soon as I updated @chakra-ui/react to 2.5.5. Downgrading it to 2.5.4 was the only solution that worked for me.

[EddieEldridge]

Fixed for me by upgrading from @chakra-ui/react to 2.5.5 with Typescript 5+.

Note: I am not using @chakra-ui/system

[violabg]

I'm using Nx.dev (15.8.6), so I'm tied to typescript 4.9.5. This issue started to happen as soon as I updated @chakra-ui/react to 2.5.5. Downgrading it to 2.5.4 was the only solution that worked for me.

same with nx.dev (15.9.2), @chakra-ui/react 2.5.5 and typescript 4.9.5 or 5.0.3

I get the error at build time

only works with @chakra-ui/react 2.5.4 and typescript 4.9.5

[karfau]

Since we are still using React 17, we are still using @chakra-ui/*@1 and we are also experiencing this issue when trying to upgrade typescript to 5.0.3.

Any plans to provide a patch for v1 to make it compatible with ts v5?

[TimMensch]

@bryanjswift A bit of experimentation finds that the problem only reproduces with:

    "jsxImportSource": "@emotion/react",

...in tsconfig.json. Comment out that line and the bug vanishes.

This makes me wonder if this is in fact an Emotion bug? Or maybe just a poor interaction between the two libraries?

[karfau]

Is this something that is specific to chakra-ui v2? I'm not able to find any occurrence of jsxImportSource in our codebase that uses v1

[TimMensch]

@karfau

It's an Emotion/React thing. See:

https://emotion.sh/docs/typescript

[TimMensch]

@karfau Have you tried TypeScript 5.0.5 along with the newest Chakra libraries?

[karfau]

@TimMensch as I described in https://github.com/chakra-ui/chakra-ui/issues/7526#issuecomment-1510358596 we are still using react 17, and my current understanding is that chakra-ui v2 requires react v18, so we will not be able to update that for "a while" until we migrated a huge bunch of a legacy code base, which is in progress but will still take a while.

Oh and my last attempt was using ts 5.0.3, I was not aware of 5.0.5

[JakeGinnivan]

I posted in the closed one. https://github.com/chakra-ui/chakra-ui/issues/7459#issuecomment-1511547120

I found I had some duplicated chakra packages in my pnpm lockfile.

Setting dedupe-peer-dependents=true in my .npmrc

Then removing "jsxImportSource": "@emotion/react", from my tsconfig fixed it.

Running latest of everything now without the error.

[heath-freenome]

I'm stuck on the 1.x version of chakra-ui for the moment, I don't use the jsxImportSource at all. Just upgrading to TS 5.0.2 broke my very simple button. I'm guessing there is something in the chakra types that doesn't work well with TS 5.x

[bryanjswift]

@bryanjswift A bit of experimentation finds that the problem only reproduces with:

    "jsxImportSource": "@emotion/react",

...in tsconfig.json. Comment out that line and the bug vanishes.

This makes me wonder if this is in fact an Emotion bug? Or maybe just a poor interaction between the two libraries?

This is good to know, thanks for investigating and finding this. I am not sure if my team's codebase can remove this line. My understanding is that chakra uses emotion libraries under the hood (see https://github.com/chakra-ui/chakra-ui/blob/77cfa68fb9399d098c3ed71bc8183930e3789dc3/packages/core/system/package.json#L50) which I think means this bug still belongs in chakra-ui, unless there's a different value that should be used in jsxImportSourc when using chakra libraries.

[leonard-henriquez]

On my part we still have the same error even if we remove this line

"jsxImportSource": "@emotion/react",

[riceboyler]

I'm using Nx.dev (15.8.6), so I'm tied to typescript 4.9.5. This issue started to happen as soon as I updated @chakra-ui/react to 2.5.5. Downgrading it to 2.5.4 was the only solution that worked for me.

FWIW, I'm on nx as well and successfully use TS 5.0.4 with it. The only thing that fixed this issue for us was removing the jsxImportSource line from all of our tsconfig files (since nx is a monorepo and we have multiple libraries).

[csm-kb]

+1, using pnpm and confirmed no duplicates + latest version on a minimal new Next stack with Chakra UI + Emotion:

"@chakra-ui/react": "~2.6.0",
"typescript": "~5.0.4",

I also make sure that VS Code is pointing to the node_modules Typescript install.

Removing the "jsxImportSource": "@emotion/react" line from tsconfig.json does mitigate, but wanting to confirm behavior since that makes it easier to work with Emotion without comment-importing at the top!

[hixus]

Might not be same for others but hit this today after updating typescript to 5.0.4. I had some forgotten resolutions from a bug while a back https://github.com/chakra-ui/chakra-ui/issues/6372#issuecomment-1195010546 . After removing now unnecessary resolutions everything started working fine.

[FreePhoenix888]

https://stackoverflow.com/a/74847054/13545849

[oshosh]

Please use TypeScript 4 with "@chakra-ui/react": "^1.6.0". That is the immediate solution!

[nagayama]

I removed "jsxImportSource": "@emotion/react" from tsconfig.json and put "types": ["@emotion/react/types/css-prop"] instead, and it builds without error in my environment.

[younes0]

@nagayama your solutions works !

Note for Next, you need to change next.config.js in order to avoid error Warning: Invalid value for propcsson <div> tag.

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    emotion: true,
  }
}

Source: https://nextjs.org/docs/architecture/nextjs-compiler#emotion

[sudarshan-kj]

Using Chakra 1.8 and Typescript 5 was causing this error. Downgraded Typescript to 4.9.5 and it started working fine. Maybe only certain versions of Chakra 2 support Typescript 5.

[DeolaJ]

Can confirm that this works for "@chakra-ui/react": "^2.5.5" and "typescript": "^5.1.6".

[tylerbecks]

Removing emotion allowed me to unblock chakra

[nandotess]

I removed "jsxImportSource": "@emotion/react" from tsconfig.json and put "types": ["@emotion/react/types/css-prop"] instead, and it builds without error in my environment.

Thanks @nagayama, this solution worked for me when using Chakra UI 2.8 ("@chakra-ui/react": "^2.8.1") with Nx.dev 16.8 ("@nx/next": "16.8.1") that forces the usage of Next.js 13 ("next": "13.3.0") and Typescript 5 ("typescript": "5.1.6") .

Example of one of the apps tsconfig.json:

{
    "extends": "../../tsconfig.base.json",
    "compilerOptions": {
        "jsx": "preserve",
        // "jsxImportSource": "@emotion/react",
        "allowJs": false,
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "incremental": true,
        "types": ["jest", "node", "chrome", "@emotion/react/types/css-prop"]
    },
    "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
    "exclude": [
        "node_modules",
        "jest.config.ts",
        "src/**/*.spec.ts",
        "src/**/*.test.ts"
    ]
}

Looking forward for the final solution where I could revert this change. Thank you!

[asankasira]

https://stackoverflow.com/a/77126751/3660710

[veeramarni]

May we know when this issue will be resolved? We want to make using of Typescript v5 and this seems to be blocker

[FreePhoenix888]

May we know when this issue will be resolved? We want to make using of Typescript v5 and this seems to be blocker

I use chakra with ts 5. There is probably some problem on your side. Try to update chakra and typescript to latest versions

[bryanjswift]

May we know when this issue will be resolved? We want to make using of Typescript v5 and this seems to be blocker

I use chakra with ts 5. There is probably some problem on your side. Try to update chakra and typescript to latest versions

I appreciate the attempt to help but this is inaccurate. The issue seems to be a type definition conflict between chakra and emotion/css and is clearly demonstrated by the minimal reproduction included in my original bug report.

[FreePhoenix888]

May we know when this issue will be resolved? We want to make using of Typescript v5 and this seems to be blocker

I use chakra with ts 5. There is probably some problem on your side. Try to update chakra and typescript to latest versions

I appreciate the attempt to help but this is inaccurate. The issue seems to be a type definition conflict between chakra and emotion/css and is clearly demonstrated by the minimal reproduction included in my original bug report.

Thank you! Have you tried to create issue in emotion repos?

[bryanjswift]

May we know when this issue will be resolved? We want to make using of Typescript v5 and this seems to be blocker

I use chakra with ts 5. There is probably some problem on your side. Try to update chakra and typescript to latest versions

I appreciate the attempt to help but this is inaccurate. The issue seems to be a type definition conflict between chakra and emotion/css and is clearly demonstrated by the minimal reproduction included in my original bug report.

Thank you! Have you tried to create issue in emotion repos?

I have indeed, https://github.com/emotion-js/emotion/issues/3068 though I realize now I didn't update the original report with this information. I'll do so now.

[timkindberg]

Happening to us too with Chakra 1 / TS 4:

• @chakra-ui/react @ 1.2.1
• typescript @ 4.5.5

We get this error on ONE SINGLE component in my codebase that doesn't look at all special compared to the thousands of other components. Looks like this:

export const TitleBlockLink = forwardRef(({ children, ...props }: LinkProps, ref) => (
  <Link variant="inlineGray" size="sm" ref={ref} {...props}>
    {children}
  </Link>
))

Our codebase is filled with components just like this, so it's confusing why it's marking this single one.

---

UPDATE, maybe a helpful clue?

The error goes away if I remove the hard-coded props, but I can leave the {...props}

export const TitleBlockLink = forwardRef(({ children, ...props }: LinkProps, ref) => (
  <Link {...props}>
    {children}
  </Link>
))

OR if I remove the spread props and leave the hard-coded ones:

export const TitleBlockLink = forwardRef(({ children, ...props }: LinkProps, ref) => (
  <Link variant="inlineGray" size="sm" ref={ref} href="/foo">
    {children}
  </Link>
))

[vladkens]

I removed "jsxImportSource": "@emotion/react" from tsconfig.json and put "types": ["@emotion/react/types/css-prop"] instead, and it builds without error in my environment.

Thanks @nagayama, this solution worked for me when using Chakra UI 2.8 ("@chakra-ui/react": "^2.8.1") with Nx.dev 16.8 ("@nx/next": "16.8.1") that forces the usage of Next.js 13 ("next": "13.3.0") and Typescript 5 ("typescript": "5.1.6") .

Example of one of the apps tsconfig.json:

{
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
      "jsx": "preserve",
      // "jsxImportSource": "@emotion/react",
      "allowJs": false,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noEmit": true,
      "resolveJsonModule": true,
      "isolatedModules": true,
      "incremental": true,
      "types": ["jest", "node", "chrome", "@emotion/react/types/css-prop"]
  },
  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "next-env.d.ts"],
  "exclude": [
      "node_modules",
      "jest.config.ts",
      "src/**/*.spec.ts",
      "src/**/*.test.ts"
  ]
}

Looking forward for the final solution where I could revert this change. Thank you!

Thank you. That works for me as well

[Irrelon]

For me, deleting the node_modules folder and then reinstalling all the deps with yarn install did the trick.

[undermuz]

I faced the same problem and tried everything I found in the issues and comments, but it didn't help. I decided to start the project from scratch and achieve the error iteratively, I repeated 99% of my code base and found what caused this error to appear: It's all about global.d.ts, this interface, as soon as I removed it, the error disappeared:

Perhaps this information will help someone not to spend a week searching for the cause of the error

[effinrich]

"types": ["jest", "node", "chrome", "@emotion/react/types/css-prop"]

Thanks for this simple fix. Such a giant pain in the ass.

[segunadebayo]

Closing based on the suggestion above. https://github.com/chakra-ui/chakra-ui/issues/7526#issuecomment-2218781281