unfetch/polyfill doesn’t work in webpack 2

[sapegin]

When I do:

import 'unfetch/polyfill';

I see this error in Safari 10:

TypeError: fetch is not a function.

Because fetch is actually a ES module wrapper:

{__esModule: true, default: function}

I suppose it’s because you have require('.') in polyfll.js and webpack 2 resolves it to index.es.js. So this code works for me:

if (!window.fetch) {
    window.fetch = require('unfetch').default;
}

I’d be happy to submit a PR but not sure what would be the right fix for this.

[tunnckoCore]

that is why i saying for years to not use single dot

[developit]

Ah good catch - @sapegin @tunnckoCore, are we good just to change . to unfetch? If so, PR welcome.

[sapegin]

That should be the same, so probably to ./dist/unfetch.

[developit]

Hm - but if someone is using this via webpack 2 the entrypoint would actually be dist/unfetch.es.js right?

I just re-read the story here and I actually think we're fine with . - that will give people whatever the package.json defines as a main field based on their bundler (webpack 2 etc). The only thing that needs to be done is adding an interop:

if (!window.fetch) {
  window.fetch = (require('unfetch').default || require('unfetch'));
}

Seem reasonable?

alternatively:

if (!window.fetch) {
  window.fetch = (function(a){ return a.default || a })(require('unfetch'));
}

[sapegin]

Yeah, that should work too. Will send a PR.

[enapupe]

What do you guys do about window not being defined on webpack context? Just define it as an empty obj?

[enapupe]

Nevermind. I think my comment is unrelated because I'm talking about server bundling with target: node..

[developit]

@enapupe indeed - for that case, are you able to use isomorphic-unfetch? It'll use node-fetch when bundled/run under node.

[enapupe]

Since I don't actually want to polyfill it on node, I ended up doing my own version of `polyfill.js`: https://github.com/CheesecakeLabs/fetch/blob/unfetch/src/utils/polyfill.js It does nothing if window isn't defined. This works for me because on node I mock fetch with webpack define plugin at a global level, not as a window prop. And I don't really run `fetch` calls on ssr as it doesn't really waits for them to complete before returning the template code. So I just `noop` it. Thanks for your suggestion anyway.