Vue.jsのTypeScriptで「script setup」と書くとエラーが出る
それはそう。
エラー内容
VSCode では以下のようなエラーが出る。
Virtual script "m:/GitHub/univ-info-web/src/views/Document.vue.js" not found,
may missing <script lang="ts"> / "allowJs": true / jsconfig.json.
訳すると、
仮想スクリプト "m:/GitHub/univ-info-web/src/views/Document.vue.js" が見つかりません。
<script lang="ts"> / "allowJs": true / jsconfig.json が欠けている可能性があります。
https://scrapbox.io/files/653dfb28cccab0001c6370e0.png
build 時にも以下のようなエラーが出る。
code: Error-EN
✓ built in 1.49s
error TS6504: File 'M:/GitHub/univ-info-web/src/views/Document.vue.js' is a JavaScript file.
Did you mean to enable the 'allowJs' option?
The file is in the program because:
Matched by include pattern 'src/**/*' in 'tsconfig.app.json'
tsconfig.app.json:3:27
~~~~~~~~~~
File is matched by include pattern specified here.
Found 1 error.
ERROR: "type-check" exited with 2.
英語 読むのつらい人への訳
code: Error-JP
✓ built in 1.49s
エラーTS6504: ファイル'M:/GitHub/univ-info-web/src/views/Document.vue.js'はJavaScriptファイルです。
'allowJs'オプションを有効にしましたか?
このファイルはプログラムの中にあります:
tsconfig.app.json'のインクルードパターン'src/**/*'にマッチします。
tsconfig.app.json:3:27
3 "include "です: ["env.d.ts", "src/**/*", "src/**/*.vue"]です、
~~~~~~~~~~
ここで指定されたインクルードパターンにファイルがマッチします。
エラーが1つ見つかりました。
ERROR: "type-check" は 2 で終了しました。
問題
TypeScript を使っているのになぜか JavaScript として認識されてしまう。
build 時に JavaScript ファイルがあるのでエラーが出る。
なぜ
<script setup> と書くと、デフォルトで JavaScript として認識される。
対処法
IDEやエラーににそのまま書いてあることを実行すればおk。
<script lang="ts"> / "allowJs": true / jsconfig.json が欠けている可能性があります。
code: Error-part
'allowJs'オプションを有効にしましたか?
つまり、以下のいずれかに修正する。
lang="ts" を忘れずに追加する
このスクリプトを TypeScript として書いているならこれ
もしくはスクリプトの言語を TypeScript で統一しているなら、一番簡単な解決法
言語が TypeScript であることを明記する、ということ
恐らくほとんどの人が記載忘れなのかも……?
https://scrapbox.io/files/653dfd847548a5001c55da6f.png
"allowJs": true オプションを tsconfig.json(jsconfig.json) に追加する
このスクリプトを明確に JavaScript として書いているならこちら
参考