React + Node + bcrypt 的问题（找不到模块：无法解析“fs”） ode_modules\@mapbox ode-pre-gyp\lib

Question

我是 React 和 Node 的新手，所以如果我以错误的方式提出问题，我很抱歉...问题是我有一个刚刚完成的项目，一切正常，但因为我有用户注册和登录我需要实现 bcrypt 才能对我的密码进行哈希处理，并且显然不会将它们存储为纯文本。

在我使用

npm i bcrypt

安装bcrypt并使用

const bcrypt = require('bcrypt')

添加它之后，我在编译时遇到大量错误（116个错误！），但至少它们大部分是相同的错误，但我不明白如何修复它。

这是一个屏幕截图（我没有使用 webpack，至少我没有安装它并且它不在我的 package.json 依赖项中）。

Answer 1

看来您正在使用 webpack v5 并且此版本中有一些重大更改。你应该添加到 package.json 这个块：

"browser": {
    "fs": false,
    "os": false,
    "path": false
  }

因为错误表明您必须使用 polyfill 但如果您不想包含它，您可以将

fs

、

os

和

path

设置为

false

，以使用空模块而不是包含fs 模块的 polyfill。

如果您使用 Create React App，您可能需要编辑 webpack.config.json 文件（其路径为

node_modules/react-scripts/config/webpack.config.json

）并向您的

resolve.fallback

属性添加后备：

resolve: {
      // ...
      fallback: {
        //  add this 👇️
        "fs": false,
        "os": false,
        "path": false,
      }
    }

Answer 2

如果您在服务器操作中的 React 服务器组件 (RSC) 上下文中使用

bcrypt

，请确保通过在文件顶部添加

use server

指令来在服务器端运行此代码。

Answer 3

这个库解决了我的问题： https://www.npmjs.com/package/bcryptjs-react