ESLint root rules are ignored

[Lonli-Lokli]

Current Behavior

I have issues with React/Next projects, that if I would like to specify rules in root eslint mjs they are ignored in apps/libs
Please note I did not modify app eslint, only the root one

Expected Behavior

Errors reported based on root eslint config

GitHub Repo

https://github.com/Lonli-Lokli/vinto/tree/nx_bug

Steps to Reproduce

1. open apps\vinto\src\app\components\avatar.tsx
   unused variable there
   root eslint.config.mjs

"@typescript-eslint/no-unused-vars": [
        "error",
        { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
      ],

Nx Report

NX   Report complete - copy this into the issue template

Node           : 22.19.0
OS             : win32-x64
Native Target  : x86_64-windows
npm            : 10.9.3

nx                     : 21.5.3
@nx/js                 : 21.5.3
@nx/jest               : 21.5.3
@nx/eslint             : 21.5.3
@nx/workspace          : 21.5.3
@nx/devkit             : 21.5.3
@nx/eslint-plugin      : 21.5.3
@nx/module-federation  : 21.5.3
@nx/next               : 21.5.3
@nx/react              : 21.5.3
@nx/rollup             : 21.5.3
@nx/vite               : 21.5.3
@nx/web                : 21.5.3
@nx/webpack            : 21.5.3
typescript             : 5.9.2
---------------------------------------
Registered Plugins:
@nx/js/typescript
@nx/next/plugin
@nx/jest/plugin
@nx/eslint/plugin
---------------------------------------
Cache Usage: 6.19 MB / 31.25 GB

Failure Logs

Package Manager Version

No response

Operating System

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

Additional Information

It is related to project/lib eslint config, I believe they overrites root one.

[yashgoyal0110]

Hey @Lonli-Lokli
May i work on it?

[regdos]

I have the same problem, but I noticed a pattern.
I have two applications, one with React and one without.
root configuration

....
  {
    files: [
      '**/*.ts',
      '**/*.tsx',
      '**/*.cts',
      '**/*.mts',
      '**/*.js',
      '**/*.jsx',
      '**/*.cjs',
      '**/*.mjs',
    ],
    // Override or add rules here
    rules: {
      "@typescript-eslint/no-unused-vars": [
        "error",
        {
          caughtErrorsIgnorePattern: "^_",
          argsIgnorePattern: "^_",
          varsIgnorePattern: "^_",
        },
      ],
    },
  },
...

Non React application configuration:

import baseConfig from '../../eslint.config.mjs';

export default [
  ...baseConfig
];

React application configuration:

import nx from '@nx/eslint-plugin';
import baseConfig from '../../eslint.config.mjs';

export default [
  ...baseConfig,
  ...nx.configs['flat/react']
];

For non React application rules from root works, for React application root rules doesn't works.

[Lonli-Lokli]

I think it can be solved by moving baseConfig lower in projects eslint.config.mjs, but it will require migration for existing projects.

[jrschifa]

I ran into a similar issue migrating our repo to flat config. The issue stemmed from the fact that each project spreads flat/react AFTER base config which re-introduced rules I disabled globally. I simply flipped the spread order so that nx flat/react was first. Then, override those rules with workspace rules. And finally, project specific rules.

[Jdruwe]

Yea I guess thats's the way to go, previously my eslintrs.json file specified:

"extends": ["plugin:@nx/react", "../../../.eslintrc.json"],

Which is the same as:

  ...baseConfig,
  ...nx.configs['flat/react'],

At least I assume... Would be nice to see this confirmed by an NX member