React项目引入mongoose报错：Uncaught ReferenceError: require is not defined

核心问题说明 #

• 语法不兼容：React项目默认采用ES模块规范（使用import/export），而require是CommonJS模块的语法，浏览器环境不支持直接运行require语句。
• 库的使用场景错误：mongoose是专为Node.js后端设计的MongoDB连接库，不能在前端React项目中直接引入使用——前端代码运行在浏览器中，没有直接操作数据库的权限，也不符合前后端分离的架构逻辑。

正确解决方案 #

1. 将mongoose移至后端Node.js项目 #

新建或使用现有Node.js后端项目，在后端代码中使用mongoose连接数据库：

// 后端文件示例（如server.js）
const mongoose = require('mongoose');

// 连接MongoDB
mongoose.connect('mongodb://localhost:27017/your-database-name')
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.error('数据库连接失败', err));

2. 前端React通过API与后端交互 #

• 后端用Express等框架编写接口，处理数据库的增删改查逻辑。
• 前端React使用fetch或axios调用后端接口：

// React组件示例
import axios from 'axios';

const fetchDatabaseData = async () => {
  try {
    const res = await axios.get('http://localhost:3001/api/your-data');
    console.log('获取到的数据：', res.data);
  } catch (err) {
    console.error('请求失败：', err);
  }
};

（不推荐）仅解决语法兼容问题 #

如果只是想临时解决require未定义的语法问题（但仍不建议在前端用mongoose），可通过修改项目构建配置（如webpack、vite）启用CommonJS支持，但这属于非常规操作，会增加项目复杂度。

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