Error TS2339: Property 'entries' does not exist on type 'FormData'

Question

I searched on Stackoverflow and on the web, I found this thread https://github.com/Microsoft/TypeScript/issues/14813 but it does not solve my problem. I run into this error while compiling my code with ng serve --watch.

Error TS2339: Property 'entries' does not exist on type 'FormData'.

This part with fd.entries() triggers the error... any idea what is going on here?

onFileSelected(event) {
    const fd = new FormData;

    for (const file of event.target.files) {
        fd.append('thumbnail', file, file.name);

        const entries = fd.entries();
        // some other methods are called here e. g. upload the images

        for (const pair of entries) {
            fd.delete(pair[0]);
        }
    }
}

I saw that there (https://github.com/Microsoft/TypeScript/blob/master/src/lib/dom.iterable.d.ts) is some interface for entries but somehow this does not work for me.

EDIT

My tsconfig.json looks like this

{
    "compileOnSave": false,
    "compilerOptions": {
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2017",
            "dom"
        ]
    }
}

Exclusion

can you show the lib array of your tsconfig.json? – Enamel

I've added my tsconfig.json on the question. – Exclusion

Answer 1

The method entries is not supported by all browsers. If you want to use the method anyways, and still have the target set to es5, you can extend the current interface

declare global {
  interface FormData {
    entries(): Iterator<[USVString, USVString | Blob]>;
  }
}

Enamel

Sorry may a noop question... Where do I place this interface? Just on the end of the file? I tried this but this did not solve the error. How do I have to implement this interface? – Exclusion

You can put it on top of the component class. If you are going to use this more often though, you can export it, and perhaps place it in a file of its own – Enamel

Unfortunately this did not work, when I placed it on the top of the component.. I still get the same error error TS2339: Property 'entries' does not exist on type 'FormData'. Any idea? – Exclusion

Perhaps restart the cli, because it tends to cache the interface/interface changes – Enamel

Nope, this didn't help, still seeing the same error, anyway many thanks for your help. – Exclusion

@webtobesocial I've updated my answer a bit, by using declare global. You can place this at the bottom of your polyfills.ts, and then you will be able to use the FormData.entries() everywhere in your code – Enamel

Answer 2

You need to add "dom.iterable" to your lib list in tsconfig.json, for example:

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es6",
    "lib": [
      "es2019",
      "dom",
      "dom.iterable" // <- there you are
    ],
    // ...
}

Adjourn

and 'ng serve' again. – Beget

This is the only correct fix. In VSCode you'll need to run the command TypeScript: Restart TS Server for it to pick up the new lib. – Cheryl

I have to add: "downlevelIteration": true, in my tsconfig.js as well. – Theressathereto

Answer 3

TypeScript isn't supporting it unless you are compiling to ES6.

"target": "es5"

If it is es6, then it will work.

Hyacinthe

I don't think this is correct. new FormData().entries() fails with es6. Did you test your solution? – Lamellibranch

Answer 4

just use Object().entries(() => ) syntax.

Joplin

smh i stg lol . – Temperamental