Jacob Paris
← Back to all content

Solve parserOptions.project bug with Typescript and ESLint

TL:DR: Add the file to the "include" array in your tsconfig.json

Typescript and ESLint are both static analysis tools, but they're better used together than apart. ESLint can be configured to use Typescript as a parser, and Typescript can be configured to use ESLint as a linter.

But getting the eslint configuration right can be tricky, and it's doubly complicated when you also need to get the tsconfig right. I've been working on a project that uses both, and I ran into a bug that took me a while to figure out.

Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser.

The file does not match your project config: babel.config.js.

The file must be included in at least one of the projects provided

To debug this, I started with the eslintrc.js file where parserOptions was set

js
module.exports = {
parser: "@typescript-eslint/parser",
parserOptions: {
ecmaVersion: 2020,
sourceType: "module",
project: './tsconfig.json', // The error starts here
},

That field is supposed to point at the tsconfig.json, so it looks correct, but maybe the bug is in that file. I'm only using the typescript engine for static analysis, like an advanced linter, so my tsconfig was a bit immature.

json
{
"compilerOptions": {
"target": "es2020",
"module": "commonjs",
"checkJs": true,
"noEmit": true,
"strict": true,
"noImplicitAny": false,
"baseUrl": "./",
"paths": {
"@/*": ["./*"]
},
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [".eslintrc.js", "./app/**/*"]
}

Since the error message mentions "The file does not match your project config: babel.config.js." and I don't see that file in the include array, I added it.

diff
{
"compilerOptions": {
"target": "es2020",,
"module": "commonjs",
"checkJs": true,
"noEmit": true,
"strict": true,
"noImplicitAny": false,
"baseUrl": "./",
"paths": {
"@/*": ["./*"]
},
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
".eslintrc.js",
"./app/**/*",
+ "./babel.config.js",
+ "./jest.config.js"
]
}

I was also getting the error for jest.config.js, so I added that one as well. After restarting ESLint, the error has gone away, so this fix appears to be successful.

Professional headshot
Moulton
Moulton

Hey there! I'm a developer, designer, and digital nomad building cool things with Remix, and I'm also writing Moulton, the Remix Community Newsletter

About once per month, I send an email with:

  • New guides and tutorials
  • Upcoming talks, meetups, and events
  • Cool new libraries and packages
  • What's new in the latest versions of Remix

Stay up to date with everything in the Remix community by entering your email below.

Unsubscribe at any time.