React Native Expo V4.13.0引入Web3 V1.6.1报crypto模块缺失错误如何解决

问题根因 #

该报错是Expo v4.13.0版本调整默认核心模块兼容策略导致的：新版本不再默认内置Node.js原生核心模块的polyfill，而web3@1.6.1依赖的crypto是Node.js原生模块，React Native环境本身不提供该模块。同时从报错代码行可见，逻辑判断存在global对象时会优先加载原生crypto，而非已经安装的crypto-browserify，RN环境存在global对象，所以触发模块找不到的问题。

解决步骤 #

1. 安装所需polyfill依赖 #

执行以下命令安装缺失的核心模块兼容包：

# 用npm的话执行
npm install crypto-browserify stream-browserify assert buffer
# 用yarn的话执行
yarn add crypto-browserify stream-browserify assert buffer

额外安装stream、assert、buffer是为了避免web3其他依赖项后续抛出同类核心模块缺失错误。

2. 配置Metro打包规则 #

在项目根目录找到metro.config.js（没有就新建），写入以下内容：

const { getDefaultConfig } = require('expo/metro-config');

const config = getDefaultConfig(__dirname);

config.resolver.extraNodeModules = {
  ...config.resolver.extraNodeModules,
  crypto: require.resolve('crypto-browserify'),
  stream: require.resolve('stream-browserify'),
  assert: require.resolve('assert'),
  buffer: require.resolve('buffer'),
};

module.exports = config;

该配置会告诉Metro打包时，遇到原生核心模块的引用就用我们安装的兼容包替换。

3. 全局注入替换原生模块引用 #

在项目入口文件（通常是index.js或App.js的最顶部，越先执行越好）添加以下代码：

global.crypto = require('crypto-browserify');
global.Buffer = global.Buffer || require('buffer').Buffer;

这一步会强制让web3的代码读取到我们注入的兼容版crypto，不会再尝试加载不存在的原生crypto模块。

4. 清缓存重启服务 #

完成配置后执行以下操作清除所有缓存，避免旧缓存影响：

• 清除watchman监听：watchman watch-del-all
• 删除依赖文件夹与锁文件：rm -rf node_modules yarn.lock package-lock.json
• 重新安装依赖：yarn install
• 启动时重置Metro缓存：yarn start --reset-cache
• 清除本地临时缓存：rm -rf /tmp/metro-*

如果后续仍有其他Node.js核心模块缺失报错，只需找到对应模块的browserify兼容包，重复上述添加到metro配置、全局注入的步骤即可。

内容的提问来源于stack exchange，提问作者bilionjacopo