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

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

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

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

Q&A

解決済

2回答

6656閲覧

Vue.jsでv-calendarを使いたいが、Uncaught ReferenceError:が出てしまう

hana00033

総合スコア17

Vue.js

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

0グッド

0クリップ

投稿2019/11/25 12:28

編集2019/11/26 15:13

前提・実現したいこと

Vue.jsでv-calendarを使って日付選択フォームを作成したいです。

https://www.kabanoki.net/3905/
を参考に作成しようとしています。

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

npmでv-calendarをインストールしたはずが、<v-date-picker>が読み込まれなかったため
正しくプロジェクトにパッケージがインストールされているかを確認するために、

npm list v-calendar

を実行したところ

taskcapsule@0.1.0 /Users/usename/Desktop/taskcapsule └── UNMET DEPENDENCY v-calendar@1.0.0-beta.22 npm ERR! missing: v-calendar@1.0.0-beta.22, required by taskcapsule@0.1.0

と出ました。なので、

npm install v-calendar@1.0.0-beta.22

を行ったところパッケージは確認できたのですが、
グーグルの検証の画面では下記のエラーが出てしまいます。

Uncaught ReferenceError: Vue is not defined at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./app/javascript/packs/components/about.vue?vue&type=script&lang=js& (about.vue:9) at __webpack_require__ (bootstrap:19) at Module../app/javascript/packs/components/about.vue?vue&type=script&lang=js& (about.vue?8ebb:1) at __webpack_require__ (bootstrap:19) at Module../app/javascript/packs/components/about.vue (about.vue:1) at __webpack_require__ (bootstrap:19) at Module../app/javascript/packs/router/router.js (router.js:1) at __webpack_require__ (bootstrap:19) at Module../app/javascript/packs/todo.js (todo.js:1) at __webpack_require__ (bootstrap:19)

###ソースコード

実際に日付選択フォームを作成しているコンポーネントのvueファイルの中身です。

<template> <v-date-picker :mode="mode" :formats="formats" v-model="selectedDate"></v-date-picker> </template> <script> import VCalendar from 'v-calendar'; Vue.use(VCalendar); Vue.config.productionTip = false export default { data: function(){ return{ mode: 'single', formats: { input: ['YYYY-MM-DD'], }, selectedDate: null, } } } </script>

エラーの内容が読み解けず行き詰まってしまいました...
よろしくお願いします。

追記

import Vue from 'vue/dist/vue.esm.js' import Router from './router/router' import Header from './components/header.vue' import VCalendar from 'v-calendar'; Vue.use(VCalendar); Vue.config.productionTip = false var app = new Vue({ el: '#app', router: Router, components:{ 'navbar':Header, } });

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

エラー内容通りVueが定義されてないのが原因かと
vueファイルのようなのでimport Vue from 'vue';のようにVueを定義してるところがあると思いますのでそこで

js

1import VCalendar from 'v-calendar'; 2Vue.use(VCalendar); 3Vue.config.productionTip = false

をすればよいかと

※載せているソースで全角スペースが入ってるようです

※parcelで確認したときのソース
index.js

js

1import Vue from 'vue/dist/vue.esm.js'; 2import MyApp from './MyApp.vue'; 3 4import VCalendar from 'v-calendar'; 5Vue.use(VCalendar); 6Vue.config.productionTip = false 7 8new Vue({ 9 el: '#app', 10 components: { 11 MyApp, 12 }, 13 template: '<my-app></my-app>', 14});

MyApp.vue

vue

1<template> 2 <v-date-picker :mode="mode" 3 :formats="formats" 4 v-model="selectedDate" 5 > 6 </v-date-picker> 7</template> 8 9<script> 10export default { 11 data: function(){ 12 return{ 13 mode: 'single', 14 formats: { 15 input: ['YYYY-MM-DD'], 16 }, 17 selectedDate: null, 18 } 19 } 20} 21</script>

追記

vue/cliでvue.js+typescriptプロジェクト作って結局こうなった
main.ts

ts

1import Vue from 'vue'; 2import App from './App.vue'; 3import router from './router'; 4import store from './store'; 5 6// tslint:disable-next-line:no-var-requires 7const VCalendar = require('v-calendar'); 8// v-calendarのlib.jsにあるinstall関数そのまま持ってくる 9const defaults = VCalendar.setupCalendar({}); 10Object.keys(VCalendar).forEach((k) => 11 Vue.component(`${defaults.componentPrefix}${k}`, VCalendar[k]), 12); 13 14Vue.config.productionTip = false; 15 16new Vue({ 17 router, 18 store, 19 render: (h) => h(App), 20}).$mount('#app');

※import使った際のError出てても結局は動くっぽい…typeエラーとして出してるだけかも

投稿2019/11/26 03:14

編集2019/11/27 03:28
rururu3

総合スコア5545

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hana00033

2019/11/26 15:02 編集

vueファイルの中でimportせずに追記に書かせていただいたような指定の仕方もしたのですが、VSコード側で module "/Users/usename/Desktop/taskcapsule/node_modules/v-calendar/lib/v-calendar.umd.min" モジュール 'v-calendar' の宣言ファイルが見つかりませんでした。'/Users/username/Desktop/taskcapsule/node_modules/v-calendar/lib/v-calendar.umd.min.js' は暗黙的に 'any' 型になります。 Try `npm install @types/v-calendar` if it exists or add a new declaration (.d.ts) file containing `declare module 'v-calendar';`ts(7016) と出てしまうのですがこれは正しくインストールされてないということでしょうか? 定義をしたはずなのに使えないという状況が続いています...
hana00033

2019/11/27 15:04

まだまだ初心者でtypescriptを理解できていませんが、 https://teratail.com/questions/197203 ここでVScode側の問題で、保存して開き直したらなおったとあったので試しにやってみたところ、VScodeのエラーは消えませんでしたが、もともと出ていたconsoleのエラーはなくなってカレンダーが表示できていました。追記に書いていただいたのをみてVScode側はtypeエラーを出していたのか!と思いましたが、カレンダーがなぜ正しく表示できたのかは全く理解できてません... でも動いたので良しとします...(・_・; 本当にご協力ありがとうございました。
guest

0

Vue is not definedとあるのでVueが定義されていません。
たいていエラー文は最初の一行目に原因が書いてあるので読むようにしましょう。

先日似たような問題に回答をしたのでご参照ください。
Vue.jsで日付選択フォームを作成したい - teratail

公式の導入方法などにも目を通しておくと良いと思います。
V-Calendar - Installation

投稿2019/11/26 03:18

nt4c

総合スコア768

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問