NX flat config / convert-to-flat-config / nx.json errors

[devshack]

Current Behavior

While trying to generate library using nx g library --dry-run, the command failed with

Could not find root flat config file

After a quick research, it is recommended to convert the eslint to flat files using

nx g @nx/eslint:convert-to-flat-config

But afterwards, my nx.json is marked "red" in VSCode and I can't run any NX commands anymore. They all fail with

Failed to process project graph. Run "nx reset" to fix this. Please report the issue if you keep seeing it.

Also, my editor reports in the nx.json this issue:

An error occurred while processing files for the @nx/eslint/plugin plugin.
  - apps/administration/eslint.config.js: Key "rules": Key "@typescript-eslint/no-extra-semi": Could not find "no-extra-semi" in plugin "@typescript-eslint". Did you mean "@/no-extra-semi"?
    TypeError: Key "rules": Key "@typescript-eslint/no-extra-semi": Could not find "no-extra-semi" in plugin "@typescript-eslint". Did you mean "@/no-extra-semi"?
        ....
  - apps/reservation/eslint.config.js: Key "rules": Key "@typescript-eslint/no-extra-semi": Could not find "no-extra-semi" in plugin "@typescript-eslint". Did you mean "@/no-extra-semi"?
    TypeError: Key "rules": Key "@typescript-eslint/no-extra-semi": Could not find "no-extra-semi" in plugin "@typescript-eslint". Did you mean "@/no-extra-semi"?
        ...

It stays even if I remove all occurrences of no-extra-semi in my project.

Expected Behavior

NX works even after migration using nx g @nx/eslint:convert-to-flat-config.

GitHub Repo

No response

Steps to Reproduce

1. Use NX 19.x
2. Upgrade ot NX 20.x using migrate latest
3. Perform flat file migration using nx g @nx/eslint:convert-to-flat-config
4. nx.json is reporting errors, nx commands do not run anymore

Nx Report

Node           : 20.18.1
OS             : darwin-arm64
Native Target  : aarch64-macos
yarn           : 4.5.2

nx (global)            : 20.2.2
nx                     : 20.2.2
@nx/js                 : 20.2.2
@nx/jest               : 20.2.2
@nx/eslint             : 20.2.2
@nx/workspace          : 20.2.2
@nx/angular            : 20.2.2
@nx/devkit             : 20.2.2
@nx/eslint-plugin      : 20.2.2
@nx/module-federation  : 20.2.2
@nx/playwright         : 20.2.2
@nx/vite               : 20.2.2
@nx/web                : 20.2.2
@nx/webpack            : 20.2.2
typescript             : 5.6.3
---------------------------------------
Registered Plugins:
@nx/playwright/plugin
@nx/eslint/plugin
---------------------------------------
Community plugins:
@ngxs/store : 19.0.0
---------------------------------------

Failure Logs

An error occurred while processing files for the @nx/eslint/plugin plugin.
    - apps/administration/eslint.config.js: Key "rules": Key "@typescript-eslint/no-extra-semi": Could not find "no-extra-semi" in plugin "@typescript-eslint". Did you mean "@/no-extra-semi"?
      TypeError: Key "rules": Key "@typescript-eslint/no-extra-semi": Could not find "no-extra-semi" in plugin "@typescript-eslint". Did you mean "@/no-extra-semi"?
          at throwRuleNotFoundError (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/rule-validator.js:66:11)
          at RuleValidator.validate (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/rule-validator.js:147:17)
          at new Config (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/config.js:228:27)
          at [finalizeConfig] (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/flat-config-array.js:216:16)
          at FlatConfigArray.getConfigWithStatus (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/@eslint/config-array/dist/cjs/index.cjs:1178:55)
          at FlatConfigArray.getConfig (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/@eslint/config-array/dist/cjs/index.cjs:1196:15)
          at ESLint.calculateConfigForFile (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/eslint/eslint.js:1069:24)
          at async ESLint.isPathIgnored (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/eslint/eslint.js:1099:24)
          at async /Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/@nx/eslint/src/plugins/plugin.js:123:19
          at async Promise.all (index 0)
    - apps/reservation/eslint.config.js: Key "rules": Key "@typescript-eslint/no-extra-semi": Could not find "no-extra-semi" in plugin "@typescript-eslint". Did you mean "@/no-extra-semi"?
      TypeError: Key "rules": Key "@typescript-eslint/no-extra-semi": Could not find "no-extra-semi" in plugin "@typescript-eslint". Did you mean "@/no-extra-semi"?
          at throwRuleNotFoundError (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/rule-validator.js:66:11)
          at RuleValidator.validate (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/rule-validator.js:147:17)
          at new Config (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/config.js:228:27)
          at [finalizeConfig] (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/flat-config-array.js:216:16)
          at FlatConfigArray.getConfigWithStatus (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/@eslint/config-array/dist/cjs/index.cjs:1178:55)
          at FlatConfigArray.getConfig (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/@eslint/config-array/dist/cjs/index.cjs:1196:15)
          at ESLint.calculateConfigForFile (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/eslint/eslint.js:1069:24)
          at async ESLint.isPathIgnored (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/eslint/eslint.js:1099:24)
          at async /Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/@nx/eslint/src/plugins/plugin.js:123:19
          at async Promise.all (index 0)
    - eslint.config.js: Key "rules": Key "@typescript-eslint/no-extra-semi": Could not find "no-extra-semi" in plugin "@typescript-eslint". Did you mean "@/no-extra-semi"?
      TypeError: Key "rules": Key "@typescript-eslint/no-extra-semi": Could not find "no-extra-semi" in plugin "@typescript-eslint". Did you mean "@/no-extra-semi"?
          at throwRuleNotFoundError (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/rule-validator.js:66:11)
          at RuleValidator.validate (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/rule-validator.js:147:17)
          at new Config (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/config.js:228:27)
          at [finalizeConfig] (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/config/flat-config-array.js:216:16)
          at FlatConfigArray.getConfigWithStatus (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/@eslint/config-array/dist/cjs/index.cjs:1178:55)
          at FlatConfigArray.getConfig (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/@eslint/config-array/dist/cjs/index.cjs:1196:15)
          at ESLint.calculateConfigForFile (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/eslint/eslint.js:1069:24)
          at async ESLint.isPathIgnored (/Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/eslint/lib/eslint/eslint.js:1099:24)
          at async /Users/borisbojic/Webdevelopment/2024/grandls-frontends/node_modules/@nx/eslint/src/plugins/plugin.js:123:19
          at async Promise.all (index 0)

Package Manager Version

yarn 4.5.2

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

My nx.json

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "sharedGlobals"],
    "production": [
      "default",
      "!{projectRoot}/.eslintrc.json",
      "!{projectRoot}/eslint.config.js",  
      "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
      "!{projectRoot}/tsconfig.spec.json",
      "!{projectRoot}/jest.config.[jt]s",
      "!{projectRoot}/src/test-setup.[jt]s",
      "!{projectRoot}/test-setup.[jt]s"
    ],
    "sharedGlobals": []
  },
  "targetDefaults": {
    "@angular-devkit/build-angular:application": {
      "cache": true,
      "dependsOn": ["^build"],
      "inputs": ["production", "^production"]
    },
    "@nx/eslint:lint": {
      "cache": true,
      "inputs": [
        "default",
        "{workspaceRoot}/.eslintrc.json",
        "{workspaceRoot}/.eslintignore",
        "{workspaceRoot}/eslint.config.js"
      ]
    },
    "@nx/jest:jest": {
      "cache": true,
      "inputs": ["default", "^production", "{workspaceRoot}/jest.preset.js"],
      "options": {
        "passWithNoTests": true
      },
      "configurations": {
        "ci": {
          "ci": true,
          "codeCoverage": true
        }
      }
    },
    "e2e-ci--**/*": {
      "dependsOn": ["^build"]
    }
  },
  "plugins": [
    {
      "plugin": "@nx/playwright/plugin",
      "options": {
        "targetName": "e2e"
      }
    },
    {
      "plugin": "@nx/eslint/plugin",
      "options": {
        "targetName": "lint"
      }
    }
  ],
  "generators": {
    "@nx/angular:application": {
      "e2eTestRunner": "playwright",
      "linter": "eslint",
      "style": "scss",
      "unitTestRunner": "jest"
    },
    "@nx/angular:component": {
      "style": "scss"
    }
  },
  "nxCloudAccessToken": "",
  "neverConnectToCloud": true,
  "useLegacyCache": false
}