As found on the official documentation IE11 does not support FormData at all or at least not much enough I need to.

Inside my code I have to loop through the entries of an FormData element. For this task I use the entries() function which is not working on IE giving me the error

Object doesn't support property or method 'entries'

I already added via npm to my project and added it to my entry in webpack.config.js which then looked something like this.

const webpack = require("webpack");
const path = require("path");

module.exports = {
    entry: {
        app: ["babel-polyfill", "formdata-polyfill", "whatwg-fetch", "./Scripts/Modules/index.ts"]
    },
}

In the console I can see that formdata.min.js is loaded. As the error still occurs it seems like it does not use the polyfill as it should. It still uses the default one which fails. How can I tell my TypeScript code to use the polyfill-version instead of the browser's default implementation as the package does not provied any d.ts files?

Is this even possible? If not - what are possible workarounds for such a scenario?

This is what the FormData object is looking like in the dev-tools:

which only has append as method defined

As found on the official documentation IE11 does not support FormData at all or at least not much enough I need to.

Inside my code I have to loop through the entries of an FormData element. For this task I use the entries() function which is not working on IE giving me the error

Object doesn't support property or method 'entries'

I already added https://github./jimmywarting/FormData via npm to my project and added it to my entry in webpack.config.js which then looked something like this.

const webpack = require("webpack");
const path = require("path");

module.exports = {
    entry: {
        app: ["babel-polyfill", "formdata-polyfill", "whatwg-fetch", "./Scripts/Modules/index.ts"]
    },
}

In the console I can see that formdata.min.js is loaded. As the error still occurs it seems like it does not use the polyfill as it should. It still uses the default one which fails. How can I tell my TypeScript code to use the polyfill-version instead of the browser's default implementation as the package does not provied any d.ts files?

Is this even possible? If not - what are possible workarounds for such a scenario?

This is what the FormData object is looking like in the dev-tools:

which only has append as method defined

• javascript
• typescript
• internet-explorer
• form-data
• polyfills

• perhaps you need the Object.entries polyfill? – Jaromanda X Commented Nov 19, 2017 at 23:40
• @JaromandaX I've added a polyfill.js with the code from the link which is included before all other javascript-code but still get the same error. – KingKerosin Commented Nov 19, 2017 at 23:49
• if you go to the console in the browser, is Object.entries defined? – Jaromanda X Commented Nov 19, 2017 at 23:50
• Yes, seems like as it returns a function(obj). Will update my question with a screen of the error I'm facing. I don't event know where the error is exactly ing from as I am not that familiar with IE's developer tools – KingKerosin Commented Nov 19, 2017 at 23:51

1 Answer 1

Not sure if it may helps you but I got this issue today and it seems that the version of the polyfill provided via NPM does not pletely override the FormData object, so is not suitable to IE11 or Edge.

I found switching to the V3 of the library fixed that. In order to do that I got the content of the FormData.js file from the github repository and added it as a ponent in my own custom JavaScript code.

I use WebPack to, got some other issues with IE11, still investigating.

Let me know how it goes by including the content directly instead of getting it from NPM.