Type instantiation is excessively deep and possibly infinite.ts (2589)

[arnaud-deprez]

Hi,

When using NavBar, I got an error in VSCode:
Type instantiation is excessively deep and possibly infinite.ts(2589)

Apparently it's linked to microsoft/TypeScript#30188 where they recommend to use ts-toolbelt for complex types.

[LinuCC]

Also happens with <Button />, <Container /> and possibly more components

[LinuCC]

Downgrading from typescript 3.6 to 3.5 works around the problem

[petracles]

Ran into this issue as well. Downgrading typescript to 3.5 actually did work but I'm curious if anyone else seeing this issue on typescript@3.61?

[ljosberinn]

It's an issue in typescript>3.5.3 iirc.

[shakib609]

Downgrading typescript solves the issue and builds successfully but the latest VSCode shows the same error Type instantiation is excessively deep and possibly infinite.ts.

[palra]

@shakib609 That's because VSCode uses its own bundled Typescript version by default.
Open your workspace and a .ts file in it. On the bottom ribbon, next to TypeScript or TypeScript React is displayed the current TypeScript version. Click on it and select Use workspace version.
Assuming you already installed TypeScript 3.5.x : yarn add typescript@3.5.x

[dotamir]

I have same issue on <Container /> component.
Any idea instead of downgrading the TS version?

[arnaud-deprez]

Hi @dotamir
Did you test it with typescript 3.6.4 ?

Base on microsoft/TypeScript#33132 it should have been resolved.

[dotamir]

@arnaud-deprez yes, My project is using typescrit 3.6.4 version but still had this issue.

[dephiros]

I ran into this issue recently as well. Any update on potential fix?

[zookatron]

It is kind of a hack but I'm currently using this patch as a workaround for this problem: zookatron@8880054

I haven't had time to dig into this too deeply yet but there appears to be some utility types such as Prefer which are frequently used and are creating very deeply nested types which slows down type checking significantly and causes this "Type instantiation is excessively deep" error on recent TypeScript versions. These would need to be refactored into something simpler (though probably less expressive) in order to fully address this problem.

[PHILLIPS71]

Hotfix above fixed some cases with containers but getting it on some Navbar.Item elements too now, running typescript@3.8.3. Downgrading typescript to 3.5.2 resolved the issue. Would be nice to see this fixed with new versions of typescript.