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

Viewed 14399

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:

enter image description here

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

2 Answers

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
}

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.

Related