使用MERN栈连接React与MongoDB时出现Webpack编译错误

问题根源 #

你把后端服务代码（Express+Mongoose）直接放在了React前端项目中编译。Webpack 5不再默认提供Node.js核心模块的polyfill，而且React前端运行环境本身不支持Node.js后端API，这才导致了zlib、path、crypto等模块无法解析的错误。

正确解决方案：前后端项目拆分 #

MERN栈的正确架构是前端（React）和后端（Express+MongoDB）为两个独立项目，各自运行，通过HTTP请求交互。

1. 创建独立后端项目 #

• 新建一个backend文件夹，进入后执行：

  npm init -y
  npm install express mongoose cors
  

• 将你的后端代码写入backend/server.js，替换占位符为实际值：

  const express = require('express')
  const mongoose = require('mongoose')
  const cors = require('cors')
  const app = express()
  
  // 允许跨域请求
  app.use(cors())
  app.use(express.json())
  
  // 替换为你的MongoDB连接字符串
  mongoose.connect('你的MongoDB连接URL',{
    useNewUrlParser: true,
  })
  
  // 启动服务，替换为你的端口
  app.listen(3001, ()=>{
    console.log('Server is running on port 3001')
  })
  

• 启动后端服务：node server.js

2. 前端React项目配置 #

• 前端通过fetch或axios请求后端接口，示例：

  // 前端组件中请求后端
  fetch('http://localhost:3001/api/你的接口')
    .then(res => res.json())
    .then(data => console.log(data))
  

不推荐的临时修复（仅作了解） #

如果非要在前端项目中编译后端代码（不建议，存在安全和性能问题），可以通过以下方式解决Webpack 5的polyfill问题：

• 安装依赖：

  npm install node-polyfill-webpack-plugin
  

• 在React项目的webpack.config.js中添加插件：

  const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
  
  module.exports = {
    plugins: [
      new NodePolyfillPlugin()
    ]
  };
  

• 注意：如果使用create-react-app，需要通过craco或eject来修改Webpack配置。

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