React项目npm run build打包失败 本地dev环境npm start运行正常

编译失败的直接原因是browserslist 版本不支持 dead 关键字，前面的循环依赖警告为非阻断性提示，不会直接导致编译失败，可后续单独优化。 #

核心问题修复 #

步骤1：确认配置位置 #

首先检查两处配置：

• 项目根目录下 package.json 中的 browserslist 字段
• 项目根目录下是否存在单独的 .browserslistrc 配置文件
  dead 是browserslist的内置关键字，用于指代超过2年没有官方维护、全球使用率低于0.5%的浏览器，旧版本的browserslist依赖无法识别该关键字，会直接抛出编译错误。

步骤2：选择修复方案（二选一即可） #

方案A：升级browserslist依赖（推荐）

执行以下命令升级browserslist到支持dead关键字的最新稳定版：

npm install browserslist@latest --save-dev

升级完成后重新执行 npm run build 即可正常打包。

方案B：修改browserslist配置

如果暂时不希望升级依赖，可以直接修改配置，移除not dead字段，或者替换为等价的旧版兼容规则：

// package.json 中修改示例
"browserslist": {
  "production": [
    ">0.2%",
    "not ie <= 11",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version"
  ]
}

修改保存后重新执行打包命令即可。 #

可选优化：消除循环依赖警告 #

如果需要消除打包前的循环依赖警告，可以按照以下步骤操作：

• 执行命令 node --trace-warnings npm run build 定位循环依赖的具体文件位置
• 调整对应文件的导入导出逻辑，拆分公共模块消除循环依赖即可

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