CODEWITHSUNDEEP
node.jstypescriptexpresseslint
HigoChumbo
HigoChumbo

Reputation: 1112

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

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'

The contents of \parentFolder\ProjectRoot are:

The steps to get to this point have been:

.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:

enter image description here

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

Upvotes: 34

Views: 43383

Answers (7)

Liquid Philosopher
Liquid Philosopher

Reputation: 1

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.

Upvotes: 0

Mustachio94
Mustachio94

Reputation: 1

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

Upvotes: 0

Danson
Danson

Reputation: 159

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.

Upvotes: 1

Greg
Greg

Reputation: 471

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"
         },
      }]
  }

Upvotes: 10

satish kumar
satish kumar

Reputation: 27

in parserOptions of ts config add

tsconfigRootDir: __dirname,

Upvotes: 1

Joachim Rives
Joachim Rives

Reputation: 553

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.

Upvotes: 30

Rip3rs
Rip3rs

Reputation: 1540

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
}

Upvotes: 63

Related Questions