Node.js（带React前端）项目部署至Heroku时，导入bcrypt库触发Cannot read properties of undefined (reading 'data')错误

看起来你遇到的问题核心大概率是把后端专用的bcrypt库放到了React前端代码里——bcrypt是依赖Node.js原生环境的模块，浏览器（前端）环境根本不支持它的底层编译逻辑，本地开发时可能因为Webpack的开发模式兼容、或者本地环境的侥幸适配暂时能跑，但到Heroku的生产打包环节，这个兼容性问题就直接暴露了，甚至一导入就报错。

给你几个针对性的解决方向：

1. 最推荐：把密码哈希逻辑移到Node.js后端 #

密码哈希这种敏感操作本来就应该放在后端做（前端哈希密码不安全，容易被逆向破解），步骤如下：

• 前端只负责收集用户输入的密码，通过API请求发送给后端
• 后端用bcrypt完成哈希操作，再存入数据库

举个简单的示例：

后端代码（Node.js/Express） #

const bcrypt = require('bcrypt');
const express = require('express');
const router = express.Router();

// 注册接口示例
router.post('/api/register', async (req, res) => {
  try {
    const { password } = req.body;
    const saltRounds = 10;
    // 生成密码哈希
    const passwordHash = await bcrypt.hash(password, saltRounds);
    // 这里把passwordHash存入你的数据库
    res.status(200).json({ message: '注册成功' });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});

module.exports = router;

前端代码（React组件） #

const handleRegister = async (e) => {
  e.preventDefault();
  const myPlaintextPassword = e.target.password.value;
  
  try {
    await fetch('/api/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ password: myPlaintextPassword })
    });
    // 处理注册成功的逻辑
  } catch (err) {
    console.error('注册失败:', err);
  }
};

2. 若必须在前端处理（不推荐）：改用纯JS版本的哈希库 #

如果因为特殊需求一定要在前端做哈希，别用原生的bcrypt，改用纯JavaScript实现的bcryptjs（注意带js后缀），它不需要原生编译，完全兼容浏览器环境：

• 安装依赖：npm install bcryptjs
• 前端导入使用：

// React组件里
const bcrypt = require('bcryptjs'); // 或ES6语法：import bcrypt from 'bcryptjs';

const hashPassword = async () => {
  const saltRounds = 10;
  const hash = await bcrypt.hash(myPlaintextPassword, saltRounds);
  // 处理哈希结果
};

3. Heroku环境额外排查点 #

如果确定是后端代码里的bcrypt报错，检查这几点：

• 确保package.json里指定了和本地一致的Node.js版本，比如：

  "engines": {
    "node": "18.x"
  }
  

  Heroku会根据这个版本安装对应环境，避免原生模块编译不兼容
• 确认Heroku使用的是官方Node.js buildpack，它默认支持原生模块的编译，如果用了自定义buildpack，可能需要调整配置

备注：内容来源于stack exchange，提问作者fugazzi