React项目运行npm start编译时提示找不到child_process、fs模块

报错本质是Webpack面向浏览器端打包代码时，尝试解析Node.js专属的原生内置模块fs、child_process，这两个模块仅能在Node服务端环境运行，浏览器环境不存在对应实现，因此编译中断。
触发问题的直接来源是依赖树中的xmlhttprequest包：这个包的作用是在Node环境中模拟浏览器原生的XMLHttpRequest对象，本身就不应该被打包到前端代码中，浏览器本身自带XMLHttpRequest实现，完全不需要依赖这个包。

按以下优先级排查处理即可：

• 排查业务代码错误引入
  全局搜索项目代码中是否存在import ... from 'xmlhttprequest'或者require('xmlhttprequest')的语句，这类属于错误引入，直接删除即可，前端代码不需要手动引入XMLHttpRequest相关的第三方包。
• 修改Webpack配置兼容第三方依赖引入
  如果是项目依赖的第三方包（比如turf、csv这类工具包）内部间接依赖了xmlhttprequest，不需要修改依赖代码，直接打开项目根目录的webpack.config.js，在配置顶层添加node字段，告知Webpack打包时忽略对应Node内置模块即可：

  module.exports = {
    // 原有entry、output、module.loaders等所有配置保持不变，新增以下配置即可
    node: {
      fs: "empty",
      child_process: "empty"
    }
  }
  

  该配置会让Webpack在打包时遇到fs、child_process的引用时直接替换为空对象，不会尝试解析模块路径，也不会阻断编译流程。
• 修复依赖安装异常
  如果以上操作完成后仍有报错，属于依赖安装过程中文件损坏或版本不匹配问题，执行以下命令重装依赖即可：

  # 删掉现有依赖目录和锁文件
  rm -rf node_modules
  rm -f package-lock.json yarn.lock
  # 重新安装依赖
  npm install
  

  重装完成后重新执行npm start启动项目即可。

注意：不要单独执行npm install fs或者npm install child_process尝试安装缺失模块，这两个是Node.js内置的原生模块，npm上的第三方同名包没有实际作用，还会引入额外的兼容问题。

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