Is the library isomorphic?

[nathanqg]

Hello,

I'd like to know if node-fetch can be also used in browsers. I was checking the docs and it says that for isomorphic usages there are other libraries (https://github.com/node-fetch/node-fetch#motivation), but I noticed that my fetch calls using node-fetch have also worked when the requests are sent from the browser.

I'd like to know if this is expected or if it's still necessary to use one of the libraries described in the docs.

Have a good week and thanks!

[ichenglin]

I think you're getting confused between the two independent libraries node-fetch and Fetch API,
you could send fetch requests through browsers because most browsers have built-in Fetch API.

The official node-fetch documentation explains this quite well, as the following.

Motivation (documentation)
Instead of implementing XMLHttpRequest in Node.js to run browser-specific Fetch polyfill, why not go from native http to fetch API directly? Hence, node-fetch, minimal code for a window.fetch compatible API on Node.js runtime.

For more details on the differences between node-fetch and Fetch API,
it's better to check out the following documentation.

Node-Fetch: https://www.npmjs.com/package/node-fetch
Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

[nathanqg]

Hey @ichenglin , thanks for the detailed explanation.

I'm aware of the differences between the Fetch API available on most browsers (and coming to Node as an experimental feature) and the node-fetch library. What got me confused is that if I import node-fetch in the browser and use its default function exported from the package the request also seems to work fine and I don't understand why since the library imports a bunch of libraries from Node that are not available in the browser. I'd expect the node-fetch request to fail, but it doesn't.

I created a very simple repo on Codesanbox showing that: https://codesandbox.io/s/node-fetch-example-88ure3?file=/src/index.js if you check the network tab the response arrives correctly.

This repo is using node-fetch version 2.6.1

Am I missing something here?

[jimmywarting]

node-fetch was never meant to run in browsers. it's not a polyfill that will default to using XMLHttpRequest if fetch dose not exist. it was built dedicated just for NodeJS. hence why it also need to import a bunch of other things that NodeJS lacks. such as formdata, blob, file, abortsignal, web streams and much more.

a better way to load it would be to use conditional import \w top level await

const fetch = globalThis.fetch || await import('node-fetch').then(mod => mod.default)

[nathanqg]

I understand that node-fetch has a specific goal focused on Node hence the imports. Your solution is similar to what I'm doing in the end and works well! I am just confused about why importing the library works when sending the request from the browser and wanted to understand why that is the case.

[GabenGar]

You might want to tell the context at which you perform the fetches. NextJS for example ensures that node-fetch runs on the server but window.fetch on the client, even though the code of the module might look like you are using node-fetch.