Vuetify3 beta 環境でプロジェクト作成時にコンパイルエラー

Question

前提

Vue3 + TypeScript + Vuetify3 beta + Vite環境
下記URLの手順でプロジェクトを作成しています。
「npm run dev」をした際、後述のエラーメッセージが出てコンパイルできない状態です。

参考URL:https://qiita.com/kyonc5/items/bd7b9d887c81f1b6a598

URL先と同じ手順ですが、手順記載

1.C直下にviteでプロジェクト作成※この際vue-ts(TypeScript)選択

>npm create vite@latest test_system_2
? Select a framework: » - Use arrow-keys. Return to submit.                                        
>   vue            
? Select a variant: » - Use arrow-keys. Return to submit.                               
>   vue-ts  

2.作成フォルダへ移動、Vuetifyのインストール

>cd test_system_2
>vue add vuetify
? Choose a preset: Vite Preview (Vuetify 3 + Vite)

3.コンパイル

>npm install
>npm run dev

下記載エラーメッセージ

実現したいこと

上記構成でのプロジェクトの作成

発生している問題・エラーメッセージ

C:\test_system_2>npm run dev

> test_system_2@0.0.0 dev
> vite

failed to load config from C:\test_system_2\vite.config.ts
error when starting dev server:
Error: Cannot find module '@vuetify/vite-plugin'
Require stack:
- C:\test_system_2\vite.config.ts
- C:\test_system_2\node_modules\vite\dist\node\chunks\dep-59dc6e00.js
- C:\test_system_2\node_modules\vite\dist\node\cli.js
- C:\test_system_2\node_modules\vite\bin\vite.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (C:\test_system_2\vite.config.ts:30:34)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.require.extensions.<computed> [as .ts] (C:\test_system_2\node_modules\vite\dist\node\chunks\dep-59dc6e00.js:61924:20)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)

該当のソースコード

・vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vuetify from '@vuetify/vite-plugin'

const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
    vuetify({
      autoImport: true,
    }),
  ],
  define: { 'process.env': {} },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  /* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
  resolve: {
    extensions: [
      '.js',
      '.json',
      '.jsx',
      '.mjs',
      '.ts',
      '.tsx',
      '.vue',
    ]
  },
  */
})

試したこと

1.エラーの出ているファイル「vite.config.ts」を確認し、3行目の

import vuetify from '@vuetify/vite-plugin'

が「 TS2307 (TS) Cannot find module '@vuetify/vite-plugin' or its corresponding type declarations. 」になっていることを確認しました。

2.'@vuetify/vite-plugin' がインストールされていないのではと考え、
「C:\test_system_2\node_modules@vuetify」を確認しました。
vite-pluginフォルダがなかったためこれが原因では？と考えていますが、
vite-pluginのインストール方法がわからない状態です。

補足情報（FW/ツールのバージョンなど）

主要なツール	ver
npm	8.5.5
node	16.15.0
@vue/cli	5.0.4

>npm ls
test_system_2@0.0.0 C:\test_system_2
+-- @mdi/font@5.9.55
+-- @types/webfontloader@1.6.34
+-- @vitejs/plugin-vue@2.3.3
+-- roboto-fontface@0.10.0
+-- typescript@4.7.2
+-- vite-plugin-vuetify@1.0.0-alpha.11
+-- vite@2.9.9
+-- vue-cli-plugin-vuetify@2.5.0
+-- vue-tsc@0.34.17
+-- vue@3.2.36
+-- vuetify@3.0.0-beta.2
+-- webfontloader@1.6.28
`-- webpack-plugin-vuetify@2.0.0-alpha.10

お手数をおかけしますが、情報ありましたらお願いいたします。

Answer 1

こんにちは。
同様の不具合に悩んでいましたが、暫定的な解決策？を見つけましたので参考になれば幸いです。

@vuetify/vite-plugin について

調べたところ、@vuetify/vite-pluginは非推奨になったようです。後継のものは vite-plugin-vuetify になるようです。
そちらの環境にも、vite-plugin-vuetifyはインストールされているようですので、vite.config.jsを書き換えればとりあえず動作するのではないでしょうか？

https://www.npmjs.com/package/@vuetify/vite-plugin

書き換える内容

/vite.config.js(3行目)

- import vuetify from '@vuetify/vite-plugin'
+ import vuetify from "vite-plugin-vuetify"

Comments

[shimeji_XX]

情報ありがとうございます。
参考にさせていただきます。