React 是运行在浏览器中的前端框架，而 Express 是 Node.js 环境下的服务端框架；二者运行环境、模块系统和依赖生态完全不兼容，强行在 React 组件（如 App.js）中 require('express') 会导致 Webpack 尝试将 Node.js 原生模块（如 fs、http、crypto）打包进浏览器代码，从而引发大量 polyfill 缺失错误。
react 是运行在浏览器中的前端框架，而 express 是 node.js 环境下的服务端框架；二者运行环境、模块系统和依赖生态完全不兼容，强行在 react 组件（如 `app.js`）中 `require('express')` 会导致 webpack 尝试将 node.js 原生模块（如 `fs`、`http`、`crypto`）打包进浏览器代码，从而引发大量 polyfill 缺失错误。
❌ 错误认知：把 Express 当作“React 的一个库”来引入
你在 src/App.js 中写下这两行代码：
const express = require('express');
const app = express();
看似简单，实则混淆了执行环境的本质边界：
- ✅
App.js由 Webpack/Vite 打包 → 输出为浏览器可执行的 JavaScript（运行于window全局上下文）； - ❌
express依赖fs,http,net,path,crypto等 Node.js 内置模块 → 这些模块在浏览器中根本不存在，也无法被模拟（尤其fs和net）。
Webpack 5+ 默认移除了对 Node.js 核心模块的自动 polyfill，因此报错中反复出现的：
Module not found: Error: Can't resolve 'fs' Module not found: Error: Can't resolve 'http' Module not found: Error: Can't resolve 'crypto'
不是配置遗漏，而是根本性架构错误——你正试图让浏览器“假装自己是服务器”。
⚠️ 补充说明：即使你通过
resolve.fallback强行注入stream-browserify或crypto-browserify，Express 的核心能力（如监听 TCP 端口、处理 HTTP 请求生命周期、读写文件系统）在浏览器中依然完全不可用。这类“hack”只会掩盖问题，导致后续更隐蔽的运行时失败。
✅ 正确架构：前后端分离（Frontend + Backend）
现代 Web 应用的标准实践是物理隔离 + 通信协作：
| 层级 | 技术栈 | 运行环境 | 职责 | 端口示例 |
|---|---|---|---|---|
| Frontend | React（Vite/CRA） | 浏览器 | 渲染 UI、发起 API 请求、管理用户交互 |
http://localhost:5173（Vite）或 3000（CRA） |
| Backend | Express + Node.js | 本地/服务器 Node 进程 | 处理业务逻辑、数据库操作、身份验证、提供 REST/GraphQL 接口 | http://localhost:5000 |
? 实操步骤（推荐 Vite + Express 组合）
-
创建独立的后端项目（在 React 项目同级目录下）：
# 退出 React 项目目录，回到父级 cd .. mkdir my-app-backend cd my-app-backend npm init -y npm install express
-
编写
server.js（后端入口）：// my-app-backend/server.js import express from 'express'; const app = express(); const PORT = 5000; // 解析 JSON 请求体（前端 fetch 时需设置 Content-Type: application/json） app.use(express.json()); app.use(express.urlencoded({ extended: true })); // 示例 API app.get('/api/hello', (req, res) => { res.json({ message: 'Hello from Express!' }); }); app.listen(PORT, () => { console.log(`✅ Express server running on http://localhost:${PORT}`); }); -
启动后端服务：
node server.js # 或添加到 package.json scripts: # "scripts": { "dev:server": "node server.js" } -
在 React 中安全调用后端 API（
src/App.js）：import { useEffect, useState } from 'react'; function App() { const [message, setMessage] = useState(''); useEffect(() => { // ✅ 正确：通过 fetch 调用后端 API（跨域需配置代理或 CORS） fetch('http://localhost:5000/api/hello') .then(res => res.json()) .then(data => setMessage(data.message)); }, []); return <h1>{message || 'Loading...'}</h1>; } export default App; -
解决跨域问题（开发阶段）
在 React 项目根目录的vite.config.js中配置代理（避免浏览器 CORS 阻止）：// vite.config.js export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:5000', changeOrigin: true, secure: false, } } } });然后前端请求改用相对路径：
fetch('/api/hello') // 自动代理到 http://localhost:5000/api/hello
? 关键总结与避坑指南
-
永远不要在
src/下安装或requireExpress、MongoDB、MySQL 等服务端依赖 —— 它们属于backend/目录。 -
Node.js 版本建议：使用 LTS 版本（如 v20.x），确保
node -v和npm -v在终端中正常输出。 -
脚手架选择：新手强烈推荐
npm create vite@latest my-app -- --template react（比 CRA 启动更快、TS 开箱即用）。 -
调试技巧：
- 前端看浏览器控制台（Network 标签检查请求是否发出、状态码是否 200）；
- 后端看终端日志（确认 Express 是否监听成功、路由是否匹配）。
-
生产部署：
- React 构建产物（
dist/）作为静态资源交由 Nginx/Apache/Expressserve-static托管； - Express 仅负责 API 服务，不直接 serve React 的 HTML（除非你刻意做 SSR，那是另一套方案）。
- React 构建产物（
架构清晰，才能走得长远。把 Express 放回它该在的地方——服务器进程里，让 React 专注做好它的本职工作：在浏览器中创造流畅的用户体验。
