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

Question

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"]
}

Can you post your tsconfig file? – jnpdx Feb 07 '21 at 19:34 — jnpdx, Feb 07 '21 at 19:34
I added it, I think mine is the same to yours – Lukas Vis Feb 07 '21 at 22:40 — Lukas Vis, Feb 07 '21 at 22:40
is your `index.ts` in the `src` directory? – jnpdx Feb 07 '21 at 22:42 — jnpdx, Feb 07 '21 at 22:42
yes it's in the `src` directory – Lukas Vis Feb 07 '21 at 22:46 — Lukas Vis, Feb 07 '21 at 22:46

score 2 · Answer 1 · edited Jun 28 '21 at 09:55

2

{
  "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

edited Jun 28 '21 at 09:55

Slava Rozhnev

9,510
6
23
39

answered Jun 28 '21 at 08:58

EMW

21
6

score 2 · Answer 2 · answered Feb 15 '22 at 13:46

2

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

answered Feb 15 '22 at 13:46

atoledo

435
5
12

This was the issue for me in a Turbo monorepo with multiple Typescript apps. Thanks! – ykadaru Jul 25 '22 at 14:39

score 0 · Answer 3 · answered Feb 07 '21 at 19:43

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:

I think the problem is my eslint settings, however I never really changed them as well. I just don't get it how come I get so many ESLINT errors on the folders that firebase generated automatically? — Lukas Vis, Feb 07 '21 at 22:43
Your `eslint` settings could very well be VSCode global defaults and not specific to the firebase project (unless you have a linter config file in your firebase directory) — jnpdx, Feb 07 '21 at 22:45
Did you look at all the solutions listed in: https://stackoverflow.com/questions/64974648/problem-with-visual-studio-code-using-react-jsx-as-jsx-value-with-create-react — jnpdx, Feb 07 '21 at 22:47

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

3 Answers3