How to fix eslintrc The file does not match your project config?

Question

In my typescript project, I am using eslint. The files below are in the root, and I have also subfolders /dist and /src.

eslintrc.js

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
  },
  rules: {
    strict: 'error',
    semi: ['error', 'always'],
    'no-cond-assign': ['error', 'always'],
  },
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
  ],
}

tsconfig.json

{
  "compilerOptions": {
    "outDir": "dist",
    "noImplicitAny": true,
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "module": "ES2020",
    "target": "ES2020",
    "lib": ["ES2020"],
    "allowJs": false,
    "alwaysStrict": true
  },
  "include": ["src"]
}

the word module on top has a red line with this error

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.
The file does not match your project config: .eslintrc.js.
The file must be included in at least one of the projects provided. eslint

How can I fix this?

Answer 1

You can now use parser options project service to resolve this issue

Typescript Parser - Project Service

This is intended to produce type information for config files such as eslint.config.js

My sample eslint config

module.exports = (async function config() {
  const { fixupPluginRules } = await import('@eslint/compat');
  const { default: love } = await import('eslint-config-love');
  const { default: pluginJsDoc } = await import('eslint-plugin-jsdoc');
  const { default: globals } = await import('globals');
  const { default: pluginJs } = await import('@eslint/js');
  const { default: pluginReact } = await import('eslint-plugin-react');
  const { default: reactHooksPlugin } = await import(
    'eslint-plugin-react-hooks'
  );
  const { default: tseslint } = await import('typescript-eslint');
  // const { default: expo } = await import('eslint-config-expo');
  const { default: eslintPluginPrettierRecommended } = await import(
    'eslint-plugin-prettier/recommended'
  );

  return [
    pluginJs.configs.recommended,
    ...tseslint.configs.recommended,
    pluginReact.configs.flat.recommended,
    pluginJsDoc.configs['flat/recommended-typescript-error'],
    eslintPluginPrettierRecommended,
    {
      ...love,
      files: ['**/*.{js,jsx,ts,tsx}'],
      plugins: {
        'react-hooks': fixupPluginRules(reactHooksPlugin),
      },
      rules: {
        ...reactHooksPlugin.configs.recommended.rules,

        // TypeScript
        '@typescript-eslint/explicit-function-return-type': 'off',
      },
    },
    {
      languageOptions: {
        globals: {
          ...globals.jest,
          ...globals.commonjs,
          ...globals.es2021,
          __DEV__: 'readonly',
          ErrorUtils: false,
          FormData: false,
          XMLHttpRequest: false,
          alert: false,
          cancelAnimationFrame: false,
          cancelIdleCallback: false,
          clearImmediate: false,
          fetch: false,
          navigator: false,
          process: false,
          requestAnimationFrame: false,
          requestIdleCallback: false,
          setImmediate: false,
          window: false,
          'shared-node-browser': true,
        },
        parserOptions: {
          // https://typescript-eslint.io/packages/parser/#projectservice
          projectService: {
            allowDefaultProject: ['*.js'],
          },
        },
      },
      settings: {
        react: {
          version: 'detect',
        },
      },
    },
  ];
})();

The code below makes sure your config files are parsed appropriately without the need to include any files in your tsconfig

       parserOptions: {
          // https://typescript-eslint.io/packages/parser/#projectservice
          projectService: {
            allowDefaultProject: ['*.js'],
          },
        },

Answer 2

I came to this question with a little different problem. I have a folder which contains some separate .ts files which I also want to run linter against (cypress folder). The option with creation of tsconfig.eslint.json really would work but including files twice is defiantly not an option for me. Imagine you have tsconfig.app.json/base.json/spec.json/cy.json and what, do maintain this include paths for all of them? No!

Especially I wonder why it is not an issue if you create a project via Nx. Or with just a newer versions of Angular (16+)

So for some reason we have to specify these ugly "files" + "parserOptions" fields in eslintrc.json. I even have to specify settings."import/parsers". and "import/resolver". I didn't find a proper way out.

But from this troubleshooting section I figured out we can specify as many tsconfigs as we want: check it out

So I just added my desired tsconfig file from cypress directory and it started to work.

"parserOptions": {
    "project": ["./tsconfig.json", "./cypress/tsconfig.json"]
  },

Answer 3

This is now documented in TypeScript ESLint's doc in I get errors telling me "The file must be included in at least one of the projects provided"

TLDR: see "Additive option" below for the best solution in my opinion.

Here's the relevant doc with added notes. This builds on a previous answer.

This error means that the file that's being linted is not included in any of the tsconfig files you provided us. A lot of the time this happens when users have test files or similar that are not included in their normal tsconfigs.

Depending on what you want to achieve:

• If you do not want to lint the file:
  • Use one of the options ESLint offers to ignore files, like a .eslintignore file, or ignorePatterns config. => See Solution 1 of this answer
• If you do want to lint the file:
  • If you do not want to lint the file with type-aware linting:
    • Use ESLint's overrides configuration to configure the file to not be parsed with type information.
      • A popular setup is to omit the above additions from top-level configuration and only apply them to TypeScript files via an override. => See the additive option below
      • Alternatively, you can add parserOptions: { project: null } to an override for the files you wish to exclude. Note that { project: undefined } will not work. => See the subtractive option below
  • If you do want to lint the file with type-aware linting:
    • Check the include option of each of the tsconfigs that you provide to parserOptions.project - you must ensure that all files match an include glob, or else our tooling will not be able to find it. => See Solution 2.1 of this answer
    • If your file shouldn't be a part of one of your existing tsconfigs (for example, it is a script/tool local to the repo), then consider creating a new tsconfig (we advise calling it tsconfig.eslint.json) in your project root which lists this file in its include. For an example of this, you can check out the configuration we use in this repo: => See Solution 2.2 of this answer or examples below
      • tsconfig.eslint.json
      • .eslintrc.js

Additive option

With this solution, you only add (i.e. enable) the parser: '@typescript-eslint/parser' option (and other related options) for the TypeScript source files. Other files like eslintrc.js won't be affected by that configuration, but will still be linted according to the rest of the configuration.

Add this to eslintrc.js

overrides: [
  {
    files: ['src/**/*.ts'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
      tsconfigRootDir: __dirname,
      project: ['./tsconfig.json'],
    },
    rules: {},
  },
],

The above configuration only uses TypeScript ESLint for files in the src directory.

Note that all TypeScript ESLint rules also need to be in the overrides entry (i.e. not the root rules option) or you'll get error messages like this:

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

Subtractive option

With this solution, you remove the parser: '@typescript-eslint/parser' option for the eslintrc.js (or eslint.cjs) configuration file.

Add this to eslintrc.js

overrides: [
  {
    files: ['./.eslintrc.js'],
    parserOptions: { project: null },
    rules: {},
  },
],

The above configuration disables TypeScript ESLint for the eslintrc.js file. You can also add other files or folders in override.files to extend this behavior.

Con: all TypeScript ESLint rules also need be removed in the overrides entry or you'll get error messages like this:

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

Answer 4

What is this error about?

The error is basically saying the file eslintrc.js itself is both:

1. Found by ESLint, but
2. Doesn't match the list of files it's supposed to lint

So, ESLint doesn't know what to do and freaks out!

Note that while this file doesn't include your code, you should decide whether you want this file to be linted (e.g. for tab vs space, or double quote vs single quote,) or not.

---

What should be done?

You can omit either (1) or (2) from the conflicting situation above.

Solution 1: Tell ESLint to ignore the file

It's easier. Just add the name of the file (e.g. .eslintrc.js) to .eslintignore.

You can also see case 1.3 of my answer, here for different ways it can be done.

• Pros: Quick. Easy. Painless.
• Cons: The formatting of this file can become inconsistent with other files in terms of tab/space or quotes style.

Solution 2: Tell ESLint to lint this file (Preferred)

Typescript-ESLint gets the list of files to include from tsconfig.json via parserOptions > project.

So, you can either add the file to the existing tsconfig.json (Solution 2.1) or create a secondary tsconfig.eslint.json to include files like this, that you want to be linted by typescript-eslint, but not necessarily processed by the Typescript compiler.

• Pros: This file, and other similar .js configs will also be included for lining and keeping everything consistent.
• Cons: You might not want these configs files to be linted. Also, it takes a bit extra work anyway.

Solution 2.1: add it to the existing tsconfig.json

// in tsconfig.json ...

    "include": [
        ".eslintrc.js",
        // ...
    ]

Solution 2.2: add it to a separate tsconfig.eslint.json file Create a file names tsconfig.eslint.json with this content:

// new file: tsconfig.eslint.json

{
    "include": [
        ".eslintrc.js"
    ]
}

and then inject it into eslintrc.js's parserOptions > project (yes, project accepts both a string, and an array of strings) :

// in eslintrc.js ...

  parserOptions: {
    project: [
        resolve(__dirname, './tsconfig.json'),
        resolve(__dirname, './tsconfig.eslint.json'),
    ],
  }

PS. This answer is very similar, I shall give some credit to that.

Answer 5

Extension on this answer, you can use below config in your tsconfig.eslint.json file

{
  "include": [
    "./**/.eslintrc.js"
  ]
}

Above rule is more general and will ensure to also include .eslintrc.js file present in other folder of your project(Side note: You can add .eslintrc.js at any folder level inside your root project. This will allow you to override the behaviour of certain rules at that project level).

Answer 6

If Jest would provide a way to configure a .yaml file it would avoid part of this issue. Cypress added their own tsconfig.json in their directory to cover for their test files but they have a similar problem with their config file.

If you want a minimalist tsconfig.jest.json it could look like this (no need to add other options):

{
  "include": ["jest.config.js", "tests/*.ts"]
}

Answer 7

Update your eslintrc.js to include:

ignorePatterns: ['.eslintrc.js']

Answer 8

same error, this worked for me: https://github.com/nestjs/nest/issues/4900#issuecomment-669743374 https://github.com/nestjs/nest/issues/4900#issuecomment-707330674

looks like config file must be named .eslintrc and use json format instead of .eslintrc.js and parserOptions.createDefaultProgram must be setted to true