React Native集成asmcrypto.js时出现crypto模块解析失败问题求助

问题详情 #

在React Native应用中引入asmcrypto.js后，项目构建成功，但运行时抛出错误，提示无法解析crypto模块。

错误日志 #

error: Error: Unable to resolve module crypto from E:\Work\ALL CodeBase\Maptaskr\Maptaskr\node_modules\asmcrypto.js\asmcrypto.all.js: crypto could not be found within the project or in these directories:
  node_modules
  4247 | function getRandomValues(buf) {
  4248 |     if (typeof process !== 'undefined') {
> 4249 |         var nodeCrypto = require('crypto');
       |                                   ^
  4250 |         var bytes = nodeCrypto.randomBytes(buf.length);
  4251 |         buf.set(bytes);
  4252 |         return;
    at ModuleResolver.resolveDependency (E:\Work\ALL CodeBase\Maptaskr\Maptaskr\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:178:15)
    at DependencyGraph.resolveDependency (E:\Work\ALL CodeBase\Maptaskr\Maptaskr\node_modules\metro\src\node-haste\DependencyGraph.js:264:43)
    at Object.resolve (E:\Work\ALL CodeBase\Maptaskr\Maptaskr\node_modules\metro\src\lib\transformHelpers.js:170:21)
    at resolveDependencies (E:\Work\ALL CodeBase\Maptaskr\Maptaskr\node_modules\metro\src\DeltaBundler\graphOperations.js:466:33)
    at processModule (E:\Work\ALL CodeBase\Maptaskr\Maptaskr\node_modules\metro\src\DeltaBundler\graphOperations.js:232:31)
    at async addDependency (E:\Work\ALL CodeBase\Maptaskr\Maptaskr\node_modules\metro\src\DeltaBundler\graphOperations.js:361:18)
    at async Promise.all (index 8)
    at async processModule (E:\Work\ALL CodeBase\Maptaskr\Maptaskr\node_modules\metro\src\DeltaBundler\graphOperations.js:279:3)
    at async addDependency (E:\Work\ALL CodeBase\Maptaskr\Maptaskr\node_modules\metro\src\DeltaBundler\graphOperations.js:361:18)
    at async Promise.all (index 48)

自定义代码实现 #

import React, { Component } from 'react';
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import AsyncStorage from '@react-native-community/async-storage'
//import {asmcrypto,SHA256} from 'asmcrypto-lite';
import * as asmcrypto from 'asmcrypto.js';
import encoding from 'text-encoding';
import moment from 'moment';

export default class licenseCheck {

    async GetHash(input, salt) {
        var saltArray = new encoding.TextEncoder("utf-8").encode(salt);
        var inputArray = new encoding.TextEncoder("utf-8").encode(input);
        var crypted = asmcrypto.Pbkdf2HmacSha256(inputArray, saltArray, 10000, 16)
        var base64Converted = asmcrypto.bytes_to_base64(crypted);
        //console.log(base64Converted);
        return base64Converted;
    }
}

解决方法 #

核心原因 #

crypto是Node.js专属内置模块，React Native运行环境不包含该模块，因此asmcrypto.js尝试加载时触发错误。

方案一：改用asmcrypto-lite（推荐） #

asmcrypto-lite是asmcrypto.js的轻量分支，适配浏览器、React Native等非Node.js环境，无需依赖crypto模块：

1. 安装依赖：

   npm install asmcrypto-lite --save
   

2. 修改导入和代码：

   // 替换原asmcrypto.js的导入
   import { Pbkdf2HmacSha256, bytes_to_base64 } from 'asmcrypto-lite';
   
   // 简化GetHash方法
   async GetHash(input, salt) {
       var saltArray = new TextEncoder("utf-8").encode(salt);
       var inputArray = new TextEncoder("utf-8").encode(input);
       var crypted = Pbkdf2HmacSha256(inputArray, saltArray, 10000, 16);
       var base64Converted = bytes_to_base64(crypted);
       return base64Converted;
   }
   

3. 移除text-encoding依赖，React Native已内置TextEncoder，无需额外安装。

方案二：为原asmcrypto.js添加polyfill（不推荐） #

若坚持使用完整版asmcrypto.js，需配置crypto模块的polyfill：

1. 安装依赖：

   npm install react-native-crypto react-native-randombytes --save
   react-native link react-native-randombytes
   

2. 创建/修改metro.config.js：

   module.exports = {
     resolver: {
       extraNodeModules: {
         crypto: require.resolve('react-native-crypto'),
       },
     },
   };
   

3. 清除metro缓存并重启服务：

   npx react-native start --reset-cache
   

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