Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Chakra does not compile with latest Typescript 4.3.x: Type instantiation is excessively deep
See original GitHub issue🐛 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
- Make sure you have latest everything of all chakra packages.
- 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 https://github.com/microsoft/TypeScript/issues/44299
🌍 System information
| Software | Version(s) |
|---|---|
| Chakra UI | 1.6.3 |
| Browser | N/A |
| Operating System | OSX |
Issue Analytics
- State:
- Created 2 years ago
- Reactions:26
- Comments:12 (4 by maintainers)
Top Results From Across the Web
How to abort early with Type instantiation is excessively deep ...
I have the above type to type object path, however, some of my function's generic is Recrod<string, any> is there any way to...
Read more >Documentation - TypeScript 4.3
Separate Write Types on Properties. In JavaScript, it's pretty common for APIs to convert values that are passed in before storing them.
Read more >Changelog - Chakra UI
Loosen types of extendTheme to allow recent TS compiler to work and avoid Type instantiation is excessively deep and possibly infinite errors.
Read more >Announcing TypeScript 4.7 : r/typescript - Reddit
It looks like the toughest upgrade though, I'm getting a lot of Type instantiation is excessively deep and possibly infinite errors.
Read more >Announcing TypeScript 4.5 - Microsoft Developer Blogs
When you use static types, you can run the TypeScript compiler to check for ... error: Type instantiation is excessively deep and possibly ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
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.
I’m running into this as well. I did find this: https://github.com/microsoft/TypeScript/issues/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.