Lint errors after migrating eslintrc to flat format in NX workspace

We have an NX Workspace with different Angular apps and migrated to NX 20.4.0 and Angular 19.x (below the specific libs):

"@angular/core": "19.1.4",
"@angular-eslint/eslint-plugin": "19.0.2",
"@angular-eslint/eslint-plugin-template": "19.0.2",
"@angular-eslint/template-parser": "19.0.2",
"@eslint/eslintrc": "^3.2.0",
"@eslint/js": "9.19.0",
"@ngrx/schematics": "19.0.1",
"@nx/angular": "20.4.0",
"@nx/eslint": "20.4.0",
"@nx/eslint-plugin": "^20.4.0",
"@nx/js": "20.4.0",
"eslint": "9.19.0",
"eslint-config-prettier": "9.1.0",


Following the NX Docs we migrated the eslintrc.json configs to the new flat format with the command: nx g @nx/eslint:convert-to-flat-config

Everything went good, but now running a lint command triggers the following error:

NX Only URLs with a scheme in: file, data, and node are supported by
the default ESM loader. Received protocol 'eslint-plugin-plugin:'


This comes from the root eslint.config.mjs file:

import { FlatCompat } from '@eslint/eslintrc';
import { dirname } from 'path';
import { fileURLToPath } from 'url';
import js from '@eslint/js';
import nxEslintPlugin from '@nx/eslint-plugin';
import eslintPluginCustomRules from 'eslint-plugin-custom-rules';
import eslintPluginPluginNxAngular from 'eslint-plugin-pluginnx/angular'; <---

const compat = new FlatCompat({
baseDirectory: dirname(fileURLToPath(import.meta.url)),
recommendedConfig: js.configs.recommended,
});

export default [
{
ignores: ['**/dist'],
},
{
plugins: {
'@nx': nxEslintPlugin,
'custom-rules': eslintPluginCustomRules,
'pluginnx/angular': eslintPluginPluginNxAngular, <----
},
},
{
files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
rules: {
'@typescript-eslint/parser': 'off',
'@angular-eslint/prefer-standalone': 'off',
'@nx/enforce-module-boundaries': [
'error',
{
enforceBuildableLibDependency: true,
allow: [],
},
],
},
},
...compat
.config({
extends: ['pluginnx/typescript'],
})


The migration script generated the import path. I even tried to use: import eslintPluginPluginNxAngular from '@nx/angular'; but this then triggers another error inside the library in the node_modules:

NX Cannot find package '@ngrx/router-store' imported from
.../node_modules/@nx/angular/fesm2022/nx-angular.mjs


Aside many people having different issues in migrating eslint to the new format, I could not find a solution to my issue. It seems to me a basic import/path misconfiguration but I cannot find a way to fix it yet.

Continue reading...