React+TypeScript项目导入express模块引发大量模块未找到错误求助

核心原因 #

Express是Node.js后端框架，依赖大量Node.js内置模块（如zlib、http、fs等）。而你用的Create React App默认是为浏览器环境配置webpack的，不会处理这些仅在Node.js环境存在的模块，所以只要导入express，就会触发这些"模块找不到"的错误——哪怕你根本没使用它。

直接解决方案 #

1. 删除不必要的express导入与依赖 #

前端项目完全不需要express，直接做以下两步：

• 删掉代码中的import { express } from 'express';语句
• 从package.json中移除express依赖：

  npm uninstall express @types/express
  

这是最合理的解决方式，因为express本来就不该出现在前端项目里。

2. 特殊场景下的兼容配置（不推荐） #

如果确实有特殊需求（比如仅需要express的类型定义，而非运行代码），可以通过修改webpack配置来忽略或替换这些Node.js模块：

• 安装react-app-rewired来修改Create React App的默认配置：

  npm install react-app-rewired --save-dev
  

• 在项目根目录创建config-overrides.js文件：

  module.exports = function override(config) {
    config.resolve.fallback = {
      ...config.resolve.fallback,
      // 用浏览器兼容包替换Node.js内置模块
      zlib: require.resolve('browserify-zlib'),
      http: require.resolve('stream-http'),
      https: require.resolve('https-browserify'),
      // 浏览器环境不存在的模块直接设为false忽略
      fs: false,
      net: false,
      tls: false,
      dns: false
    };
    return config;
  };
  

• 安装对应的浏览器兼容包：

  npm install browserify-zlib stream-http https-browserify --save
  

• 修改package.json中的scripts：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
  

额外提示 #

你的package.json里有个拼写错误：axois应该是axios，建议修正并重新安装：

npm uninstall axois && npm install axios

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