React应用导入Node模块'bsv'后页面空白，求解决思路？

问题原因 #

bsv@2.0.10包含Node.js专属API（如crypto、文件系统模块等），浏览器环境不支持这些API，导入后会触发未捕获错误，导致React应用渲染阻塞，页面显示空白。

解决方案 #

1. 使用浏览器兼容版bsv #

改用专门适配浏览器环境的bsv-browser包：

• 卸载原包并安装兼容版：

npm uninstall bsv
npm install bsv-browser

• 修改导入代码：

import React from "react";
const bsv = require("bsv-browser");

export default function App() {
  return (
    <div className="App">
      <h1>Wallet Workshop</h1>
    </div>
  );
}

2. 配置Webpack兼容Node.js核心模块（适用于Create React App） #

通过配置Webpack模拟或忽略浏览器不支持的Node.js模块：

• 安装craco用于修改Create React App默认配置：

npm install @craco/craco --save-dev

• 在项目根目录创建craco.config.js：

module.exports = {
  webpack: {
    configure: {
      resolve: {
        fallback: {
          "crypto": require.resolve("crypto-browserify"),
          "fs": false,
          "stream": require.resolve("stream-browserify")
        }
      }
    }
  }
};

• 安装浏览器兼容依赖：

npm install crypto-browserify stream-browserify --save

• 修改package.json的启动脚本：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

3. 降级bsv版本 #

尝试使用对浏览器兼容性更好的旧版本（如1.5.6）：

npm uninstall bsv
npm install bsv@1.5.6

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