web3/web3.js

Create Web3js react native shim package

Closed this issue · 3 comments

avkos commented

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

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

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.

krzysu commented

There is only one package required to make web3.js work with React Native: react-native-quick-crypto. This eliminates the need for a special web3 shim. The documentation page will suffice, so I’m closing this in favor of #7314.