如何避免Nrwl/Nx项目中因TS/lint错误导致构建崩溃

问题描述 #

出现TS/lint错误时，构建直接崩溃无法查看UI界面，即使已经配置了以下环境变量：

ESLINT_NO_DEV_ERRORS=true
TSC_COMPILE_ON_ERROR=true

环境信息：

$ npx nx report

 >  NX   Report complete - copy this into the issue template

   Node : 17.6.0
   OS   : darwin arm64
   yarn : 1.22.18

   nx : 14.4.3
   @nrwl/angular : Not Found
   @nrwl/cypress : 14.4.3
   @nrwl/detox : Not Found
   @nrwl/devkit : 14.4.3
   @nrwl/eslint-plugin-nx : 14.4.3
   @nrwl/express : 14.4.3
   @nrwl/jest : 14.4.3
   @nrwl/js : 14.4.3
   @nrwl/linter : 14.4.3
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 14.4.3
   @nrwl/nx-cloud : 14.2.0
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 14.4.3
   @nrwl/react-native : Not Found
   @nrwl/schematics : Not Found
   @nrwl/storybook : 14.4.3
   @nrwl/web : 14.4.3
   @nrwl/workspace : 14.4.3
   typescript : 4.7.4
   ---------------------------------------
   Community plugins:

解决办法 #

1. 调整NX项目serve目标配置 #

打开项目根目录（或对应子项目）下的project.json，找到targets.serve.options，添加或修改如下配置：

"options": {
  "emitErrors": false,
  "failOnError": false
}

如果使用自定义Webpack配置，在webpack.config.js中关闭ESLint插件的错误终止逻辑：

module.exports = (config) => {
  const eslintRule = config.module.rules.find(rule => rule.use?.some(use => use.loader.includes('eslint')));
  if (eslintRule) {
    eslintRule.use.forEach(use => {
      use.options.failOnError = false;
      use.options.failOnWarning = false;
    });
  }
  return config;
};

2. 修改ESLint相关配置 #

• 在项目的.eslintrc.json中添加failOnError: false：

{
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
      "failOnError": false
    }
  ]
}

• 在project.json的lint目标中开启无错误终止模式：

"targets": {
  "lint": {
    "executor": "@nrwl/linter:eslint",
    "options": {
      "lintFilePatterns": ["apps/your-app/**/*.{ts,tsx,js,jsx}"],
      "noFailOnError": true
    }
  }
}

3. 检查TypeScript配置 #

打开项目的tsconfig.json，确保noEmitOnError设置为false：

{
  "compilerOptions": {
    "noEmitOnError": false
  }
}

4. 升级NX到稳定版本 #

NX 14.4.3存在部分环境变量不生效的已知问题，建议升级到14.x系列最新版或15+版本：

yarn add nx@latest @nrwl/react@latest @nrwl/web@latest @nrwl/linter@latest

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