Why do I get a warning about JSX when I do not use JSX?

Question

I have a Vue.js component file (the framework is Quasar) where, in <template> I have the following block of code:

<q-btn
 color="green"
 label="save & continue editing"
 @click="saveCase()"
/>

It is part of other code.

This code is highlighted as an error by TypeScript:

Details of the error:

[{
    "resource": "/D:/dev-pro/secops-cases/front/src/components/Case.vue",
    "owner": "_generated_diagnostic_collection_name_#0",
    "code": "17004",
    "severity": 8,
    "message": "Cannot use JSX unless the '--jsx' flag is provided.",
    "source": "ts",
    "startLineNumber": 108,
    "startColumn": 11,
    "endLineNumber": 112,
    "endColumn": 13
}]

What does it mean? I do not use React at all, just Vue.js, Quasar and TypeScript. <q-btn> is the only element that is highlighted as errornous, any other element (generic or Quasar) is fine.

How exactly is it highlighted? It's not evident that the error refers to this element. — Estus Flask, Jun 08 '22 at 12:17
@EstusFlask: I added an image of vscode - with a piece of code specific to Quasar (`q-input`) to show that the error is localized to `q-btn` — WoJ, Jun 08 '22 at 12:48
@Voidy: yes, and everything else is fine (including all Vue3 specificities). It is just that single element that is highlighted as an error (an the app works) — WoJ, Jun 08 '22 at 13:11
Unless you have the same error when running the app, the question shouldn't be asked in general. It's IDE-specific. All tools (bundler, linter, ide, etc) implement differently the way they work with a toolchain in use, and they often behave differently. This is most likely the case here. — Estus Flask, Jun 08 '22 at 15:04
@BoussadjraBrahim: this did the trick. I do not know what but now there is no more warning related to JSX. Would you mind making an answer out of your comment so that I can accept it? Thanks! — WoJ, Jun 19 '22 at 14:03
@WoJ I get the reason behind this issue please check my edited answer — Boussadjra Brahim, Jul 01 '22 at 11:37
@BoussadjraBrahim oh - thank you very much for the follow-up. Your solution to close the tag was working, now I know why. Thanks again! — WoJ, Jul 01 '22 at 12:05

Boussadjra Brahim · Accepted Answer · 2022-07-01T11:37:26.303

2

Try to add a closing tag to avoid this warning :

<q-btn
 color="green"
 label="save & continue editing"
 @click="saveCase()"
></q-btn>

This issue can be avoided also by adding "jsx": "preserve", to the compilerOptions entry in tsconfig.json file :

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "jsx": "preserve",
  }
}

edited Jul 01 '22 at 11:37

answered Jun 19 '22 at 14:07

Boussadjra Brahim

82,684
19
144
164

Why do I get a warning about JSX when I do not use JSX?

1 Answers1