React项目直接连接MongoDB出现模块解析报错如何解决

你遇到的报错和是否使用mongoose没有任何关系，核心错误是你在浏览器端运行的React前端代码里，直接调用了仅适配Node.js服务端环境的MongoDB官方驱动。
MongoDB官方Node驱动（以及封装它的mongoose）依赖大量Node.js专属的核心内置模块，就是报错里提到的os、timers、crypto、http这类模块，这些模块在浏览器运行环境中根本不存在。Webpack 5 版本开始默认不再自动为这些Node核心模块注入浏览器端兼容的polyfill，所以会持续抛出模块解析失败的错误。

• 存在致命安全漏洞：你把包含账号密码的MongoDB连接串直接写在前端代码里，所有访问站点的用户打开浏览器控制台就能直接拿到数据库权限，可以任意篡改、删除、拖走全部数据，没有任何安全保障。
• 技术层面无法实现：就算你手动安装所有缺失模块的浏览器polyfill，浏览器也不支持MongoDB原生连接依赖的TCP协议，仅支持HTTP/HTTPS/WebSocket协议，根本无法和MongoDB实例建立有效连接。
• mongoose不能解决这个问题：mongoose本质是运行在Node.js端的MongoDB ORM封装库，把它放到前端React代码里运行，会抛出和现在完全一致的核心模块缺失错误。
  你提到相同逻辑的代码在普通JS环境可以正常运行，是因为你运行代码的环境是Node.js服务端环境，而非浏览器环境，驱动本身没有问题。

• 拆分前后端职责：所有MongoDB连接、数据读写逻辑都要放到服务端代码里实现，你可以用Express、Koa、NestJS等框架搭建后端服务，在后端代码中引入mongodb或mongoose连接数据库，对外封装业务HTTP接口。
• React前端代码只负责向后端接口发起请求，拿到接口返回的数据后完成页面渲染，永远不要在前端代码里出现数据库连接凭证和直接连接数据库的逻辑。
• 如果你不想单独搭建后端服务，可以使用Next.js、Remix这类全栈React框架，在框架提供的服务端路由、Server Action等服务端运行的代码块中编写MongoDB连接逻辑，不要把连接逻辑写到componentDidMount、useEffect这类仅在客户端运行的生命周期钩子中。

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