solana
solana copied to clipboard
Web3.js `react-native-url-polyfill` dependency causing issues on react web apps
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
Can you try one of two things:
- Move
react-native
to being apeerDependency
instead of adependency
in this library. - 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
},
…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?
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.