Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config: .eslintrc.js

Question

I've just used create-react-app to start a new typescript react app and then installed firebase. I ran firebase init , selected the typescript option, enabled es lint and enabled functions.

As soon as I uncommented the boilerplate function code in functions/index.ts, I noticed some warnings in VS Code...

functions/eslintrc.js:

Giving error: "Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config: .eslintrc.js. The file must be included in at least one of the projects provided"

functions/tsconfig.json:

functions/src/index.ts:

giving error: "Parsing error: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'.eslint"

functions/package.json:

{
  "name": "functions",
  "scripts": {
    "lint": "eslint --ext .js,.ts .",
    "build": "tsc",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "14"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^9.8.0",
    "firebase-functions": "^3.14.1"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.1",
    "@typescript-eslint/parser": "^3.8.0",
    "eslint": "^7.6.0",
    "eslint-config-google": "^0.14.0",
    "eslint-plugin-import": "^2.22.0",
    "firebase-functions-test": "^0.2.0",
    "typescript": "^3.8.0"
  },
  "private": true
}

I don't understand these errors. Can someone please help?

Thanks

Answer 1

further to the above excellent suggestion by Evelyn Hathaway, and after I installed just the functions with no hosting and I changed the ".eslingrc.js: file

FROM

 .eslingrc.js
    parserOptions: {
    project: ["tsconfig.json",
   "tsconfig.dev.json"],

to

.eslingrc.js
   parserOptions: {
   project: ["./functions/tsconfig.json",
   "./functions/tsconfig.dev.json"],

At last the seemed to work after I spent a frustrating day.....

Answer 2

The first error from TypeScript ESLint is related to not being able to find a project tsconfig.json that matches your functions.

To fix this, we need to tell TypeScript ESLint where the other tsconfig.json is by editing your parserOptions .

.eslintrc.js

// [...]
"parser": "@typescript-eslint/parser",
"parserOptions": {
  "project": [
    "./tsconfig.json",
    "./functions/tsconfig.json",
  ]
}
// [...]

To fix the parsing issue related to JSX for your React files, you must add the jsx compiler option to your tsconfig.json configurations that include JSX. This will likely be your non-function configuration, and you will most likely need to set it to react-jsx for React v17+ or react in all other cases for Create React App.

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx"
    // [...]
  }
  // [...]
}