Excessive stack depth comparing types 'FlatArray<Arr, ?>' and 'FlatArray<Arr, ?>'. ts(2321)

[simonsinclair]

Bug Report

🔎 Search Terms

• Excessive stack depth comparing types
• FlatArray
• 2321
• JSX

🕗 Version & Regression Information

• This changed between versions 4.2.3 and 4.3.0-dev.20210314.

💻 Code

const Component = (): JSX.Element => {
  const categories = ['Fruit', 'Vegetables'];

  return (
    <ul>
      <li>All</li>
      {categories.map((category) => (
        <li key={category}>{category}</li>
      ))}
    </ul>
  );
};

export default Component;

🙁 Actual behavior

The following TypeScript error:

Excessive stack depth comparing types 'FlatArray<Arr, ?>' and 'FlatArray<Arr, ?>'. ts(2321)

🙂 Expected behavior

I expect this code not to produce an error.

To work around:

• Remove the preceding list item (li) OR
• Switch VSCode's TS version from 4.3.0-dev.20210314 to the workspace's (4.2.3).

Possible related issue:

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

[andrewbranch]

Duplicate of #43249—different trigger, same bug.

[KarelHrkal]

Found another workaround - just add an extra fragment:

<ul>
  <li>Hello</li>
  <>
    {[1, 2, 3].map((n) => (
      <li key={n}>{n}</li>
    ))}
  </>
</ul>

[typescript-bot]

This issue has been marked as a 'Duplicate' and has seen no recent activity. It has been automatically closed for house-keeping purposes.

[sinanyaman95]

Found another workaround - just add an extra fragment:

<ul>
  <li>Hello</li>
  <>
    {[1, 2, 3].map((n) => (
      <li key={n}>{n}</li>
    ))}
  </>
</ul>

Thanks, a lot!