Error "Cannot use JSX unless the '--jsx' flag is provided" in all SFC since 0.34.0

[polmabri]

I receive the error "Cannot use JSX unless the '--jsx' flag is provided" in all singe file components since i updated the vscode plugin to version 0.34.0. The error is not reproducible in version 0.33.10 and before.

[lukadriel7]

I am also seeing this error, but it doesn't seem to appear on my create-vue based project. It is visible on my quasar/webpack project though. Using v0.34.1

[baka-gourd]

I am also seeing this error, in a quasar project.

[debagger]

Me too, quasar/vite project. Volar v0.34.1

[antfu]

Adding "jsx": "preserve" to tsconfig.json will bypass the warning, but I guess it's still not the ideal solution.

[debagger]

v0.34.0 - same problem
v0.33.10 - OK

[holazz]

This error came to me too :(

[equt]

@antfu Also found this workaround, but this seems to turn off the type checking for some reason.

---

The current workaround I found is to add the "jsx": "preserve", and turn on the Vueserver: Use Second Server.

[johnsoncodehk]

Template type-checking base on JSX, so "jsx": "preserve" is required after 0.34, I will record it in breaking changes.

[debagger]

For quasar (in my case quasar/vite) "jsx": "preserve" must be setup in tsconfig.node.json

[omar-dulaimi]

I faced this error after creating a new project with vue cli.

In these lines:

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
  <router-view />
</template>

[rgehrsitz]

Still an issue for me with a Quasar project after trying both workarounds. Any other ideas?

[Jawsingale]

Issue here with quasar and volar also. Not using a TS project so also do not have a tsconfig.

Edit Downgraded to 0.33.10 for now.

[johnsoncodehk]

@Jawsingale fixed in 6a1844b.

[vandelpavel]

@johnsoncodehk Still having the same problem with latest: 0.34.4.
Quasar project.

[Jawsingale]

Same :-/

[johnsoncodehk]

@vandelpavel the fixed is only for no tsconfig / jsconfig project, and it's not release yet, it will with 0.34.5.

[yaegassy]

@vandelpavel @Jawsingale This fix will be reflected in the next version (v0.34.5?).

There may be other fixes or adjustments, so until they are released, please downgrade to a version that is not problematic and use it.

[qgates]

@johnsoncodehk Just hit this problem too. Is "jsx": "preserve" the recommended fix?

[sheepa]

This problem seems to be back.

[ReaganM02]

I am experiencing the same problem while learning quasar. Never had this problem with my testing project yeterday
Cannot use JSX unless the '--jsx' flag is provided.

[Solintin]

I Solved the issue by adding : jsx": "preserve to the jsconfig.json folder. the new content in jsconfig.json looks like this
{ "compilerOptions": { "jsx": "preserve", "baseUrl": ".", "paths": { "~/*": ["./*"], "@/*": ["./*"], "~~/*": ["./*"], "@@/*": ["./*"] } }, "exclude": ["node_modules", ".nuxt", "dist"] }

in my nuxt/vue project

[ReaganM02]

I Solved the issue by adding : jsx": "preserve to the jsconfig.json folder. the new content in jsconfig.json looks like this { "compilerOptions": { "jsx": "preserve", "baseUrl": ".", "paths": { "~/*": ["./*"], "@/*": ["./*"], "~~/*": ["./*"], "@@/*": ["./*"] } }, "exclude": ["node_modules", ".nuxt", "dist"] }

in my nuxt/vue project

Thank you for sharing your solution. Tested and it worked on my learning project using quasar.

[Solintin]

OK good..

…

On Fri, Jun 17, 2022, 6:04 PM ReaganM02 ***@***.***> wrote: I Solved the issue by adding : jsx": "preserve to the jsconfig.json folder. the new content in jsconfig.json looks like this { "compilerOptions": { "jsx": "preserve", "baseUrl": ".", "paths": { "~/*": ["./*"], "@/*": ["./*"], "~~/*": ["./*"], "@@/*": ["./*"] } }, "exclude": ["node_modules", ".nuxt", "dist"] } in my nuxt/vue project Thank you for sharing your solution. Tested and it worked on my learning project using quasar. — Reply to this email directly, view it on GitHub <#1153 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APENNF7XQOVRZWTYW4JDXOLVPSVYVANCNFSM5S7277PA> . You are receiving this because you commented.Message ID: ***@***.***>

[NikitaSavc]

I have this problem too. I used "jsx": "prevense" and this line fixed it.

[zachbryant]

Adding "jsx": "preserve" to tsconfig.json will bypass the warning, but I guess it's still not the ideal solution.

This doesn't work for me. Volar just shows different errors

[smarlhens]

also stuck using 0.36.1. unable to bump to greatest version

[m3hari]

on v0.38.2 Quasar project with typescript still have this issue.

[27rogi]

Looks like 0.36.1 was latest working version without this error. At least for my project.

[benjaminv]

Add a little formatting here.
This is for Nuxt.js project not using TypeScript, and add "jsx": "preserve", to jsconfig.json file. It looks like following afterwards.

{
  "compilerOptions": {
    "jsx": "preserve", 
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".nuxt", "dist"]
}

[Uninen]

Could we get a maintainer take another look at this one? This clearly is still an issue even though the ticket is closed.

Sorry, after re-reading the conversation it's clear that this is indeed expected behavior: #1153 (comment)

[MartinX3]

Using 0.38.5 and getting this error only with my git hook lint-staged.
But not if I npm run lint.
Both execute vue-tsc --noEmit.
I assume that lint-staged ignores the "jsx": "preserve" in my tsconfig.json.

Workaround is to use
"*.vue": "bash -c vue-tsc --noEmit",
found at lint-staged/lint-staged#825 (comment)

[smarlhens]

version 0.38.9 fixed my issue on my case.

[MartinX3]

Now I get the issue js emit is not support using lint-staged.
Executing the lint task via npm works without this issue.
Also I get errors like this only with lint-staged:

src/app.vue(58,49): error TS2339: Property '$vuetify' does not exist on type 'Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue<Record<string, any>, Record<string, any>, never, never, ...>>'.
node_modules/@types/webpack/index.d.ts(32,3): error TS2305: Module '"tapable"' has no exported member 'Tapable'.
node_modules/@types/webpack/index.d.ts(1062,23): error TS2707: Generic type 'SyncWaterfallHook<T, AdditionalOptions>' requires between 1 and 2 type arguments.

The workaround still works to fix it:
"*.vue": "bash -c vue-tsc",

[johnsoncodehk]

"jsx": "preserve" is not required any more by default after v1.0.0-alpha.0, if someone have trouble with "jsx": "preserve" you can try update.

[MartinX3]

Happens again and again the workaround "*.vue": "bash -c vue-tsc", helps.

[xgqfrms]

Maybe this will help for whose use the npx command with --jsx options

# ✅ usage
$ npx tsc ./src/index.ts --jsx react 

# ❌ usage
$ npx tsc ./src/index.ts --jsx='react' 

https://stackoverflow.com/questions/50432556/cannot-use-jsx-unless-the-jsx-flag-is-provided/57637588#57637588