fetch is not a function

Created on 31 Jan 2016  路  13Comments  路  Source: github/fetch

Hello,
I'm using fetch from npm packages and when i run the code, it says fetch is not a function.
Here is my code

var fetch = require('whatwg-fetch'),
    baseUrl = 'http://localhost:3000';

var service = {
    get: function(url) {
        return fetch(baseUrl + url)
        .then(function(response) {
            return response.json();
        });
    }
};

console.log(service.get('todo')); 

//where todo is a route in my server which returns todos in json checked it with curl it's fine.

module.exports = service;

The error i'm getting is

node src/data.js                                                                                                                                            
/Path/to/fetch/src/Data.js:15
console.log(fetch('http://localhost:3000/todo'));
            ^

TypeError: fetch is not a function
    at Object.<anonymous> (/Path/to/fetch/src/Data.js:15:13)
    at Module._compile (module.js:413:34)
    at Object.Module._extensions..js (module.js:422:10)
    at Module.load (module.js:357:32)
    at Function.Module._load (module.js:314:12)
    at Function.Module.runMain (module.js:447:10)
    at startup (node.js:139:18)
    at node.js:999:3

Please help.

Most helpful comment

This bit me too, I think it might be reasonable to make it an export, in addition to creating the global to aid browserify-style usage.

All 13 comments

The fetch function is a browser window global. It is not an export.

require('whatwg-fetch')

I am honestly apologizing for this issue, i wouldn't have asked if i read the Readme well enough.
There is a node-fetch implementation of fetch in node.js & io.js I didn't see it.
Anyway thank you, your answer made me realize it.

This bit me too, I think it might be reasonable to make it an export, in addition to creating the global to aid browserify-style usage.

+1 for exports

This really should be exported; the CloudPebble emulator seems to load modules in a way that makes it so the fetch polyfill isn't exported via window with require.

Completely nutty and counter-intuitive implementation. Caught me out too...

Same problem.
Webpack
var fetch = require('whatwg-fetch')
Expecting to get module.

This doesn't seem difficult to implement. And it would not break it running in the client.

// ... 
 self.fetch.polyfill = true;

  if (self.modules) { // node js
    // app.js:  let fetch = require("fetch")(require("xmlhttprequest").XmlHttpRequest);
    self.modules.exports = function(xmlHttpRequest) { 
      if (xmlHttpRequest) self.XMLHttpRequest = xmlHttpRequest;
      return { fetch: self.fetch };
    }     
  }
})(typeof self !== 'undefined' ? self : this);

Could someone please say what exactly is the solution to this issue?

If not required, the following error pops up:
ReferenceError: fetch is not defined

if required, the error mentioned above occurs...

@mhyousefi We don't know how you require scripts in your project, but it might look something like this:

require('whatwg-fetch')

// or:
import 'whatwg-fetch'

Or this:

<script src="./fetch.js"></script>

And then use it like so:

fetch(...)

// or:
window.fetch(...)

I was using node-fetch in netlify-lambda . I had to do
import fetch from 'node-fetch' . If I used require, I would get undefined error.

To use require:

// import fetch
global.fetch = require("node-fetch");

// implement fetch
const response = await fetch(url, { //params })

I just ran npm install node-fetch and then imported fetch as @kapilgorve pointed above:

import fetch from 'node-fetch';

I did this inside the server.ts that's generated by the Angular Universal package.

Was this page helpful?
0 / 5 - 0 ratings