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

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

ただいまの
回答率

89.07%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,434

hana00033

score 17

前提・実現したいこと

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,
  }
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

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

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

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

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

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


をすればよいかと

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

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

import Vue from 'vue/dist/vue.esm.js';
import MyApp from './MyApp.vue';

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

new Vue({
  el: '#app',
  components: {
    MyApp,
  },
  template: '<my-app></my-app>',
});

MyApp.vue

<template>
  <v-date-picker :mode="mode"
    :formats="formats"
    v-model="selectedDate"
  >
  </v-date-picker>
</template>

<script>
export default {
  data: function(){
    return{
    mode: 'single',
    formats: {
        input: ['YYYY-MM-DD'],
    },
    selectedDate: null,
    }
  }
}
</script>

追記

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

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';

// tslint:disable-next-line:no-var-requires
const VCalendar = require('v-calendar');
// v-calendarのlib.jsにあるinstall関数そのまま持ってくる
const defaults = VCalendar.setupCalendar({});
Object.keys(VCalendar).forEach((k) =>
  Vue.component(`${defaults.componentPrefix}${k}`, VCalendar[k]),
);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/11/27 00: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)
    と出てしまうのですがこれは正しくインストールされてないということでしょうか?
    定義をしたはずなのに使えないという状況が続いています...

    キャンセル

  • 2019/11/27 01:22 編集

    それに関してはtypescriptの制約かもしれません…v-calenderがtype script対応されてるかわかりませんが、
    https://qiita.com/Nossa/items/726cc3e67527e896ed1e

    https://codeday.me/jp/qa/20190616/1024476.html
    ここらへんの設定とかになるかもしれません(TypeScriptの意味がなくなるかもしれませんが…

    キャンセル

  • 2019/11/28 00:04

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

    キャンセル

0

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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