質問編集履歴

2 修正

hana00033

hana00033 score 17

2019/11/27 00:13  投稿

Vue.jsでv-calendarを使いたいが、Uncaught ReferenceError:が出てしまう
### 前提・実現したいこと
Vue.jsでv-calendarを使って日付選択フォームを作成したいです。
https://www.kabanoki.net/3905/
を参考に作成しようとしています。
### 発生している問題・エラーメッセージ
npmでv-calendarをインストールしたはずが、<v-date-picker>が読み込まれなかったため
正しくプロジェクトにパッケージがインストールされているかを確認するために、
```
npm list v-calendar
```
を実行したところ
```
taskcapsule@0.1.0 /Users/hanaka/Desktop/taskcapsule
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,
 }
});
```
  • Vue.js

    2831 questions

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

1 追記

hana00033

hana00033 score 17

2019/11/26 23:58  投稿

Vue.jsでv-calendarを使いたいが、Uncaught ReferenceError:が出てしまう
### 前提・実現したいこと
Vue.jsでv-calendarを使って日付選択フォームを作成したいです。
https://www.kabanoki.net/3905/
を参考に作成しようとしています。
### 発生している問題・エラーメッセージ
npmでv-calendarをインストールしたはずが、<v-date-picker>が読み込まれなかったため
正しくプロジェクトにパッケージがインストールされているかを確認するために、
```
npm list v-calendar
```
を実行したところ
```
taskcapsule@0.1.0 /Users/hanaka/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,
 }
});
```
  • Vue.js

    2831 questions

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

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る