Fetch: "fetch is not defined" error

[aman-dureja]

Hello,

I have a Javascript file that uses fetch with the whatwg-fetch polyfill. I am running into an issue where I always get the following error when attempting to test the program:

ReferenceError: fetch is not defined

This occurs even though I am importing "whatwg-fetch" at the top of the file. Even if I change the import statement to a require statement, the same error still occurs.

I am using Node.js with Mocha as the test framework. It works fine when I import "node-fetch", but I would much prefer to continue using whatwg-fetch. Isomorphic-fetch also results in the same error.

Is there any viable workaround to get rid of the error?

Thank you!

[ivan-nikitovic]

I had the same issue today.

[mislav]

Would you share with us the exact import statement and which module system do you use?

Also, are you executing your JavaScript in a browser environment? Because you said you tried node-fetch as well, which runs in a node.js environment, so that confuses me as to where is your JS actually getting executed.

[aman-dureja]

Thanks for the response!

The import and require statements that I have tried are:

import "whatwg-fetch"

and

require("whatwg-fetch")

Our backend is based on node.js, but we still need the fetch functions to run as expected on the front end, which is why we want to continue using whatwg-fetch. So the JS is actually getting executed in a browser environment but tested on the command line. Our test framework is Mocha.

[mislav]

It sounds like you're getting the error only in the test environment (which looks like it's being executed under node.js), and not in the browser environment. We don't support whatwg-fetch under node. That's why the community has come up with the node-fetch and isomorphic-fetch projects, of which you might want to try the latter, but please note that we can't provide any support for them. You'll have to figure out yourself how to load them.

[gavmor]

@aman-dureja, how have you overcome this? I am unit testing functions that make use of fetch, and do not want to stub it out. Did you end up using node-fetch or isomorphic-fetch in test, as mislav suggested?

[mmiller42]

Late to respond, but since I suffered from this problem for a few hours, I'd figure I'd post our team's solution.

We were using Webpack, so in our test environment, we added the ProvidePlugin and created a global variable self which was just an alias for Node's global object. If you look at the source for whatwg-fetch, it will attach the fetch function on an object called self, or fall back to the value of this in the global context, which is normally the window object, but is undefined in the test environment.

plugins: [
  new webpack.DefinePlugin({
    self: 'global',
  }),
],