Parsing error: Argument for '--jsx' option must be: 'preserve', 'react-native', 'react'

user_9616574 0
Viewed 4118

I am learning firebase cloud functions and in my index.ts folder I get the error message highlighted under import

I have no idea what it means and how to solve it the worst part is that the same exact code worked in the firebase tutorial video on youtube

what is wrong with this code?

import * as functions from "firebase-functions";

// Start writing Firebase Functions
// https://firebase.google.com/docs/functions/typescript

export const helloWorld = functions.https.onRequest((request, response) => {
  functions.logger.info("Hello logs!", { structuredData: true });
  response.send("Hello from Firebase!");
});

Here is my tsconfig

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017"
  },
  "compileOnSave": true,
  "include": ["src"]
}
firebase visual-studio-code typescript reactjs
3 Answers
{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
    "jsx": "react"
  },
  "compileOnSave": true,
  "include": ["src"]
}

add "jsx": "react" in compilerOptions

user_109942020

If your setup is a monorepo with multiple packages, it's possible that the problem is due to multiple different versions of typescript. I had 2 different major versions across several packages. When I unified them to a single one, the error was gone.

Or may be typescript version of your editor vs the project as depicted here

user_20358700

Most likely, you have an error in your tsconfig file. Specifically, you probably have an option definite called jsx. I would guess that you in fact don't need JSX parsing for your Firebase cloud functions, but I could be wrong.

Here's an example of my tsconfig for Firebase cloud, which works (you may need slightly different options, of course):

{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
  },
  "compileOnSave": true,
  "include": [
    "src"
  ]
}

It is also possible that your src directory is not leading to the location of your Typescript source files.

Finally, it's possible that VSCode is making assumptions about your Typescript setup that aren't correct -- this could be because you don't have a tsconfig file or because VSCode is using a different version of Typescript than your project. See possible solutions for that here: Problem with Visual Studio Code using "react-jsx" as jsx value with create-react-app

Some other resources referencing this error:

user_5609420
Related