1
votes

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

1

1 Answers

0
votes

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"
    // [...]
  }
  // [...]
}