Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'

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

like image 969
HigoChumbo Avatar asked Dec 04 '20 04:12

HigoChumbo


1 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
}
like image 134
Joseph Briggs Avatar answered Oct 02 '22 15:10

Joseph Briggs