2

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:

enter image description here

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:

enter image description here

functions/src/index.ts:

enter image description here

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

Improve this question

2 Answers 2

Reset to default
4

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"
    // [...]
  }
  // [...]
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

How does this help for the problem? I tried this but I still have the same problem inside my functions/src folder. It would be great to know what settings in the functions/tsconfig.json and what settings in the functions/.eslintrc.jshave to be done. To me the problem seems to be some vscode issue, since npm --prefix \"$RESOURCE_DIR\" run lint is working as expected with the firebase generated .eslintrc.js file.
It fixes the original poster's issues by telling the TypeScript ESLint parser to use the two different tsconfigs, and the tsconfg matching the React source has the jsx flag switched on. As for your other gaps with applying my answer to your setup, it varies, so I cannot say what your entire configuration should be. It may be worth noting my answer includes the necessary changes to the files posted in the question.
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.....

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.