The @nx/eslint:convert-to-flat-config migration generator does not migrate parserOptions property correctly

[svoren258]

Current Behavior

Currently, the migration generator moves the parserOptions property value from the old configuration file next to the files and rules properties within the new eslint.config.js file.

Before

The .eslintrc.json file before the migration:

{
    "extends": ["../../.eslintrc.json"],
    "ignorePatterns": ["!**/*"],
    "overrides": [
        {
            "files": ["*.ts", "*.tsx"],
            "rules": {},
            "parserOptions": {
                "project": ["./tsconfig.*?.json"]
            }
        },
    ]
}

After (wrong)

The eslint.config.json file after the migration:

const baseConfig = require('../../eslint.config.js');

module.exports = [
    ...baseConfig,
    {
        files: ['**/*.ts', '**/*.tsx'],
        rules: {},
        parserOptions: { project: ['./tsconfig.*?.json'] },
    },
];

The current state produces following linting error:

WrapperError: Key "parserOptions": This appears to be in eslintrc format rather than flat config format.
...
  messageTemplate: 'eslintrc-incompat',
  messageData: { key: 'parserOptions' },
  [cause]: IncompatibleKeyError: This appears to be in eslintrc format rather than flat config format.
    ...
    messageTemplate: 'eslintrc-incompat',
    messageData: { key: 'parserOptions' }
  }
}

Expected Behavior

The flat configuration model has changed so that it expects the parserOptions property under the top-level languageOptions property as stated in the official docs.

Before

The .eslintrc.json file before the migration:

{
    "extends": ["../../.eslintrc.json"],
    "ignorePatterns": ["!**/*"],
    "overrides": [
        {
            "files": ["*.ts", "*.tsx"],
            "rules": {},
            "parserOptions": {
                "project": ["./tsconfig.*?.json"]
            }
        },
    ]
}

After (correct)

The eslint.config.json file after the migration:

const baseConfig = require('../../eslint.config.js');

module.exports = [
    ...baseConfig,
    {
        languageOptions: {
            parserOptions: { project: ['./tsconfig.*?.json'] },
        },
    },
    {
        files: ['**/*.ts', '**/*.tsx'],
        rules: {},
    },
];

GitHub Repo

No response

Steps to Reproduce

1. In your Nx repository which is using the old way of Eslint configuration (e.g. .eslintrc.json) specify the parserOptions property and run the following migration generator nx g @nx/eslint:convert-to-flat-config

Nx Report

>  NX   Report complete - copy this into the issue template

   Node   : 20.11.1
   OS     : win32-x64
   yarn   : 4.1.0
   
   nx                 : 18.0.1
   @nx/js             : 18.0.1
   @nx/jest           : 18.0.1
   @nx/linter         : 18.0.1
   @nx/eslint         : 18.0.1
   @nx/workspace      : 18.0.1
   @nx/angular        : 18.0.1
   @nx/cypress        : 18.0.1
   @nx/devkit         : 18.0.1
   @nx/esbuild        : 18.0.1
   @nx/eslint-plugin  : 18.0.1
   @nx/express        : 18.0.1
   @nx/node           : 18.0.1
   @nx/playwright     : 18.0.1
   @nx/plugin         : 18.0.1
   @nx/storybook      : 18.0.1
   @nrwl/tao          : 18.0.1
   @nx/vite           : 18.0.1
   @nx/web            : 18.0.1
   @nx/webpack        : 18.0.1
   nx-cloud           : 18.0.0
   typescript         : 5.3.3
   ---------------------------------------
   Community plugins:
   @ng-bootstrap/ng-bootstrap : 16.0.0
   @ngrx/component            : 17.0.0
   @ngrx/effects              : 17.0.0
   @ngrx/eslint-plugin        : 17.1.1
   @ngrx/store                : 17.0.0
   @ngrx/store-devtools       : 17.1.1
   @nx-dotnet/core            : 2.1.2
   @rx-angular/cdk            : 17.0.0
   @rx-angular/template       : 17.0.1
   @storybook/angular         : 7.5.3
   ng-mocks                   : 14.12.1
   ngx-toastr                 : 17.0.2
   ---------------------------------------
   Local workspace plugins:
         @themepark/nx-plugin
         @frontend/sports/nx-plugin
         @frontend/migration-kit
         @frontend/nx-plugin
         @backend/nx-plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

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

Additional Information

No response

[pumano]

today I try an attempt to migrate config to flat and got incorrect migration (nx 18.3.1):

got:

languageSettings: { parserOptions: { project: ["./tsconfig.*?.json"] } }

got languageSettings, which is not exist in eslint schema. But when I manually correct to languageOptions in main eslint.config.js, I got message that:

 Error: You have attempted to use the lint rule @typescript-eslint/prefer-optional-chain which requires the full TypeScript type-checker to be available, but you do not have `parserOptions.project` configured to point at your project tsconfig.json files in the relevant TypeScript file "overrides" block of your project ESLint config /Users/iam/org-folder/project-folder/libs/app-layout/eslint.config.js
      
      Please see https://nx.dev/guides/eslint for full guidance on how to resolve this issue.
      

Looks like global override in main eslint.config.js for languageOptions not working.

[jahusa02]

Also when I run the migration and change the languageSettings by hand to be languageOptions and add the tsParser, eslint will still not work properly.

no-unused-vars will error with every var, even if they are used

[JamesHenry]

@jahusa02 please open a new issue with full details of your situation and setup, that does not sound related to the OP

[joewIST]

We are also seeing the following error, even though the parsetOptions.project is correctly set (I think)

Error: You have attempted to use the lint rule @typescript-eslint/naming-convention which requires the full TypeScript type-checker to be available, but you do not have parserOptions.project configured to point at your project tsconfig.json files in the relevant TypeScript file "overrides" block of your project ESLint config C:\Users\joe.williams\Projects\Megatron\frontend\src\libs\shared\ui\atom\button\eslint.config.js

Any ideas on how to get round this?

[pumano]

@joewIST you should provide languageOptions to your libs with project.
Something like that:

languageOptions: {
  parserOptions: { project: 'tsconfig.*?.ts'"}
}

[joewIST]

@pumano I have already done that, still no luck.

[pumano]

@joewIST that should be in each lib, global override not working

Also Try to set It in latest in each lib

[joewIST]

@pumano This is what Nx generated for this library, plus the languageOptions that you suggest:

const baseConfig = require('../../../../../eslint.config.js');

module.exports = [
    ...baseConfig,
    {
        ignores: [
            '**/*.stories.ts',
            '**/*.spec.ts'
        ],
        languageOptions: {
            parserOptions: {
                project: 'tsconfig.*?.ts'
            }
        }
    }
];

However, this still doesn't work and I get the same errors!

I also had to convert the file to .cjs to prevent errors.

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.