Skip to content

ERROR in src/App.tsx:6:20 TS2802: Type 'Set<string | number>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher. #13243

@jonenst

Description

@jonenst

Describe the bug

In a vanilla create-react-app typescript project ( npx create-react-app my-app --template typescript ), valid code for iteration is rejected:

TS2802: Type 'Set<string | number>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.
    4 |
    5 | function App() {
  > 6 |   const bazz = [...new Set(["foo","bar",2])];
      |                    ^^^^^^^^^^^^^^^^^^^^^^^^
    7 |   return (

a solution is to add downlevelIteration: true to tsconfig or target: "es6" (equivalent "es2015") to tsconfig.json, but it should work by default ? It seems it was the goal of #5684 . Also It's unclear to me what the best option is between setting target or setting downleveliteration. Also if not using target, is there other code syntax that is reject or is downleveliteration the only problem ?

Did you try recovering your dependencies?

Fresh install

Which terms did you search for in User Guide?

downlevelIteration
target es6
target es2015 (equivalient)

Environment

$ npx create-react-app --info
npx : 67 installé(s) en 7.139s

Environment Info:

  current version of create-react-app: 5.0.1
  running from /home/harperjon/.npm/_npx/1316987/lib/node_modules/create-react-app

  System:
    OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 14.19.0 - ~/.nvm/versions/node/v14.19.0/bin/node
    Yarn: Not Found
    npm: 6.14.16 - ~/.nvm/versions/node/v14.19.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Firefox: 100.0.2
  npmPackages:
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-scripts: 5.0.1 => 5.0.1 
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

(Write your steps here:)

  1. $ npx create-react-app my-app --template typescript
  2. write const bazz = [...new Set(["foo","bar",2])];

Expected behavior

Forked TS doesn't report an error (the emitted code by webpack works) (also it works in javascript)

Actual behavior

Forked TS reported an error:

TS2802: Type 'Set<string | number>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.
    4 |
    5 | function App() {
  > 6 |   const bazz = [...new Set(["foo","bar",2])];
      |                    ^^^^^^^^^^^^^^^^^^^^^^^^
    7 |   return (

Reproducible demo

(Paste the link to an example project and exact instructions to reproduce the issue.)
https://codesandbox.io/s/cra-downleveliteration-or-es6-6q6cv3

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions