[SOLVED] ESLint throw errors on included tsconfig file

Issue

I have the following repository structure:

cypress folder

• .eslintrc.js
• tsconfig.json
• basic.spec.ts

src folder

.eslintrc.js

tsconfig.base.json

tsconfig.json

My intention is to set the root tsconfig.json only for the src folder, and same goes for .eslintrc.js. Then I try to configure tsconfig.json and .eslintrc.js as well for the cypress folder. But I get the following error when running ESLint:

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

here some snippets of the configuration files:

tsconfig.base.json:

{
    "compilerOptions": {
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": false,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "removeComments": true,
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
        "alwaysStrict": true,
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitOverride": true,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noPropertyAccessFromIndexSignature": true,
        "noUncheckedIndexedAccess": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "baseUrl": "./",
        "paths": {
            "@/containers/*": ["src/components/containers/*"],
            "@/layout/*": ["src/components/layout/*"],
            "@/ui/*": ["src/components/ui/*"],
            "@/utils/*": ["src/utils/*"],
            "@/images/*": ["public/images/*"],
            "@/models/*": ["src/models/*"],
            "@/data/*": ["src/data/*"],
            "@/hooks/*": ["src/hooks/*"]
        },
        "typeRoots": ["./node_modules/@types", "./@types"]
    }
}

tsconfig.json file:

{
    "extends": "./tsconfig.base.json",
    "include": ["next-env.d.ts", "src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts"],
    "exclude": ["node_modules"]
}

.eslintrc.js file:

module.exports = {
    root: true,
    env: {
        browser: true,
        es2021: true,
    },
    extends: [
        'eslint:recommended',
        'next/core-web-vitals',
        'plugin:@typescript-eslint/recommended',
        'plugin:import/typescript',
        'prettier',
    ],
    parserOptions: {
        ecmaFeatures: {
            jsx: true,
        },
        ecmaVersion: 12,
        project: 'tsconfig.json',
        sourceType: 'module',
    },
    plugins: ['@typescript-eslint', 'unused-imports', 'react-hooks', 'node'],
};

cypress/tsconfig.json file:

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "isolatedModules": false,
        "types": ["cypress"]
    },
    "include": ["../node_modules/cypress", "./**/*.ts"],
    "exclude": []
}

cypress/.eslintrc.js file:

module.exports = {
    root: true,
    env: {
        es2021: true,
    },
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:import/typescript',
        'prettier',
    ],
    parserOptions: {
        ecmaVersion: 12,
        project: './tsconfig.json',
        sourceType: 'module',
    },
    plugins: ['@typescript-eslint', 'unused-imports', 'node'],
};

So I don’t understand why I got the error, because the basic.spec.ts is included in the cypress/tsconfig.json file.

Solution

So the problem is, ESLint detects by default current working directory as the root folder. So this led ESLint to detect root tsconfig.json.
Problem solved by doing in cypress/.eslintrc.js file:

parserOptions: {
        ecmaVersion: 12,
        project: './tsconfig.json',
        tsconfigRootDir: 'cypress',
        sourceType: 'module',
},

(could also solved by setting project value to cypress/tsconfig.json)

For more reference:
https://github.com/typescript-eslint/typescript-eslint/issues/4732

Answered By – Tal Rofe

Answer Checked By – Mary Flores (BugsFixing Volunteer)