🙂
Vue3 + TypeScript + Vuetify3(Beta) + Vite環境設定時のエラー
事象
公式のVite環境での設定方法に従い、インストールを実施したが、vite.config.tsファイルがエラーを吐いているため、コンパイルができない。
- vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from '@vuetify/vite-plugin'
事象（詳細）
エラー内容を確認したところ、vuetifyのライブラリのインポートが上手くいってない模様。
確かに、node_modulesにも該当のライブラリが入ってなさそうに見える。
- vite.config.ts
import vuetify from '@vuetify/vite-plugin'
TS2307 (TS) Cannot find module '@vuetify/vite-plugin' or its corresponding type declarations.
状況確認
NPMを確認したところ、@vuetify/vite-pluginは非推奨（deprecated）になっている。
どうやらvite-plugin-vuetifyにリネームされたらしい。
解決方法
以下の通り修正し、無事にコンパイルできるようになりました。
- vite.config.ts
- import vuetify from '@vuetify/vite-plugin'
+ import vuetify from "vite-plugin-vuetify"
最後に
本件は最近になりIssueとして上がり、対応されていたようです。
個人開発なので調子に乗って、新しいことドンドンやってみようとVite, Pinia, Vuetify(Beta)などに手を出していますが、JavaScriptの初学者でビルドツール周りの仕組みに限らず、色々と理解が足りないところがあるので、辛みがあります。最初はある程度安定し、情報が多いものから使用していくに限りますね。。。頑張ってキャッチアップしていこうと思います。
参考
一応、npmでインストールも実施してみましたが、非推奨の警告も受けました。
でもやっぱりViteでインストールすると気付けないですね。
- TERMINAL
npm i @vuetify/vite-plugin
npm WARN deprecated @vuetify/vite-plugin@1.0.0-alpha.11: Renamed to vite-plugin-vuetify
Discussion