为什么我在不使用 JSX 时会收到有关 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.

Answer 1

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