import 'unfetch/polyfill'; still has arrow functions that don't work in IE11 #101
Description
Activity
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 ^^.
Reacted by Kristian Roebuck, mark beasley, Felix Hanken, Gabrijel Škoro, Kevin Law, Nick, J S L Geeganage, Mark Davies, Haleeq Usman, Brian Cooney and 1 moreEncountered 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').
Reacted by Jared Lunde, Gabrijel Škoro, Andrew Barclay, Nick, Markus Oberlehner, Ruudieboy, Kotov Dmitriy and Dmitri Pisarevstill not working, Trying with ie11 and apollo-client as recommended by the packages.
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.
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 '..';
Reacted by Klemen Slavič, Ben Robinson and v1rtl@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?
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?
- added a commit that references this issue on Mar 16, 2019
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" }Reacted by Madara Juta Veilande and Wynn Slater
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?