Typescript / Eslint throws "Cannot read file tsconfig.json" in every project I start

Question

In other threads I read that the issue might come when eslint and tsconfig.json are not in the same working folder, but I have all the files in the project's root folder. Somehow, after initializing the project, the thrown error seems to try to find tsconfig.json in the parent folder of the project (so, outside the project):

Let's say the project is in: '\parentFolder\ProjectRoot' tsconfig is in the route: '\parentFolder\ProjectRoot\tsconfig.json

The eslint error I get (at the top of index.ts) is the following:

Parsing error: Cannot read file 'parentFolder\tsconfig.json'

Note that eslint is somehow looking for tsconfig in the wrong folder (the parent of the root folder)

The contents of \parentFolder\ProjectRoot are:

The steps to get to this point have been:

npm init
npm i -D typescript
add "tsc": "tsc" script to package.json
npm run tsc -- --init
npm i express
npm i -D eslint @types/express @typescript-eslint/eslint-plugin @typescript-eslint/parser
npm i -D ts-node-dev

.eslintrc:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "plugins": ["@typescript-eslint"],
  "env": {
    "browser": true,
    "es6": true
  },
  "rules": {
    "@typescript-eslint/semi": ["error"],
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/no-unused-vars": [
        "error", { "argsIgnorePattern": "^_" }
    ],
     "@typescript-eslint/no-explicit-any": 1,
    "no-case-declarations": 0
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "outDir": "./build/",
    "module": "commonjs",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true
  }
}

package.json (looks like changing index.js to index.ts in "main" does nothing)

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tsc": "tsc",
    "dev": "ts-node-dev index.ts",
    "lint": "eslint --ext .ts ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.9",
    "@typescript-eslint/eslint-plugin": "^4.9.0",
    "@typescript-eslint/parser": "^4.9.0",
    "eslint": "^7.14.0",
    "ts-node-dev": "^1.0.0",
    "typescript": "^4.1.2"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

index.ts (I get implicity errors here in req and res, I imagine caused by the fact that tsconfig can't be found).

const express = require('express');
const app = express();app.use(express.json());
const PORT = 3000;
app.get('/ping', (_req, res) => {
  res.send('pong');
});
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

edit:

I had typescript installed globally (and also as a dev dependency in these projects). Thinking this might be the issue, I uninstalled the global version of typescript.

When checking all global packages with npm list -g --depth 0, I get the following:

I don't know if that would be related to the issue.

Is there any .eslintrc or package.json in the parentFolder? — Shivam Singla
– Shivam Singla, Commented Dec 4, 2020 at 5:01
Nop. There is another project in the same parent folder as "ProjectRoot" with its own .eslintrc and tsconfig.json. In both cases, eslint looks for tsconfig file in the parent folder containing both projects. I thought it might be a problem with having typescript installed both locally and globally but I have uninstalled the global version and I still have the same issue. — HigoChumbo
– HigoChumbo, Commented Dec 4, 2020 at 5:09
Try changing ./tsconfig.json to tsconfig.json in .eslintrc? — Shivam Singla
– Shivam Singla, Commented Dec 4, 2020 at 5:21
Could you please add the code for these files instead of screenshots, so that one can run on their own machine? — Shivam Singla
– Shivam Singla, Commented Dec 4, 2020 at 5:22
changing ./tsconfig to tsconfig does not work. Added the code for you (just learned to to easily paste blocks of code, sorry about that) — HigoChumbo
– HigoChumbo, Commented Dec 4, 2020 at 5:37

Dharman · Accepted Answer · 2021-02-07 12:50:37Z

66

What worked for me was on the .eslintrc of the folder you are on to add:

parserOptions: {
   project: 'tsconfig.json',
   tsconfigRootDir: __dirname // <-- this did the trick for me
}

edited Feb 7, 2021 at 12:50

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Feb 7, 2021 at 12:44

Rip3rs

1,58013 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dinesh Over a year ago

in angular I had to make it like this "tsconfigRootDir": "../../"

Rahul Yadav Over a year ago

what if .eslintrc is in json format?

Jordan Soltman Over a year ago

@RahulYadav to use __dirname you'll need to convert it to .eslintrc.js and have the object exported module.exports = {...}

tiriana Over a year ago

This worked for me too, but I still have no idea what happened. Everything was working fine with my eslintrc being a static json until yesterday and today eslint started doing this thing to me. No idea what's going on.

mhvelplund Over a year ago

@RahulYadav you can convert, like Jordan suggests, or you can use the setup described by Greg above stackoverflow.com/a/76580995/511976 The latter is just potentially dangerous if there are many tsconfig files.

|

Joachim Rives · Accepted Answer · 2022-06-23 00:23:10Z

30

I'm putting this answer here as an idiot-proofing measure. This can also happen if you open the project in the wrong folder. I got this error when I opened the parent directory of the project instead of the project directory itself. I had a project in GitLab -> projectFolder and opened GitLab. I got the error saying tsconfig.json could not be read.

answered Jun 23, 2022 at 0:23

Joachim Rives

5539 silver badges24 bronze badges

1 Comment

George Tiganila Over a year ago

you just solved my issue

Greg · Accepted Answer · 2023-07-04 12:38:16Z

10

I had a very similar problem in my sub project, what resolved my issue was modifying the parserOptions in my sub project's .eslintrc.json:

  {
      "globals": {
         "__dirname": true
      },
      "overrides": [{
         "parserOptions": {
            "project": "**/tsconfig.json",
            "sourceType": "module"
         },
      }]
  }

edited Jul 4, 2023 at 12:38

answered Jun 29, 2023 at 12:19

Greg

4811 gold badge8 silver badges14 bronze badges

1 Comment

Kris.K Over a year ago

Thanks! That really helped when you have eslintrc.json format, because the other answers would probably work only with eslintrc.js format.

Suraj Rao · Accepted Answer · 2023-04-03 06:17:02Z

2

in parserOptions of ts config add

tsconfigRootDir: __dirname,

edited Apr 3, 2023 at 6:17

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Apr 3, 2023 at 6:12

satish kumar

371 bronze badge

2 Comments

pierpy Over a year ago

Hi, there is already an answer with that content. When answering, be sure to add some valuable content. Read how to answer

Poat Over a year ago

wouldn't this be in the eslint config??

Danson · Accepted Answer · 2023-12-07 01:23:52Z

1

For me, I am using VS code to edit the code. I just close the vs code and reopen it again. Then there is no error anymore. So, just make sure the path is correct, and then you can try this.It's so tricky, but it works.

answered Dec 7, 2023 at 1:23

Danson

1591 silver badge6 bronze badges

1 Comment

ioan Over a year ago

First run npx nitro prepare documented in nitro.unjs.io/guide/typescript , then reopen VSCode

Fedor · Accepted Answer · 2024-05-27 15:59:25Z

0

I had a similar issue, and I run npm install to fix this.

edited May 27, 2024 at 15:59

Fedor

24.7k45 gold badges59 silver badges187 bronze badges

answered May 24, 2024 at 8:57

Mustachio94

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Liquid Philosopher · Accepted Answer · 2024-07-04 01:49:13Z

0

Make a ".vscode" folder where your project folder is located. if your src folder is in folderA>projectFolder>src then you will make the .vscode folder inside folderA.

then inside the .vscode folder make a file "settings.json"

then save the following code inside that settings.json file

{
  "eslint.workingDirectories": [
    "./projectFolder",
  ]
}

make sure you replace "projectFolder" name with the actual name of your project folder. this fixed the problem for me.

answered Jul 4, 2024 at 1:49

Liquid Philosopher

1

Collectives™ on Stack Overflow

Typescript / Eslint throws "Cannot read file tsconfig.json" in every project I start

7 Answers 7

7 Comments

1 Comment

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

7 Comments

1 Comment

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related