standard: "fetch" is not defined

Use window.fetch (or document.fetch, forgot which one it is). The browser has too many globals to whitelist, so referencing the object it’s attached to is a good thing

On Wed, Mar 15, 2017, 20:19 Yao Ding notifications@github.com wrote:

When I use fetch, a polyfill is imported like this import ‘whatwg-fetch’, and “fetch” is not defined error would show up.

I know that I could use “global” to prevent this error, but should these been considered in standard for these common polyfill?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/feross/standard/issues/821, or mute the thread https://github.com/notifications/unsubscribe-auth/ACWleif2D2GTbNsUMFFSsF9bqIYhSOjqks5rmDnPgaJpZM4MeaH3 .

How? The library is replacing the global fetch…

I think the point is that the global fetch could be replaced by another pollyfill that executes later, in another package. By explicitly depending on your local fetch variable, you guarantee that your code will always get the fetch implementation that it is expecting.

isomorphic-fetch exports the function in addition to patching the global scope. The following should work great:

const fetch = require('isomorphic-fetch')

fetch('http://example.com')
  .then(res => res.text())
  .then(text => console.log(text))

Ah, that makes perfect sense, @feross. I really appreciate you taking the time to explain this, as I know you likely have many other things competing for your attention. I agree 100% with what you have laid out now that is has been explained in more detail. (Apologies for somehow missing that section in the README.)

Thanks again.

Why would it change? Are people including multiple polyfills in a single project?

In an ideal world, no one would include multiple polyfills in a single project. However, if one of the packages you’re using includes isomorphic-fetch or another implementation that also tries to overwrite the global, then the order these run in will affect the outcome.

It’s not that complicated: packages should never write globals. If you, as a top-level user who is making an app, want to polyfill fetch, then you should do:

if (typeof window.fetch !== 'function') {
  window.fetch = require('some-fetch-implementation')
}

That said, isomorphic-fetch seems to otherwise be a good package, so it’s totally fine if you want to use it. Just be explicit about where fetch is coming from to satisfy standard. To do that, you have two options:

1. Use it directly (best)

const fetch = require('isomorphic-fetch')
fetch('http://example.com')

1. Use the global

require('isomorphic-fetch') /* global fetch */
fetch('http://example.com')

This is all documented in the readme here: http://standardjs.com/#i-use-a-library-that-pollutes-the-global-namespace-how-do-i-prevent-variable-is-not-defined-errors

Exactly what @falmar said. In node, you just do:

const fetch = require('node-fetch')
fetch('https://github.com/', ...)