Excessive stack depth comparing types 'FlatArray<Arr, ?>' and 'FlatArray<Arr, ?>'.

[RomanKornev]

TS and JS Grammar Extension version: ms-vscode.vscode-typescript-next v4.3.20210312
Trying to use configureStore with middlewares, getting the following error:

A couple days ago it was fine.
Also getting a lot of similar Excessive stack depth errors for other parts of the code.
Code

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'

configureStore({
    reducer: {
    },
    middleware: [
        ...getDefaultMiddleware(),
    ],
})

[kudryavtsev-dmitry]

I changed TS version from vscode version 4.3.0 to workspace 4.2.3, and this fixed my problem.

[utkarshk384]

@kudryavtsev-dmitry Thanks bud, you saved my day :). Been getting this error all over my react project for almost a week! :(

Typescript nightly for vscode throw this error v4.3.20210314

[andrewbranch]

I have a simple fix, but I don’t think it gets to the core of the issue. Via bisecting, I found that the problem was introduced in #30639 (cc @weswigham). Here’s a minimal repro:

// @lib: es2019
interface MiddlewareArray<T> extends Array<T> {}
declare function configureStore(options: { middleware: MiddlewareArray<any> }): void;

declare const defaultMiddleware: MiddlewareArray<any>;
configureStore({
  middleware: [...defaultMiddleware], // Should not error
});

The problem starts when we need to know if defaultMiddleware is an array-like type. We can’t take the preferred shortcut of finding that it’s a simple reference to Array or ReadonlyArray since it’s a MiddlewareArray, so we start checking assignability to readonly any[], and then we overflow while comparing each array’s .flat() call signatures.

I haven’t yet dug into why #30639 causes that comparison to overflow, but it seemed like we should really never have to do that work at all—if a type has Array or ReadonlyArray as one of its base types, I think we already know that it’s array-like. I have that fix ready to go if we want it, but we should probably figure out if we need another fix for conditional type assignability.

[andrewbranch]

Confirmed my isArrayLike change fixes the repro in #43258 too.

[jonlepage]

confirm back to 4.2.3 work ! .
4.3.0> trow this error.
Excessive stack depth comparing types 'FlatArray<Arr, ?>' and 'FlatArray<Arr, ?>'.ts(2321)

[danielo515]

In my case it is happening using recharts recharts@1.8.1 and typescript@4.2.3

[junhoyeo]

I was having the same issue with typescript@4.2.3, and then I noticed that I wasn't wrapping the mapped result into a Fragment. Now I have no errors 😄

+ <>
  {data.feeds.map((item, index) => {
    return <div key={someKey}>{JSON.stringify(item)}</div>
  })}
+ </>

[danielo515]

I was having the same issue with typescript@4.2.3, and then I noticed that I wasn't wrapping the mapped result into a Fragment. Now I have no errors 😄

+ <>
  {data.feeds.map((item, index) => {
    return <div key={someKey}>{JSON.stringify(item)}</div>
  })}
+ </>

But this is a perfectly valid react pattern, you should not need that as soon as you have a parent component