Bundling cross-fetch in my lib brings node-fetch, which breaks in react-native

[nihaux]

Maybe this is just me having issues with my configuration but I have a lib that I want to use in my RN app. When I bundle it, it brings node-fetch which needs node deps

(!) Unresolved dependencies
https://rollupjs.org/guide/en#warning-treating-module-as-external-dependency
stream (imported by node_modules/node-fetch/lib/index.js, node_modules/iconv-lite/lib/streams.js, node_modules/iconv-lite/lib/extend-node.js, commonjs-external:stream)
url (imported by node_modules/node-fetch/lib/index.js, commonjs-external:url)
https (imported by node_modules/node-fetch/lib/index.js, commonjs-external:https)
http (imported by node_modules/node-fetch/lib/index.js, commonjs-external:http)
zlib (imported by node_modules/node-fetch/lib/index.js, commonjs-external:zlib)
buffer (imported by node_modules/safer-buffer/safer.js, node_modules/safe-buffer/index.js, node_modules/iconv-lite/lib/streams.js, node_modules/iconv-lite/lib/extend-node.js, commonjs-external:buffer)

Then in RN the bundler complain about those deps not being in the haste map

bundling failed: Error: Unable to resolve module `buffer` from `/Users/nhauseux/Dev/perso/NativeSleep/node_modules/yarec/dist/index.umd.js`: Module `buffer` does not exist in the Haste module map

If I remove cross-fetch pony/polyfill and bundle again, it works fine in RN. (but as i'd like the lib to work everywhere this is still a problem)

Any clue how to solve this ?

[lquixada]

node-fetch shouldn't be loaded in RN environment. cross-fetch uses a specific entry-point for React Native that proxies to the fetch provided by the environment.

maybe your bundler is resolving the wrong entry point: "main" instead of "react-native" (see package.json).

[evaneus]

I'm having a similar issue, a default rollup build will include node-fetch in browser build when using cross-fetch. Tried this with graphql-request and apollo-fetch.

Not sure if anything can be done in this lib to make it rollup-friendly or if it's something that must be handled on the rollup side.

I reproduced basic example here, just took the default rollup starter app and added graphql-request lib:

https://github.com/evaneus/rollup-starter-app

this ends up with require calls (for node-fetch) being added to the bundle.

[lquixada]

Hi folks! Thanks for the reported issues. Just like node, whenever a bundler finds an import/require statement, it's going to check the module's package.json to look for the entry point.

Here's how each resolver behaves:

• node: looks for the main property by default.
• webpack: looks for the browser, then the module and then the main properties by default. Customizable via resolve.mainFields option in the webpack.config.js file.
• rollup: looks for the main property by default. Customizable via rollup-plugin-node-resolve plugin.
• metro (React Native's packager): looks for the react-native, then the browser and then the main properties by default. See code.

And here's how cross-fetch's package.json is configured:

• "main": "dist/node-ponyfill.js" (for node)
• "browser": "dist/browser-ponyfill.js" (for webpack)
• "react-native": "dist/react-native-ponyfill.js" (for metro)

So whether you're using webpack or rollup, you probably need to configure them to resolve the same fields as React Native's metro.