Intended usage for Browser/Nodejs agnostic libs unclear

[lukwallace]

Hi there -- I believe I am trying to use cross-fetch beyond it's intended means and am looking for a confirmation before I give up and pursue other solutions. Essentially, I'm trying to make an npm package that can run on both Nodejs and the browser.

So the assumption was that I could use import fetch from 'cross-fetch' and have that provide the appropriate fetch regardless of the environment. After bundling, it works fine on the browser, but I'm receive a reference error: ReferenceError: XMLHttpRequest is not defined when I try to require the output in Nodejs. A cursory look at the bundle output seems to indicate it is using the browser ponyfill, something that looks like it might be decide at bundle time?

I've made a small repo here to show my current configuration. The current alternative solution for me would be to just label cross-fetch as an external module in the bundling process, import it manually in node environments as a polyfill, and rely on the native browser fetch when it comes to the browser environments.

// Nodejs
import 'cross-fetch/polyfill';
import { doAFetchCall } from 'mylib';

// Browser
import { doAFetchCall } from 'mylib';

Please let me know if there's maybe a better way to handle this, your input on the preferred usage would be great 🙌 Thanks!

[lquixada]

I feel you're using the same bundle for both environments: Node and Browsers. If that's the case you should create a webpack build specific to node using the target config. The reason for that is webpack will choose which cross-fetch entry-point it will use ("main" or "browser") depending on the target environment.

Closing this issue for now.

[lukwallace]

@lquixada -- thanks for explaining that; this was exactly what I was looking for.

I feel you're using the same bundle for both environments: Node and Browsers.

^ This is precisely what I wanted to do -- but it looks like it isn't best practice/possible to do so.

As I understand it, I had misinterpreted 'isomorphic' to mean isomorphic during runtime, when it actually referred to isomorphic during bundle time. For my use case, since the majority of usage will come out of the browser, I'll probably look to assume a global fetch instead, and request node users to simply patch node-fetch as a global object.

Thanks!

[autr]

I feel you're using the same bundle for both environments: Node and Browsers. If that's the case you should create a webpack build specific to node using the target config. The reason for that is webpack will choose which cross-fetch entry-point it will use ("main" or "browser") depending on the target environment.

Closing this issue for now.

There is zero documentation on how to do this. Very frustrating.