import 'unfetch/polyfill'; still has arrow functions that don't work in IE11

[ikevanc]

Working in TypeScript
Tried simple polyfill import, but it uses index.mjs that still has arrow functions.
Not sure how to get it working.

Tried <script src="https://unpkg.com/unfetch/polyfill"></script>
and it got over the =>, but then gave an error the Header was undefined.

Any suggestions?

[fokusferit]

My current guess is that you need to tell babel-loader (if you use webpack) to target es5 ?
Currently, setting up a new project and having the same issue...

Edit: So I played around with webpack, included unfetch but then somehow babel-loader is not changing require(..) of the polyfill.mjs. Maybe it's something with .mjs?

Anyway here is how I got it running, when you check the polyfill folder, there is a index.js in the polyfill folder for now:

Changing:

import 'unfetch/polyfill'; to import 'unfetch/polyfill/index.js'; worked for me ^^.

[dwightjack]

Encountered this issue as well.

I think the main problem is that many webpack configurations exclude node_modules from babel-loader thus shipping the arrow function.

Given that there is not yet consensus whether we should compile or not 3rd party library in node_modules It'd be nice to add a note on the docs requiring to include the polyfill in the compiled sources (or use 'unfetch/polyfill/index').

[japrogramer]

still not working, Trying with ie11 and apollo-client as recommended by the packages.

[KrofDrakula]

It works if you include unfetch/polyfill/index and your transpiler targets IE11. Unless you explicitly exclude node_modules, it should compile just fine.

I don't really know why it wouldn't compile the polyfill by default, though. I've set webpack to not exclude node_modules.

[developit]

Ah, it's pointing to the src version of unfetch:

https://github.com/developit/unfetch/blob/master/polyfill/polyfill.mjs#L1

That line should instead be:

import unfetch from '..';

[developit]

regarding @ikevanc's other issue - the unpkg hotlinking worked, unfetch doesn't polyfill Headers. This may change in the future, but the current recommendation is to just use an object.

[mo]

@developit I ran into this bug as well today and switching to "unfetch/polyfill/index" worked well as a workaround. Does your jan 15th comment about '..' mean that this is a bug that you intend to fix eventually?

[bdrobinson]

Yeah this tripped me up too – probably quite an important fix as this would be a pretty difficult bug for newcomers to identify and work around?

[piotrblasiak]

Having to transpile unfetch to make it work in what is said to be a supported browser is definitely not expected behaviour to me :) I would prefer if node_modules was expected to be transpiled - that way the bundles would be really optimized. But that is not the reality today.

Also, in order to transpile unfetch - don´t forget it uses .mjs files so you´ll need to do this in webpack/babel:

{
          test: /\.m?js$/,
          exclude: /node_modules\/(?!unfetch\/)/,
          use: "babel-loader"
        }