运行nx serve启动React应用失败：Cannot read properties of undefined (reading 'build')

错误原因 #

这个报错本质是NX的@nx/webpack:dev-server执行器在尝试读取frontend项目的build目标配置时，找不到对应的配置项，触发了读取undefined属性的错误。

排查与解决步骤 #

1. 检查frontend/project.json的目标配置 #

打开frontend目录下的project.json，重点确认两个核心配置：

• 确认targets字段下存在完整的build目标配置，示例正确配置：

  "targets": {
    "build": {
      "executor": "@nx/webpack:webpack",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/frontend",
        "index": "apps/frontend/src/index.html",
        // 其他webpack相关配置
      }
    },
    "serve": {
      "executor": "@nx/webpack:dev-server",
      "options": {
        "buildTarget": "frontend:build" // 必须正确指向该项目的build目标
      }
    }
  }
  

• 如果build目标缺失，需要补充完整；如果serve的buildTarget存在拼写错误、目标名不匹配等问题，及时修正。

2. 验证项目可用目标 #

运行以下命令查看frontend项目的所有注册目标：

nx show project frontend --targets

如果输出中没有build目标，说明project.json的配置存在问题，需要重新检查并修复。

3. 清理NX缓存与重装依赖 #

缓存或依赖损坏也可能导致配置加载异常：

• 清理NX缓存：

  nx reset
  

• 删除node_modules和锁文件（package-lock.json/yarn.lock），重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 再次尝试启动应用：

  nx serve frontend
  

4. 检查根目录nx.json配置 #

确认nx.json中没有对frontend项目的目标配置进行错误覆盖：

• 查看nx.json的projects字段，如果存在frontend的配置，确保没有误删或修改build目标的继承规则。

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