"fetch" is not defined

[lucasfeliciano]

import 'isomorphic-fetch';

expose a function called "fetch" as so react-native projects.

which rule i need to use to suppress this error just for this case?

[eslintbot]

Thanks for the issue! If you're reporting a bug, please be sure to include:

1. The version of ESLint you are using (run eslint -v)
2. What you did (the source code and ESLint configuration)
3. The actual ESLint output complete with numbers
4. What you expected to happen instead

Requesting a new rule? Please see Proposing a New Rule for instructions.

[ilyavolodin]

As this is react-specific feature, you might want to create an issue in eslint-plugin-react repository. Or they might already support this (not sure). ESLint doesn't support react out of the box.

[lucasfeliciano]

I tried to use the plugin, but this is a feature from react-native so it is not implemented.

Besides that other modules could export that function, like import 'isomorphic-fetch'; does

[btmills]

If you just want to make sure ESLint knows about the global variable, check out the Specifying Globals section of our configuring docs. Will /*global fetch:false*/ work?

[lucasfeliciano]

But I need to add this comment in every file that I use the fetch(), right?

It would be better to add a rule in .eslintrc

[btmills]

Skip down a line in the docs, how about "globals": { "fetch": false }?

[ilyavolodin]

@lucasfeliciano Does @btmills suggestion helped?

[lucasfeliciano]

Hey guys, I'm traveling in brazil right now and didn't have a chance to
test.
I'll do this when I have a chance to close the ticket.
:)
Thanks for the help until now

On Sun, 4 Oct 2015 at 22:11, Ilya Volodin notifications@github.com wrote:

@lucasfeliciano https://github.com/lucasfeliciano Does @btmills
https://github.com/btmills suggestion helped?

—
Reply to this email directly or view it on GitHub
#4015 (comment).

[nzakas]

OK, closing this issue as there doesn't appear to be any task here.

[SimenB]

fetch is a global though, isn't it? https://developer.mozilla.org/en/docs/Web/API/Fetch_API

isomorphic-fetch is just a polyfill, IIRC. Whether fetch should be a predefined global I don't know, but it's not a react specific feature at all, unless I've misunderstood something

[sarkistlt]

same issue, in comment it works in config doesn't, what the problem?

[ghost]

Set the environment for a browser inside the .eslintrc file:

env:
  browser: true

[divyanshu013]

Just adding to @julius-mfc, the following will work in a non-yaml fashion:

"env": {
    "browser": true
  }

[ajostergaard]

Any response to @SimenB 's comment?

[SimenB]

Wow, 2015.

The Ghost and @divyanshu013 are correct though, use browser env, then fetch is defined 😄

[chee]

it might be preferable to use

/* global fetch:false */

at the top of your file

or

"globals": {
  "fetch": false
}

in your config, so as not to pull in other globals from the browser env.

(the false stops you from being allowed to overwrite it)

[ajostergaard]

Thanks @SimenB but the question you asked wasn't how to get around the issue, the question was why we have to get around it at all given that fetch is a global - no?!?

[SimenB]

fetch is only a global in browsers, not in Node. Globals without specifying anything else is (mostly) just language globals, not api globals. It's the same reason you have to specify node in env to use require, but not import

[ajostergaard]

Ahh - thanks! :) So really the react plugin should handle this - shouldn't it?

[SimenB]

No, not unless React automatically polyfills fetch in every environment (which it doesn't). Either tell eslint your code runs in a browser, or explicitly tell it fetch is a global.

[ajostergaard]

So really React Native, which does provide fetch, should also provide a plugin or at least document the 'integration'. :)

[platinumazure]

I think this would be an excellent discussion to have in the eslint-plugin-react and/or react-native repositories. 😉

[maulikdhameliya]

add below lines in .eslintrc
"env": {
"browser": true
},
"globals": {
"fetch": true
}

and then edit something in file and save. Your error about "fetch" is not defined will be removed

[chee]

@maulikdhameliya you'll probably want "fetch": false
the boolean is about whether or not the global variable should be assignable in your code

as in

// without fetch in globals
fetch = 'lol' // fetch is not defined

// with fetch: true
fetch = 'lol' // fine

// with fetch: false
fetch = 'lol' // error (if using `no-global-assign` (enabled in eslint:recommended))

[leoskyrocker]

From what I'm reading, react-native developers should prefer using

"globals": {"fetch": false}

over

"env": {"browser": true}

because apparently react-native is not 100% equivalent to browser env.

One example is the atob function which is not in react-native's global, but is in the list of browser globals.
That means by specifying the browser env, we will also pull in variables that are not available in RN.

[SimenB]

For RN you could also go for something like https://github.com/satya164/eslint-plugin-react-native-globals or potentially open up at issue at https://github.com/sindresorhus/globals so you could do {"env": "react-native": true}.

[j-f1]

or potentially open up at issue at https://github.com/sindresorhus/globals so you could do {"env": "react-native": true}.

sindresorhus/globals#82