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..... npmjs.com/package/isomorphic-unfetch + github.com/lquixada/cross-fetch — nanobar
– nanobar, Commented May 30, 2022 at 12:34
Use Node.js 16 or higher as it has built-in support for fetch api — Ubaid Hussain
– Ubaid Hussain, Commented May 30, 2022 at 12:42

Besworks · Accepted Answer · 2022-05-30 21:49:57Z

3

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, 2022 at 21:49

answered May 30, 2022 at 21:37

Besworks

4,5931 gold badge24 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2022-05-30 12:31:36Z

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, 2022 at 12:31

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

ProgramProdigy · Accepted Answer · 2022-05-31 01:03:37Z

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, 2022 at 1:03

ProgramProdigy

456 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related