JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)
chrissyast opened this issue · comments
Describe the bug
The above error is shown for any 'native' html (span
, div
) tag, but not for Vue components such as template
, MyComponent
.
I have the exact same repo on three machines (Two W10, one Mac) and it only happens on one (W10), so it doesn't seem to be anything wrong with the config. Nothing has been changed
To Reproduce
Difficult to provide exact reproduction because it is only happening on one environment out of three, but minimal repo provided anyway https://github.com/chrissyast/nuxt-typescript/tree/minimal_example
- Clone
- yarn install
- Open pages/index.vue
Expected behavior
No errors on <div>
tag
Additional context
A lot of the google search results were related to React and suggested it was a types issue https://stackoverflow.com/a/59046713/8940624, but I have added "@nuxt/types" to tsconfig.
On both the failing and working PC, tsc --version
yielded tsc' is not recognized as an internal or external command,
. I installed typescript on the failing PC anyway but still the issue persists
same issue here
If you are using "volar", try using "vutur".
@jihogrammer Disabling Volar worked for me. I wasn't even aware I had the extension as it was installed by default in my company's workspace config. Thanks!
This issue is unrelated to typescript... but, for anyone who stumbles on this issue:
Uninstalling volar is no longer an acceptable answer... vue-tsc will also produce this error.
install @vue/runtime-dom and then in a tsconfig.node.json referenced file, experimental mode
Here's my tsconfig.node.json:
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node"
},
"include": [
"vite.config.ts"
],
"vueCompilerOptions": {
"experimentalCompatMode": 2, // delete after migrating to vue3 (or nuxt3)
"experimentalTemplateCompilerOptions": {
"compatConfig": {
"MODE": 2
} // delete after migrating to vue3 (or nuxt3)
}
}
}
I had been running the vue application in a docker container and the node modules were separate. Once I installed the node modules in the local directory, I restarted VS Code and it found the modules and the error went away.
This issue is unrelated to typescript... but, for anyone who stumbles on this issue:
Uninstalling volar is no longer an acceptable answer... vue-tsc will also produce this error. install @vue/runtime-dom and then in a tsconfig.node.json referenced file, experimental mode
Here's my tsconfig.node.json:
{ "compilerOptions": { "composite": true, "module": "esnext", "moduleResolution": "node" }, "include": [ "vite.config.ts" ], "vueCompilerOptions": { "experimentalCompatMode": 2, // delete after migrating to vue3 (or nuxt3) "experimentalTemplateCompilerOptions": { "compatConfig": { "MODE": 2 } // delete after migrating to vue3 (or nuxt3) } } }
I can say that this definitely works 🔥
I use the quasar framework, version 2.5.5. I have the same problem as you. My solution is to update the version of Vue, and this problem will be solved immediately
This issue is unrelated to typescript... but, for anyone who stumbles on this issue:
Uninstalling volar is no longer an acceptable answer... vue-tsc will also produce this error. install @vue/runtime-dom and then in a tsconfig.node.json referenced file, experimental mode
Here's my tsconfig.node.json:
{ "compilerOptions": { "composite": true, "module": "esnext", "moduleResolution": "node" }, "include": [ "vite.config.ts" ], "vueCompilerOptions": { "experimentalCompatMode": 2, // delete after migrating to vue3 (or nuxt3) "experimentalTemplateCompilerOptions": { "compatConfig": { "MODE": 2 } // delete after migrating to vue3 (or nuxt3) } } }
This worked perfectly for me.
This issue is unrelated to typescript... but, for anyone who stumbles on this issue:
Uninstalling volar is no longer an acceptable answer... vue-tsc will also produce this error. install @vue/runtime-dom and then in a tsconfig.node.json referenced file, experimental mode
Here's my tsconfig.node.json:{ "compilerOptions": { "composite": true, "module": "esnext", "moduleResolution": "node" }, "include": [ "vite.config.ts" ], "vueCompilerOptions": { "experimentalCompatMode": 2, // delete after migrating to vue3 (or nuxt3) "experimentalTemplateCompilerOptions": { "compatConfig": { "MODE": 2 } // delete after migrating to vue3 (or nuxt3) } } }
I can say that this definitely works 🔥
thank you very much,It helped me.
All the solutions above don't work for me anymore.
Same for me, issue appeared randomly while it worked fine before. Not in VSCODE, but in Docker. The docker build fails with this error. (please note i use vue3 + vite using the generated app for a vue 3 project)
Did you try to upgrade vue-tsc
to the last version ?
I had this error as well, but it's gone now after the upgrade.
Did you try to upgrade
vue-tsc
to the last version ? I had this error as well, but it's gone now after the upgrade.
This worked for us, thank you!
Did you try to upgrade
vue-tsc
to the last version ? I had this error as well, but it's gone now after the upgrade.
This solved the problems in my case too, thank you so much!
All the solutions above don't work for me.
Did you try to upgrade
vue-tsc
to the last version ? I had this error as well, but it's gone now after the upgrade.
Thank you, I am Chinese and I have resolved this issue by setting the Vue to version 3.3.4 and the Vue TSC to version 1.8.16
Did you try to upgrade
vue-tsc
to the last version ? I had this error as well, but it's gone now after the upgrade.Thank you, I am Chinese and I have resolved this issue by setting the Vue to version 3.3.4 and the Vue TSC to version 1.8.16
Does the fix only work for Chinese people?
Did you try to upgrade
vue-tsc
to the last version ? I had this error as well, but it's gone now after the upgrade.Thank you, I am Chinese and I have resolved this issue by setting the Vue to version 3.3.4 and the Vue TSC to version 1.8.16
Does the fix only work for Chinese people?
You misunderstood. Of course, the plan is suitable for everyone. I just want to express my gratitude to your issue for solving the problem for me. When I said where I come from, it was a friendly gesture. I apologize for any misunderstanding caused
Add "jsxImportSource": "vue" in tsconfig.json, it works for me