Create Web3js react native shim package

web3 / web3.js

Collection of comprehensive TypeScript libraries for Interaction with the Ethereum JSON RPC API and utility functions.

https://web3js.org/

Other

19.36k stars 4.96k forks source link

Create Web3js react native shim package #7313

Open avkos opened 1 month ago

avkos commented 1 month ago

Related to the investigation in issue #7198

run the test on react-native (expo) and check what extra shims need to be installed to make it work
create a separate package web3js-react-native-shims and include everything that should be installed to make web3js work on react-native

krzysu commented 2 days ago

I figured out why React Native works only with the default import from web3.js and not with named imports. The issue lies in how React Native’s Metro bundler resolves modules. It prioritizes the "browser" field in a package’s package.json for module resolution. See the Metro documentation here.

In the case of web3.js, the "browser" field points to a minimized file:

"browser": "./dist/web3.min.js"

krzysu commented 1 day ago

I discovered that the react-native-quick-crypto package resolves all React Native compatibility issues for web3.js. This means we don’t need a dedicated shim package; instead, we can add a dedicated React Native setup page to the documentation for clarity.

Looking ahead, future versions of web3.js should aim to eliminate dependencies on Node.js-specific modules like crypto, buffer, and stream. This will ensure better compatibility across JS environments.