What is the reason for receiving a JSX warning even though JSX is not being utilized in the code?

In my Vue.js component file using the Quasar framework, I have the following code block inside the <template>:

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

This snippet is part of a larger codebase.

TypeScript is flagging this code as an error:

https://i.sstatic.net/LOJOj.png

Error details:

[{
    "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 could this mean? I am not utilizing React in this project, only Vue.js, Quasar, and TypeScript. The <q-btn> element is the only one flagged as erroneous, while other elements (both generic and from Quasar) are unaffected.

javascripttypescriptvue.jsquasar-framework

Answer №1

To prevent receiving a warning message, make sure to include a closing tag in your code:

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

Another way to resolve this issue is by adding 

"jsx": "preserve",
to the compilerOptions section within your tsconfig.json configuration file:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Obtain unfinished designs from resolver using GraphQL Code Generator

In order to allow resolvers to return partial data and have other resolvers complete the missing fields, I follow this convention: type UserExtra { name: String! } type User { id: ID! email: String! extra: UserExtra! } type Query { user(id: ID! ...

typescriptgraphqlapollographql-codegen

multiple event listeners combined into a single function

I'm looking to streamline my button handling in JavaScript by creating just one function that can handle all the buttons on my page. Each button will trigger a different action, so I need a way to differentiate between them. I thought of using one eve ...

javascripttypescriptdom

Creating "search result pages" with HTML, PHP, Javascript, and MySQL

Consider the scenario where you have a table with two columns: id and name, containing thousands of rows. You have a search engine that allows searching by free text, using the query: SELECT * FROM `table` WHERE `name` LIKE '%$search%' The res ...

javascriptphphtmlmysql

The current error message states that the function is undefined, indicating that the Bookshelf.js model function is not being acknowledged

I have implemented a user registration API endpoint using NodeJS, ExpressJS, and Bookshelf.js. However, I encountered an error while POSTing to the register URL related to one of the functions in the User model. Here is the code snippet from routes/index. ...

javascriptnode.jsexpressbookshelf.js

Subdomain redirection issue with express-subdomain for localhost GET requests

In order to manage requests to specific subdomains, I am utilizing a package in express.js called express-subdomain. From my understanding, the subdomain constructor function requires an express router object that I pass from an exported router module. M ...

javascriptnode.jsexpresssubdomain

Error in Node.js (NPM Error)

Recently, I purchased a VPS running Ubuntu 14.4 and successfully installed Node.js 1.4. However, when attempting to run my script (node tradebot.js), I encountered the following error message! :-/ module.js:327 throw err; ^ Error: Cannot find ...

javascriptnode.jsnpm

Is it possible in Angular to directly bind the emitted output of a component to a property?

My primary application component communicates with its sub components using @Output decorated properties on the subcomponent. The output properties utilize an EventEmitter<>(). Typically, these properties emit a simple boolean or number. I want to di ...

angulartypescripteventemitter

What is the best method for automatically closing the modal window?

I implemented a modal window on my website. Within the modal, there is a green button labeled "Visit" which triggers the "Bootstrap Tour". I aim for the modal to automatically close when the tour starts. To access this feature on my site, users need to ...

javascripthtmltwitter-bootstrapbootstrap-4bootstrap-modal

Steps for transferring an uploaded .CSV file to a Web service

I'm exploring the process of sending a file uploaded from the UI (angular) to a .NET web service in order for it to parse a CSV file and create a list of objects. My current understanding of the logic flow is: File upload ---> Web Service (parse ...

.netangulartypescriptasp.net-web-api2

Having trouble with jQuery validation: Seeking clarification on the error

I have implemented some validations on a basic login page and added jQuery validation upon button click. However, the code is not functioning as expected. I have checked the console for errors but none were displayed. Here is the code for your review: ...

javascriptjqueryhtml

Guide to converting a specific tag into div using Javascript

I am working with some HTML code that includes a div: <div class="myDiv"> <a href="" title="">My link</a> <p>This is a paragraph</p> <script>//This is a script</script> </div> Additionally, I ha ...

javascriptjqueryhtmlregex

Is there a way for me to input an event in handleSumbit?

I am having trouble understanding how to implement typing in handleSubmit. Can someone help? It seems that the "password" property and the "email" property are not recognized in the "EventTarget" type. import { FormEvent, useState } from "react" import { ...

reactjstypescript

Error encountered: The call stack size has been exceeded due to the combination of Node JS, MongoDB, and Mongoose

I am facing a RangeError issue while attempting to create a new object using a predefined schema and inserting it into my mongodb database. I need assistance in debugging this error and finding a solution for it. Any help would be appreciated, thanks. App ...

javascriptnode.jsmongodbexpress

Accessing JSON data and populating a dropdown menu with JQuery

I am facing an issue with extracting values from a JSON array using jQuery. The structure of the array is as follows: [{ "": "Select your State/Region" }, { "BAL": "Balkh" }, { "BAM": "Bamian" }] Although I have attempted to loop through the array in ord ...

javascriptjqueryjson

What is the best way to incorporate Typescript React Components across various projects?

I'm venturing into developing an npm package that involves several react components implemented with typescript. As a newcomer to react and npm, I apologize if my query seems basic. Despite researching online, there isn't much information on this ...

reactjstypescriptnpm

The proper way to insert data in JavaScript and PHP

Hello. I have a new function to add a row in my form. However, I recently added a second input field and I am unsure of how to correctly insert it. Below is my JavaScript code: <script type="text/javascript" src="jquery.js"></script> <scri ...

javascriptphpsqlinputinsert

Creating MySQL query results in Node.js manufacturing process

I am looking to format the MySQL result in Node.js in a specific way. The desired result format should look like this: [ { "m_idx" :1 , "contents" : { "m_name" : "a", ...

javascriptnode.js

What is the best way to include a second (concealed) value in a cell using datatables

Query: How can I send specific cell values to a controller using POST method, where one value is visible and the other is hidden? For instance, each cell contains both Time and Date data but only the Time is displayed in the datatable. I need to post both ...

javascriptjqueryajaxdatatables

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

I am exploring a way to extract key value pairs from a CSS stylesheet related to a specific class or id into a JavaScript object for data accessibility. It is important to mention that I do not intend to apply this class directly to any DOM elements. In ...

javascriptjquerycssstylesheet

What is the best way to retrieve multiple variables using Express.js on Node.js?

Trying to fetch Form data from an HTML page to a Node Js server. The HTML file is named index.html <body> <nav> <ul> <li> <a href="#" class="button add">Add Product</a> <div class="dialog" style="displ ...

javascriptnode.jsexpress