質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

解決済

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

shimeji_XX
shimeji_XX

総合スコア33

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1回答

0評価

0クリップ

728閲覧

投稿2022/05/31 07:53

前提

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

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

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

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

cmd

>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のインストール

cmd

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

3.コンパイル

cmd

>npm install >npm run dev

下記載エラーメッセージ

実現したいこと

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

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

cmd

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

TypeScript

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行目の

TypeScript

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
npm8.5.5
node16.15.0
@vue/cli5.0.4

cmd

>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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。