🙂

Vue3 + TypeScript + Vuetify3(Beta) + Vite環境設定時のエラー

2022/06/11に公開

事象

公式のVite環境での設定方法に従い、インストールを実施したが、vite.config.tsファイルがエラーを吐いているため、コンパイルができない。

https://next.vuetifyjs.com/en/getting-started/installation/

  • 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にリネームされたらしい。
https://www.npmjs.com/package/@vuetify/vite-plugin

解決方法

以下の通り修正し、無事にコンパイルできるようになりました。

  • vite.config.ts
- import vuetify from '@vuetify/vite-plugin'
+ import vuetify from "vite-plugin-vuetify"

最後に

本件は最近になりIssueとして上がり、対応されていたようです。
個人開発なので調子に乗って、新しいことドンドンやってみようとVite, Pinia, Vuetify(Beta)などに手を出していますが、JavaScriptの初学者でビルドツール周りの仕組みに限らず、色々と理解が足りないところがあるので、辛みがあります。最初はある程度安定し、情報が多いものから使用していくに限りますね。。。頑張ってキャッチアップしていこうと思います。

https://github.com/vuetifyjs/vuetify-loader/issues/236

参考

一応、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