Using node-fetch in js file in browser and in node

Question

I have built a class to do some fetch from an API and construct a suited response for my app.

I use this file both in an app that run on the browser, and on a CLI app to work on the terminal.

As I built the browser app first, there was no import to node-fetch. Now when I try to use this .js file in my CLI app, it returns error saying fetch is not defined.

If I add to my api client .js file: import fetch from "node-fetch" then now my browser app is not working as well, print to the console:

Uncaught TypeError: Failed to resolve module specifier "node-fetch". Relative references must start with either "/", "./", or "../".

Is there anyway to apply fetch and use the same file for both?

Thanks

The readme has links for cross env fetch..... https://www.npmjs.com/package/isomorphic-unfetch + https://github.com/lquixada/cross-fetch — Dominic, May 30 '22 at 12:34
Use Node.js 16 or higher as it has built-in support for fetch api — Ubaid Hussain, May 30 '22 at 12:42

Besworks · Answer 1 · 2022-05-30T21:49:57.227

2

For use-cases where you cannot update Node, you can conditionally import the Fetch API.

let fetch = globalThis?.fetch;

if (!fetch && process?.versions?.node) {
  fetch = (await import('node-fetch')).default;
}

console.log(fetch);

Note that this uses top-level await.

edited May 30 '22 at 21:49

answered May 30 '22 at 21:37

Besworks

4,123
1
18
34

score 1 · Answer 2 · answered May 30 '22 at 12:31

1

Your options are:

Use Node.js 18 or newer which has native support for fetch
Use a tool like Webpack which can pick different versions of fetch depending on the target environment.

The former option is much easier (at least from a technical POV)!

answered May 30 '22 at 12:31

Quentin

914,110
126
1,211
1,335

score 1 · Answer 3 · answered May 31 '22 at 01:03

1

When using NodeJS, fetch is not an actual thing. I'd definitely replace that with the Axios module as shown below:

const axios = require('axios');

axios.get(link).then(response => {
  // ...
});

answered May 31 '22 at 01:03

ProgramProdigy

45
6

Using node-fetch in js file in browser and in node

3 Answers3