lint fail when upgrading to nx 20 #28420

robertIsaac · 2024-10-12T18:52:36Z

Current Behavior

when trying to upgrade from nx 19.8 to nx 20.0 I see the lint job error for all html files in rule @typescript-eslint/ban-ts-comment

here is my root eslint file

const nx = require('@nx/eslint-plugin');
const esBan = require('eslint-plugin-ban');
const esImport = require('eslint-plugin-import');
const ts = require('typescript-eslint');

module.exports = ts.config(
  ...nx.configs['flat/base'],
  ...nx.configs['flat/typescript'],
  ...nx.configs['flat/javascript'],
  {
    files: ['**/*.ts'],
    extends: [
      ...ts.configs.recommendedTypeChecked,
      ...ts.configs.stylisticTypeChecked,
      ...ts.configs.strictTypeChecked,
    ],
    languageOptions: {
      parserOptions: {
        projectService: true,
        tsconfigRootDir: __dirname,
      },
    },
  },
  {
    files: ['**/*.ts', '**/*.js'],
    plugins: {
      import: esImport,
      ban: esBan,
    },
    rules: {
      'no-undef': 'off',
      'no-constant-binary-expression': 'error',
      'no-constructor-return': 'error',
      'no-duplicate-imports': 'error',
      'no-new-native-nonconstructor': 'error',
      'no-promise-executor-return': 'error',
      'no-self-compare': 'error',
      'no-template-curly-in-string': 'error',
      'no-unreachable-loop': 'error',
      'no-unused-private-class-members': 'error',
      'default-param-last': 'error',
      curly: 'error',
      'sort-imports': ['error', { ignoreDeclarationSort: true }],
      '@nx/enforce-module-boundaries': [
        'error',
        {
          enforceBuildableLibDependency: true,
          allow: [],
          depConstraints: [
            {
              sourceTag: '*',
              onlyDependOnLibsWithTags: ['*'],
            },
          ],
        },
      ],
      // TODO to be enabled after eslint-plugin-import ship support for eslint 9
      // 'import/newline-after-import': 'error',
      'import/order': [
        'error',
        {
          alphabetize: { order: 'asc' },
          'newlines-between': 'never',
        },
      ],
    },
  },
  {
    files: ['**/*.ts'],
    extends: [
      ...ts.configs.recommendedTypeChecked,
      ...ts.configs.stylisticTypeChecked,
      ...ts.configs.strictTypeChecked,
    ],
    rules: {
      '@typescript-eslint/no-namespace': ['error', { allowDeclarations: true }],
      // `ignoreStatic` is true for angular Validators e.g. `Validators.required`
      '@typescript-eslint/unbound-method': ['error', { ignoreStatic: true }],
      '@typescript-eslint/no-unused-vars': [
        'error',
        { argsIgnorePattern: '^_', ignoreRestSiblings: true },
      ],
      '@typescript-eslint/no-extraneous-class': 'off',
      '@typescript-eslint/no-unnecessary-condition': 'error',
      '@typescript-eslint/consistent-indexed-object-style': 'error',
      '@typescript-eslint/prefer-nullish-coalescing': 'error',
      '@typescript-eslint/prefer-optional-chain': 'error',
      '@typescript-eslint/explicit-member-accessibility': [
        'error',
        { accessibility: 'no-public' },
      ],
      '@typescript-eslint/no-confusing-void-expression': 'error',
      '@typescript-eslint/no-duplicate-type-constituents': 'error',
      '@typescript-eslint/no-import-type-side-effects': 'error',
      '@typescript-eslint/no-unnecessary-qualifier': 'error',
      '@typescript-eslint/prefer-readonly': 'error',
      '@typescript-eslint/promise-function-async': 'error',
      '@typescript-eslint/sort-type-constituents': 'error',
      '@typescript-eslint/explicit-module-boundary-types': 'error',
      '@typescript-eslint/no-misused-promises': [
        'error',
        {
          checksVoidReturn: {
            properties: false,
            arguments: false,
          },
        },
      ],
      '@typescript-eslint/restrict-template-expressions': [
        'error',
        {
          allowNumber: true,
        },
      ],
    },
  },
  {
    files: ['**/*.spec.ts'],
    rules: {
      'ban/ban': [
        'error',
        {
          name: ['describe', 'only'],
          message: "don't focus tests",
        },
        {
          name: 'fdescribe',
          message: "don't focus tests",
        },
        {
          name: ['it', 'only'],
          message: "don't focus tests",
        },
        {
          name: 'fit',
          message: "don't focus tests",
        },
        {
          name: ['test', 'only'],
          message: "don't focus tests",
        },
        {
          name: 'ftest',
          message: "don't focus tests",
        },
        {
          name: 'xit',
          message: "don't ignore tests",
        },
      ],
    },
  },
);

and here is my angular project eslint file (this is a mono repo with nestjs project)

const nx = require('@nx/eslint-plugin');
const ts = require('typescript-eslint');
const rootConfig = require('../../eslint.config.js');

module.exports = ts.config(
  ...rootConfig,
  ...nx.configs['flat/angular'],
  ...nx.configs['flat/angular-template'],
  {
    files: ['**/*.ts'],
    rules: {
      '@angular-eslint/directive-selector': [
        'error',
        {
          type: 'attribute',
          prefix: 'interviews',
          style: 'camelCase',
        },
      ],
      '@angular-eslint/component-selector': [
        'error',
        {
          type: 'element',
          prefix: 'interviews',
          style: 'kebab-case',
        },
      ],
    },
  },
  {
    files: ['**/*.html'],
    rules: {
      '@angular-eslint/template/attributes-order': [
        'error',
        {
          alphabetical: true,
        },
      ],
    },
  },
);

Expected Behavior

@typescript-eslint/ban-ts-comment rule shouldn't apply for html file

GitHub Repo

No response

Steps to Reproduce

nx migrate latest

Nx Report

Node : 22.9.0
OS : win32-x64
Native Target : x86_64-windows
npm : 10.8.3

nx : 20.0.0
@nx/js : 20.0.0
@nx/jest : 20.0.0
@nx/eslint : 20.0.0
@nx/workspace : 20.0.0
@nx/angular : 20.0.0
@nx/devkit : 20.0.0
@nx/eslint-plugin : 20.0.0
@nx/nest : 20.0.0
@nx/node : 20.0.0
@nx/web : 20.0.0
@nx/webpack : 20.0.0
typescript : 5.5.3

Registered Plugins:
@nx/eslint/plugin
@nx/jest/plugin

Community plugins:
ng-mocks : 14.13.1

Failure Logs

TypeError: Cannot read properties of undefined (reading 'at')
Occurred while linting F:\interviews\apps\fe\src\app\add-question\add-question.component.html:1
Rule: "@typescript-eslint/ban-ts-comment"

Package Manager Version

No response

Operating System

macOS
Linux
Windows
Other (Please specify)

Additional Information

No response

The text was updated successfully, but these errors were encountered:

oo00spy00oo · 2024-10-13T04:48:28Z

The same issue with me:

➜ npx nx migrate latest
Fetching meta data about packages.
It may take a few minutes.
Fetching nx@20.0.0
Fetching nx@20.0.0
Fetching @nx/linter@20.0.0
Fetching @nx/js@20.0.0
Fetching @nx/node@20.0.0
Unable to fetch migrations for @nx/linter@20.0.0: Command failed: npm install @nx/linter@20.0.0
npm error code ETARGET
npm error notarget No matching version found for @nx/linter@20.0.0.
npm error notarget In most cases you or one of your dependencies are requesting
npm error notarget a package version that doesn't exist.
npm error A complete log of this run can be found in: .npm/_logs/2024-10-13T04_46_08_379Z-debug-0.log


 NX   The migrate command failed.


 NX   Cannot read properties of undefined (reading 'schematics')

Pass --verbose to see the stacktrace.

Command failed: /var/folders/lg/q8c1l9rd6vl_hzvnym7lpy4w0000gn/T/tmp-10182-HAbf4wh10kpY/node_modules/.bin/nx _migrate latest

draylegend · 2024-10-13T10:16:52Z

same in a fresh angular monorepo

Error

$ nx affected:lint --fix --verbose

NX   Affected criteria defaulted to --base=main --head=HEAD


NX   Running target lint for project admin:

- admin

With additional flags:
--fix=true

———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

> nx run admin:lint --fix


Linting "admin"...

NX   Cannot read properties of undefined (reading 'at')

Occurred while linting /home/dl/my-project/apps/admin/src/index.html:2
Rule: "@typescript-eslint/ban-ts-comment"
TypeError: Cannot read properties of undefined (reading 'at')
Occurred while linting /home/dl/my-project/apps/admin/src/index.html:2
Rule: "@typescript-eslint/ban-ts-comment"
at Program (/home/dl/my-project/node_modules/@typescript-eslint/eslint-plugin/dist/rules/ban-ts-comment.js:118:50)
at ruleErrorHandler (/home/dl/my-project/node_modules/eslint/lib/linter/linter.js:1084:48)
at /home/dl/my-project/node_modules/eslint/lib/linter/safe-emitter.js:45:58
at Array.forEach (
<anonymous>)
  at Object.emit (/home/dl/my-project/node_modules/eslint/lib/linter/safe-emitter.js:45:38)
  at NodeEventGenerator.applySelector
  (/home/dl/my-project/node_modules/eslint/lib/linter/node-event-generator.js:297:26)
  at NodeEventGenerator.applySelectors
  (/home/dl/my-project/node_modules/eslint/lib/linter/node-event-generator.js:326:22)
  at NodeEventGenerator.enterNode (/home/dl/my-project/node_modules/eslint/lib/linter/node-event-generator.js:337:14)
  at runRules (/home/dl/my-project/node_modules/eslint/lib/linter/linter.js:1128:40)
  at #flatVerifyWithoutProcessors (/home/dl/my-project/node_modules/eslint/lib/linter/linter.js:1914:31)


  ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————

  NX Running target lint for project admin failed

  Failed tasks:

  - admin:lint

package.json

{
  "dependencies": {
    "@angular/animations": "18.2.8",
    "@angular/common": "18.2.8",
    "@angular/compiler": "18.2.8",
    "@angular/core": "18.2.8",
    "@angular/forms": "18.2.8",
    "@angular/platform-browser": "18.2.8",
    "@angular/platform-browser-dynamic": "18.2.8",
    "@angular/platform-server": "18.2.8",
    "@angular/router": "18.2.8",
    "@angular/ssr": "18.2.8",
    "express": "5.0.1",
    "rxjs": "7.8.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "18.2.8",
    "@angular-devkit/core": "18.2.8",
    "@angular-devkit/schematics": "18.2.8",
    "@angular/cli": "18.2.8",
    "@angular/compiler-cli": "18.2.8",
    "@angular/language-service": "18.2.8",
    "@commitlint/cli": "19.5.0",
    "@commitlint/config-conventional": "19.5.0",
    "@eslint/js": "9.12.0",
    "@nx/angular": "20.0.0",
    "@nx/eslint": "20.0.0",
    "@nx/eslint-plugin": "20.0.0",
    "@nx/js": "20.0.0",
    "@nx/web": "20.0.0",
    "@nx/workspace": "20.0.0",
    "@schematics/angular": "18.2.8",
    "@swc-node/register": "1.10.9",
    "@swc/core": "1.7.35",
    "@swc/helpers": "0.5.13",
    "@types/express": "4.17.14",
    "@typescript-eslint/utils": "8.8.1",
    "angular-eslint": "18.3.1",
    "autoprefixer": "10.4.20",
    "eslint": "9.12.0",
    "eslint-config-prettier": "9.1.0",
    "eslint-plugin-perfectionist": "3.8.0",
    "eslint-plugin-unused-imports": "4.1.4",
    "fluid-tailwind": "1.0.3",
    "husky": "9.1.6",
    "nx": "20.0.0",
    "postcss": "8.4.47",
    "prettier": "3.3.3",
    "tailwindcss": "3.4.13",
    "tslib": "2.7.0",
    "typescript": "5.5.4",
    "typescript-eslint": "8.8.1"
  }
}

draylegend · 2024-10-14T11:58:11Z

the issue lies in typescript-eslint@8.8.1. Installing typescript-eslint@8.8.0 works fine

robertIsaac · 2024-10-14T12:42:46Z

the issue lies in typescript-eslint@8.8.1. Installing typescript-eslint@8.8.0 works fine

oh brilliant, thanks for this workaround
but FYI this only happen with nx, if you generate Angular application using @angular/cli and installed typescript-eslint@8.8.1 it works fine

leosvelperez · 2024-10-14T12:45:53Z

This was fixed by #28381 and the fix will be released soon.

robertIsaac added the type: bug label Oct 12, 2024

jaysoo added the scope: linter Issues related to Eslint support in Nx label Oct 14, 2024

jaysoo self-assigned this Oct 14, 2024

leosvelperez closed this as completed Oct 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

lint fail when upgrading to nx 20 #28420

lint fail when upgrading to nx 20 #28420

robertIsaac commented Oct 12, 2024 •

edited

Loading

oo00spy00oo commented Oct 13, 2024

draylegend commented Oct 13, 2024

draylegend commented Oct 14, 2024

robertIsaac commented Oct 14, 2024

leosvelperez commented Oct 14, 2024

lint fail when upgrading to nx 20 #28420

lint fail when upgrading to nx 20 #28420

Comments

robertIsaac commented Oct 12, 2024 • edited Loading

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

Nx Report

nx : 20.0.0 @nx/js : 20.0.0 @nx/jest : 20.0.0 @nx/eslint : 20.0.0 @nx/workspace : 20.0.0 @nx/angular : 20.0.0 @nx/devkit : 20.0.0 @nx/eslint-plugin : 20.0.0 @nx/nest : 20.0.0 @nx/node : 20.0.0 @nx/web : 20.0.0 @nx/webpack : 20.0.0 typescript : 5.5.3

Registered Plugins: @nx/eslint/plugin @nx/jest/plugin

Failure Logs

Package Manager Version

Operating System

Additional Information

oo00spy00oo commented Oct 13, 2024

draylegend commented Oct 13, 2024

Error

package.json

draylegend commented Oct 14, 2024

robertIsaac commented Oct 14, 2024

leosvelperez commented Oct 14, 2024

robertIsaac commented Oct 12, 2024 •

edited

Loading

nx : 20.0.0
@nx/js : 20.0.0
@nx/jest : 20.0.0
@nx/eslint : 20.0.0
@nx/workspace : 20.0.0
@nx/angular : 20.0.0
@nx/devkit : 20.0.0
@nx/eslint-plugin : 20.0.0
@nx/nest : 20.0.0
@nx/node : 20.0.0
@nx/web : 20.0.0
@nx/webpack : 20.0.0
typescript : 5.5.3

Registered Plugins:
@nx/eslint/plugin
@nx/jest/plugin