Web3.js react-native-url-polyfill dependency causing issues on react web apps

[bmeeder22]

Problem

In web3.js version 1.47.4 the react-native-url-polyfill library was added which eventually depends on react-native. This causes issues in react native web apps from two different instances of react native being imported.

Bottom line web3.js should not be depending on react-native to begin with and dependencies should be kept as minimal as possible to reduce bundle size and prevent any dependencies in projects from clashing.

Example of an error:

TypeError: Cannot read properties of null (reading 'useState')

Proposed Solution

Remove the react-native-url-polyfill

[steveluscher]

Can you try one of two things:

1. Move react-native to being a peerDependency instead of a dependency in this library.
2. Maybe make a change to the browser field in package.json like this?

"browser": {
  "./lib/index.cjs.js": "./lib/index.browser.cjs.js",
  "./lib/index.esm.js": "./lib/index.browser.esm.js",
  "react-native": null
},

[steveluscher]

…dependencies should be kept as minimal as possible to reduce bundle size…

The react-native dependency here does not increase bundle size; we build one bundle for browsers, and a separate one for React Native. Despite including it as a dependency, it essentially gets shaken out of the browser bundle.

Which web3.js bundle gets pulled into your React Native Web project? The index.browser.cjs.js one or the index.native.cjs.js one?

[steveluscher]

Proposed Solution: Remove the react-native-url-polyfill

This polyfill was added to make web3.js compatible with bonafide React Native projects running in JSC/Hermes. This is so that the usage of new URL in connection.ts works on React Native.