React 是纯前端框架，无法直接运行 Express（Node.js 后端服务）；报错本质是 Webpack 尝试在浏览器环境中加载 Node.js 内置模块（如 fs、http、path），必须将 Express 放入独立的后端服务进程。
react 是纯前端框架，无法直接运行 express（node.js 后端服务）；报错本质是 webpack 尝试在浏览器环境中加载 node.js 内置模块（如 fs、http、path），必须将 express 放入独立的后端服务进程。
你遇到的这一长串 Module not found: Can't resolve 'zlib'、'fs'、'crypto' 等错误，并非配置疏漏或依赖缺失，而是一个根本性架构误用——试图在 React 前端项目中直接 require 和运行 Express。这是典型的“混淆执行环境”问题：React 应用由 Webpack 打包后运行在浏览器中，而 Express 是专为 Node.js 服务器环境设计的框架，重度依赖 fs、http、path、stream 等浏览器完全不支持的 Node.js 核心模块。
Webpack 5+ 默认移除了对这些 Node.js 内置模块的自动 polyfill，因此当你在 src/App.js 中写入：
const express = require('express'); // ❌ 错误：此代码将在浏览器中执行
const app = express();
构建工具会尝试将其打包进前端 bundle，继而触发大量“无法解析 Node 模块”的错误——这不是 bug，而是预期行为，因为浏览器里根本没有 fs.readFileSync() 这样的 API。
✅ 正确做法：严格分离前后端，采用「双服务架构」
一个现代 React 应用应由两个独立进程组成：
-
前端服务：React 开发服务器（如 Vite 或 CRA 的
npm run dev），监听http://localhost:5173（Vite）或http://localhost:3000（CRA），负责渲染 UI； -
后端服务：Express 服务器（独立 Node.js 进程），监听
http://localhost:5000（或其他非冲突端口），负责处理 API 请求、数据库交互等。
? 实施步骤（推荐结构）：
-
创建清晰的项目目录结构
my-react-app/ # 项目根目录 ├── client/ # ✅ React 前端（原 create-react-app 或 Vite 项目） │ ├── src/ │ ├── public/ │ ├── package.json │ └── ... ├── server/ # ✅ Express 后端（全新 Node.js 服务） │ ├── index.js # 入口文件 │ ├── package.json │ └── ... └── package.json # 可选：根目录含 "scripts" 统一管理双服务
-
初始化并配置 Express 后端
cd server npm init -y npm install express cors
server/index.js示例：import express from 'express'; import cors from 'cors';
const app = express(); const PORT = 5000;
// 启用跨域（开发时必需） app.use(cors());
// 简单 API 路由 app.get('/api/hello', (req, res) => { res.json({ message: 'Hello from Express!' }); });
app.listen(PORT, () => {
console.log(✅ Express backend running on http://localhost:${PORT});
});
启动命令：`node server/index.js` 或 `npm start`（需在 `server/package.json` 中配置 `"start": "node index.js"`）
3. **前端调用后端 API（而非引入 Express）**
在 `client/src/App.js` 中，使用 `fetch` 或 `axios` 发起请求：
```jsx
import { useEffect, useState } from 'react';
function App() {
const [message, setMessage] = useState('');
useEffect(() => {
fetch('http://localhost:5000/api/hello')
.then(res => res.json())
.then(data => setMessage(data.message));
}, []);
return <h1>{message || 'Loading...'}</h1>;
}
export default App;
⚠️ 关键注意事项：
-
禁止在
client/src/中安装或 requireexpress、body-parser等后端依赖——它们只属于server/目录； -
开发时务必启用 CORS：Express 默认拒绝跨域请求，
app.use(cors())是开发阶段的快捷方案（生产环境需精确配置origin）； - 避免端口冲突：确保前端（如 3000）与后端（如 5000）端口不重叠；
-
生产部署需代理或反向代理：开发时可直接跨域调用；上线时建议用 Nginx 或 Vite 的
proxy配置将/api/请求转发至后端，规避浏览器 CORS 限制； -
不要尝试“修复”Webpack polyfill：手动配置
resolve.fallback强行让 Express 在浏览器运行，会导致不可预测行为（如fs读取失败、http模块无响应），违背架构原则。
? 总结：React ≠ 全栈框架
React 的职责是构建用户界面，Express 的职责是构建 HTTP 服务。二者通过 HTTP 协议通信（前端 fetch → 后端 app.get()），而非代码级耦合。这种分离不仅解决当前报错，更是可维护、可扩展、符合行业标准的工程实践。从今天起，请坚定地把 express 放进 server/，把 React 留在 client/——这才是真正跑得通、长得久的 React + Express 项目。
