Chakra does not compile with latest Typescript 4.3.x: Type instantiation is excessively deep

[adam-thomas-privitar]

🐛 Bug report

When compiling a project with the new version of Typescript (4.3.2), a compilation error occurs in @chakra-ui/react:

../../../node_modules/@chakra-ui/react/dist/types/extend-theme.d.ts:37:135 - error TS2589: Type instantiation is excessively deep and possibly infinite.

37 export declare function extendTheme<BaseTheme extends ChakraTheme = Theme, Extensions extends (BaseTheme | ThemeOverride<BaseTheme> | ThemeExtension<ThemeOverride<BaseTheme>>)[] = (ThemeOverride<BaseTheme> | ThemeExtension<ThemeOverride<BaseTheme>>)[]>(...extensions: [...Extensions]): BaseThemeWithExtensions<BaseTheme, Extensions>;

💥 Steps to reproduce

1. Make sure you have latest everything of all chakra packages.
2. Just import and use a component.

💻 Link to reproduction

** Looks like code sandbox cant be changed to use newer typescript :( **

🧐 Expected behavior

It compiles.

🧭 Possible Solution

Theres been some changes in this version of ts about recursive types. Theres some loosely related stuff here microsoft/TypeScript#44299

🌍 System information

Software	Version(s)
Chakra UI	1.6.3
Browser	N/A
Operating System	OSX

[jeepers3327]

I had the same error when building a chakra-ui React app with Vite as build tool using typescript 4.3.2. I downgraded to typescript@4.1.2 and I was able to successfully build the app.

[jrolfs]

I'm running into this as well. I did find this: microsoft/TypeScript#43337, which also looks like it could be related. It's gonna take me a bit to wrap my head around the type that's causing the error (ThemeExtension<ThemeOverride<BaseTheme>>), but perhaps the sandbox example cited in the above issue might help shed some light on why it's happening for someone that knows the types better.

[jrolfs]

I still haven't had a chance to dig into this but it's still occurring with 4.3.5. For anyone running into this, setting skipLibCheck: true in your tsconfig.json will work around it for now if you don't want to pin TypeScript to a 4.1.x release.

[adam-thomas-privitar]

if you don't want to pin TypeScript to a 4.1.x release.

4.2.3 works ok too 😊. I'm also meaning to look further into this as well.

[nixstrom]

I have the same issue. After upgrading Chakra, the project no longer compiles without downgrading TypeScript to 4.1.x.

Specifically, withDefaultColorScheme causes the error. I've chosen simply not to use this, and instead set a theme on every single component.

[jrolfs]

Specifically, withDefaultColorScheme causes the error. I've chosen simply not to use this, and instead set a theme on every single component.

Interesting, I'm not using withDefaultColorScheme at all yet.

[lewollerenshaw]

I still haven't had a chance to dig into this but it's still occurring with 4.3.5. For anyone running into this, setting skipLibCheck: true in your tsconfig.json will work around it for now if you don't want to pin TypeScript to a 4.1.x release.

This doesn't resolve the issue for me, just raising for awareness.

// @ts-expect-error

I've added this line as a temporary fix above the line that causes this error. In my case this was the end result.

import { extendTheme } from '@chakra-ui/react'
import colors from './overrides/colors.theme'
import config from './overrides/config.theme'
import styles from './overrides/styles.theme'

const themeOverrides = {
  colors,
  config,
  styles
}

// @ts-expect-error
export default extendTheme(themeOverrides)

[Otoru]

I have a similar problem when using the following code:

import { extendTheme, ThemeConfig } from '@chakra-ui/react';
import { mode, Styles } from '@chakra-ui/theme-tools';

const config: ThemeConfig = {
  initialColorMode: 'light',
  useSystemColorMode: true,
};

const styles: Styles = {
  global: (props) => ({
    body: {
      bg: mode('gray.100', 'gray.800')(props),
    },
  }),
};

const theme = extendTheme({ styles, config });

export default theme;

ts(2589) in extendTheme line.

[adam-thomas-privitar]

Until this is fixed in chakra, we might want to lend support to this microsoft/TypeScript#44997

You can also hack the TS binary like this, but not tried it yet: microsoft/TypeScript#34933 (comment)

[segunadebayo]

This is due to the complex nature of typings we use in the codebase. We're going to loosen the types first then rewrite the theme extension API to provide a better API and TS experience. This will be released shortly.

This is a lesson we've learned with TypeScript but it also revealed the complex nature of the API and we plan to simply it radically in coming releases.

Thanks.

[adam-thomas-privitar]

Thanks! Just a side point but looks like very recently the instantiation limit was increased: microsoft/TypeScript#45025

[ghost]

Had the same issue when upgrading Nextjs with chakra-ui "1.6.4", but running yarn to version "1.7.2" I could build after that.
Futhermore Next 12 with typescript ^4.5 forces an incremental config in tsconfig.json, which, I guess (as I'm not experient with typescript) makes union types from chakra-ui theme don't show at all in attributes, and it's a very annoying bug because it doesn't notice in logs and we can't differ if was a config in IDE or was that from packages versions.. so my typescript version is locked in "4.3.2" (compatible with nextjs12) and chakra-ui version "1.6.4"