Unable to resolve TS2802 Type Map<> can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher

Issue

I have been trying to resolve this issue with no luck. I searched the different articles regarding the downlevelIteration and the target and modified both tsconfig.json and package.json, but still I get the same error message.

My tsconfig.json is as follows

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es6",
        // NZ 2022-09-09
        "downlevelIteration": true,
        "lib": ["DOM","ES6","ES2015.Collection","ES2015.Iterable"],
        //--------------
        "outDir": "dist",
        "rootDir": ".",
        "sourceMap": true,
        "strict": false,
        "composite": true
    }
}

Part of the source code that defines the Map structure is as follows:

interface outBrk {
title: string;
subTitle: string;
...


type fldName = string;
const fields = new Map<fldName, keyof outBrk>([
        ['Title', 'title'],
        ['Sub-title', 'sub_title'],
        ...

and the code that triggers the error msg is

for (const [xlsxKey, jsonKey] of fields) {
        if (jsonKey) {
            if (jsonKey === 'vlnlist') {
               ...

and the error msg is

error TS2802: Type 'Map<string, keyof outBrk>' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.

248     for (const [xlsxKey, jsonKey] of fields) {
                                         ~~~~~~

I would like some guidance on how to resolve this issue. Thank you in advance.

Solution

had same error, setting tsconfig.json from CommonJS to ES modules with target, module, moduleResolution helped me.

my tsconfig.json:

"compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "NodeNext",
    "jsx": "react-jsx",
    "baseUrl": "./",
    "resolveJsonModule": true,
    "esModuleInterop": true
}

Answered By - Tonikprofik