1

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.com/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?

Dev-Tools IE

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

FormData-object

which only has append as method defined

KingKerosin
  • 3,639
  • 4
  • 38
  • 77
  • perhaps you need the [Object.entries polyfill](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Polyfill)? – Jaromanda X Nov 19 '17 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 Nov 19 '17 at 23:49
  • if you go to the console in the browser, is Object.entries defined? – Jaromanda X Nov 19 '17 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 coming from as I am not that familiar with IE's developer tools – KingKerosin Nov 19 '17 at 23:51

1 Answers1

4

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 completely 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 component 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.

Balessan
  • 2,456
  • 2
  • 12
  • 20
  • Thanks. I also ended up with this solution (which indeed is working). On the other hand I created an issue for them here https://github.com/jimmywarting/FormData/issues/34. Seems like they will update the npm-version to v3 soon, so keep tuned ;) – KingKerosin Nov 22 '17 at 09:02
  • Yeah, happy to hear you solved your issue ! If you have any idea about mine on IE 11 here : https://stackoverflow.com/questions/47419688/internet-explorer-11-ajax-call-not-firing Let me know ;-) I assume we are in the same trouble about this damn IE. – Balessan Nov 22 '17 at 09:45
  • Had a look at your issue but no idea how to help. In the meantime, the creators made v3.0.1 available through npm. So at least this issue should be solved then – KingKerosin Nov 22 '17 at 12:32