React项目使用forge-apis包出现模块缺失报错的解决咨询

问题 #

我尝试通过const ForgeSDK = require('forge-apis');引入forge-apis包，但运行应用时弹出约40个错误，首个错误为：

Module not found: Error: Can't resolve 'fs' in ...\node_modules\forge-apis\src

随后出现4处...\node_modules\lru-memoizer\src\sync文件缺失的问题，剩余错误类似：

ERROR in ./node_modules/forge-apis/src/api/ObjectsApi.js 40:16-31
Module not found: Error: Can't resolve 'path' in '...\node_modules\forge-apis\src\api'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

即使安装了提示缺失的包，这些错误仍存在。我的package.json文件如下：

{
  "name": "onetwinvis",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/free-regular-svg-icons": "^6.4.0",
    "@fortawesome/free-solid-svg-icons": "^6.4.0",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "assert": "^2.0.0",
    "browserify-zlib": "^0.2.0",
    "buffer": "^6.0.3",
    "crypto": "^1.0.1",
    "crypto-browserify": "^3.12.0",
    "eslint-config-react-app": "^7.0.1",
    "forge-apis": "^0.9.6",
    "fs": "^0.0.1-security",
    "https-browserify": "^1.0.0",
    "node-polyfill-webpack-plugin": "^2.0.1",
    "os-browserify": "^0.3.0",
    "path-browserify": "^1.0.1",
    "react": "^18.2.0",
    "react-date-picker": "^10.0.3",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
    "stream-browserify": "^3.0.0",
    "url": "^0.11.0",
    "util": "^0.12.5",
    "web-vitals": "^2.1.4",
    "webpack-cli": "^5.0.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

解决方案 #

核心原因 #

forge-apis是Node.js端专属的SDK，它依赖fs、path这类Node.js核心模块，而你的项目是运行在浏览器的React前端应用。Webpack 5不再默认提供这些Node模块的polyfill，直接在前端引入就会触发模块缺失错误。

方法1：将forge-apis移到后端（推荐） #

这是最合规的解决方式：

• 搭建一个简单的Node.js后端服务（比如用Express框架），把所有Forge API的调用逻辑（获取token、操作数据等）放在后端处理
• 前端通过HTTP接口和后端通信，完全避开在浏览器环境中引入Node.js专属SDK的问题

方法2：强制为前端添加Node模块polyfill（仅临时测试用，不推荐生产环境） #

如果一定要在前端使用，需要修改Webpack配置来补充polyfill。因为react-scripts默认隐藏Webpack配置，你有两种实现方式：

方式A：eject项目（不可逆操作）

1. 执行npm run eject暴露项目的Webpack配置文件
2. 在项目根目录找到config/webpack.config.js，做以下修改：
   • 先导入NodePolyfillPlugin：

     const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
     

   • 在plugins数组中添加该插件：

     plugins: [
       // 保留原有插件，新增下面一行
       new NodePolyfillPlugin()
     ]
     

   • 找到resolve.fallback配置（没有的话就手动添加），补充模块映射：

     resolve: {
       fallback: {
         "fs": false, // 浏览器不需要文件系统模块，设为false忽略
         "path": require.resolve("path-browserify"),
         "crypto": require.resolve("crypto-browserify"),
         "stream": require.resolve("stream-browserify"),
         "util": require.resolve("util"),
         "zlib": require.resolve("browserify-zlib"),
         "https": require.resolve("https-browserify"),
         "os": require.resolve("os-browserify")
       }
     }
     

3. 重新运行npm start

方式B：使用react-app-rewired（无需eject，推荐）

1. 安装依赖：

   npm install react-app-rewired customize-cra --save-dev
   

2. 在项目根目录创建config-overrides.js文件，内容如下：

   const { override, addWebpackPlugin, addWebpackResolve } = require('customize-cra');
   const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
   
   module.exports = override(
     addWebpackPlugin(new NodePolyfillPlugin()),
     addWebpackResolve({
       fallback: {
         "fs": false,
         "path": require.resolve("path-browserify"),
         "crypto": require.resolve("crypto-browserify"),
         "stream": require.resolve("stream-browserify"),
         "util": require.resolve("util"),
         "zlib": require.resolve("browserify-zlib"),
         "https": require.resolve("https-browserify"),
         "os": require.resolve("os-browserify")
       }
     })
   );
   

3. 修改package.json中的scripts命令：

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-scripts eject"
   }
   

4. 重新运行npm start

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