React整合dotenv、mongoose、passport、session报错，求正确实现方案

你犯了核心错误：dotenv、mongoose、passport、session这类工具是Node.js后端专属工具，依赖Node.js内置模块（如require、fs）和服务端运行环境，浏览器完全不支持这些API，直接把后端代码塞到前端React项目里必然报错。

前端React和这些后端工具的正确协作方式是前后端分离：

1. 拆分代码到独立后端项目 #

• 单独创建Node.js后端项目（推荐用Express框架），将dotenv、mongoose、passport、session的代码移至此处：
  • 用dotenv管理后端环境变量（数据库地址、认证密钥等）
  • 用mongoose连接MongoDB并定义数据模型
  • 用passport+express-session实现用户认证、会话管理
• 后端提供RESTful API或GraphQL接口，供前端React调用

2. 前端React项目的处理 #

• 前端仅负责UI渲染和用户交互，通过fetch、axios等工具调用后端API
• 如需在前端存储用户状态，用react-query管理异步数据，或用localStorage/sessionStorage存储轻量认证信息（如JWT），但严禁存储敏感数据

3. 临时应急方案（仅开发测试用，生产环境禁止） #

如果非要在前端项目中临时兼容Node.js模块（仅用于验证逻辑，不能上线）：

• 安装依赖：npm install node-polyfill-webpack-plugin path-browserify stream-http https-browserify
• 修改config-overrides.js：

  const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
  
  module.exports = function override(config, env) {
    // 注入Node.js模块兼容插件
    config.plugins.push(new NodePolyfillPlugin());
    // 处理Node.js核心模块的降级兼容
    config.resolve.fallback = {
      ...config.resolve.fallback,
      "fs": false,
      "path": require.resolve("path-browserify"),
      "http": require.resolve("stream-http"),
      "https": require.resolve("https-browserify")
    };
    return config;
  };
  

• 注意：即便这么做，mongoose、session这类依赖服务端环境的工具仍无法在浏览器正常运行，最终还是必须拆分到后端。

• 绝对不能把后端代码（尤其是数据库连接信息、认证密钥）放到前端，会导致敏感信息泄露
• 前端运行在浏览器环境，后端运行在Node.js环境，两者只能通过API通信

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