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.
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.
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.