全体的な雑さはご勘弁。未来の俺がこのエラーでググった時のための備忘録。
問題
npm init vue@3でlang=TSでアプリ作成。
npm run buildは通る。
なのにVSCode上で以下のエラーが出て、他業種への転職を考え始める。
'HelloWorld' is declared but its value is never read.Vetur(6133)
やったこと
Veturを無効化した。
以下蛇足。
経緯とかの散文蛇足
これまではvue-cliでvue create appnameでアプリを作成していた。
ただ最近のイケてる人たちはnpm init vue@3でVueのアプリを作るらしい。1
webpackベースのvue-cliからViteにするといろいろ嬉しいんだって。知らんけど。
で、npm init vue@3ってやるとcreate-vueってのを経由してViteを使うことになるらしい。
このnpm init vue@3でTypeScript指定で作成したアプリケーションができたのでとりあえずコンソールにだされたメッセージの促すままにnpm run lintとかnpm run devとかやって動いたのでよしよしと思っていた。
以下はできたフォルダ構成の抜粋。App.vueがcomponents配下のファイルをimportしたりしてます。
├── src
│ ├── App.vue
│ ├── components
│ │ ├── HelloWorld.vue
│ │ ├── TheWelcome.vue
│ │ ├── WelcomeItem.vue
...
でじゃあ開発したろとVSCodeで開いてApp.vueを見ると冒頭の問題に引っかかった。
問題に引っかかって最初はエラーでググって「コンポーネント側に空のexport default {}とか入れるといいよ」とか言われたからほいほいと思ってHelloWorld.vueの方に入れてみた。
そしたら確かにApp.vueの当該エラーは消えたんだけど、HelloWorld.vueの方で「既定のエクスポートは、ファイルまたはモジュールの宣言のトップレベルにある必要があります。ts(1258)」って出てしまった。
しかもnpm run buildするとこれこそエラーになる。
いや困ったねと思ってコードを見直してみたが、<script setup lang="ts">と書いてあって、setupってなんだろ～と思って公式のsetupの説明を見てみたら「これはシンタックスシュガーなのじゃ」と書いてある。
ってことは何かしらラッピングしてるんだろうな～だからexportがトップレベルじゃないんだって言われてんだな～と思ったのでいったんsetup外したらやっぱりts(1258)の方のエラーは消えた。
まあこれでsetupとかよくわからんし外すか～とかも考えたけど、シンタックスシュガーとか好きなのでやっぱ使いたいな～と思ってどうしたらええんやろと考えた。だいたい公式が出してるコードをワークアラウンド魔改造してもいいことなんてこれまで一度もなかったわけで。
で、公式そのままのコードだしビルドは通ってるので、VSCodeの問題だよねと思った。というか拡張機能の問題でしょと。←おそい
そういえばこのアプリをVSCodeで見たときに別の拡張機能Vue Language Features (Volar)とTypeScript Vue Plugin (Volar)とか促されるままに入れたな～とか思い返して、あれ、じゃあVeturいらないんじゃない？と思ったわけです。
で、やっとですけど元から入っていた拡張機能のVeturに目を向けて、更新でもあるかと思ったら2か月前で止まってるし、じゃあ無効化したらええんかなと思って無効化したら良さそうだったのでそれでOKとした。
ちなみにVeturのページを今見たら以下の分がこっそり書いてあった。
New official vue editor support: Volar
そっか君はもう役割を終えたんだね今までありがとうなにも君に対価払ってないけど、とか思ってとりあえずもう無効化ってかアンインストールしてもよさそうだなとさっき思ったけど手元にあるいまだにvue2のアプリを見て「とりあえず残しとこ」と思ったのが今です。