同様で困っている。
日本語の場合は下記のように表示される
インターフェイス 'JSX.IntrinsicElements' が存在しないため、暗黙的に JSX 要素の型は 'any' になります。
NuxtのvueファイルでJSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists. が表示される
解決したいこと
vscodeで突如として以下のようなエラーが出るようになりました。。。
ビルドが失敗するようなこともなく、実質的には無害なのですがvueファイル全てのHTML部分が真っ赤になるので、早急に何とかしたいところです!
JSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements' exists.ts(7026)
**「JSXはJavaScriptを拡張してUI要素を記述するのにHTMLのようなタグ構文が使えるようにしたもの」**というのは、何となくわかります。
しかし、なぜある日を境にいきなりこのようなエラーが発生するようになったのかがわかりません。。。
#環境
Nuxt.js(Vue.js)
#試したことなど
①プロジェクト削除→git cloneでプロジェクト再インストールしても同じでした。
②既存のNuxtプロジェクト(VueファイルのHTML部分)全てで同じ症状が発生しています。
③新しく作成したNuxtプロジェクトでも同じ症状が発生します。
④NuxtのUIフレームワークでvuetifyが使われていると、ほとんどこの問題は発生しません。
⑤Nuxtではなく普通のVueプロジェクトではこの問題は発生しません。
⑥拡張子が.html
のファイルではこの問題は発生しません。
⑦Angularの.ts
ファイルのHTML部分でもこの問題は発生しません。
VueファイルでTypeScriptに指定すると必ず発生するっぽいです。
⑧⌘
+P
(Windows ではCtrl
+ P
)を押下して、>Reload Windowと入力してReturn (Enter)でvscodeをリロード。意味なし。。。
Reactで同じ症状が発生した例はいくつか出てくるのですが、Nuxtで同じことが発生して解決した例が全く見当たりません。。。
どなたか助言していただけると幸いです!
6Answer
Comments
@kokogento
Questioner同じ人がいたとは!!!
調べても全く情報が出てこないので、vscodeのバグとかそんな感じかもしれませんね・・・
Vue language Features(Volar)に同様のissueがありますね
issue内に解決例があるので、参考になれば
(上の方も案内しておりますがVolarを一度切って、Veturを有効にするという荒技もありますね・・・)
https://github.com/johnsoncodehk/volar/issues/732
Comments
@kokogento
Questioner確かにissueが立てられてますね!検索しても全くヒットしなかったのに・・・。
荒技を使うか解決を待つか、検討させて頂きますw!
@kokogento
一旦これを追加で回避できそう
{
"compilerOptions": {
"noImplicitAny": false,
}
}
ただこれをすると型指定していないところでanyのwarnigが出なくなるので注意は必要そう
Comments
@kokogento
Questioner情報提供ありがとうございます!
確かに根本的な解決というわけではなさそうですが、参考にさせて頂きます!!
多分、プラグインの問題です。
弊社のメンバーも同じ問題がありましたが、
vue languageプラグインを切ったら治りました。
vue languageプラグインの方で最新リリースの際に
templateの修正もあったのでそれが影響かと
参考になれば
Comments
@kokogento
Questionerありがとうございます!
vue languageプラグインが原因だったとわかっただけで、質問を投稿したかいがありました!
時間が経過しているので解決済みかもしれませんが。
私も同様の症状に遭い、解決したのでご報告します。
拡張機能 Volar を利用している場合、ビルトインの typescript extension を disabled にすると解決しました。
参考にした情報はこちらです。
https://zenn.dev/ymgn____/articles/e7709e88948446#take-over-mode%E3%82%92%E6%9C%89%E5%8A%B9%E5%8C%96
Comments
@kokogento
Questionerありがとうございます!!!
参考にした情報、とてもありがたいです。解決方法にも色々なやり方があるようなので、新たな方法をしれて嬉しいです!
私も@17e10さんとは少し異なりますが、volarそのものをアンインストールを行うことでエラーが解消しました!
vue ver2を使用していたのでveturで良いと判断してアンインストールを行いました。
Comments
@kokogento
Questioner情報提供ありがとうございます〜!