LoginSignup
1
0

More than 3 years have passed since last update.

Vue.js用カレンダーライブラリ「v-calendar」の最新バージョンがimport出来ない件

Posted at

プロジェクトにおいてRailsのWebpackerでVue.jsを使っていて、カレンダー機能を実装するために色々調べているとv-calendarというライブラリがあることを知った。
早速使ってみようと思って公式ドキュメントの通りインストールして設定下が、謎のエラーが発生したので記事にすることにした。
結論から言うと、エラーの原因はよく分からず、ただ後述するようにバージョンを下げてインストールするとうまく動いたので、解決策として記載する。

Version

Vue.js 2.6.11
Ruby on Rails 6.0.0

インストール

v-calendar公式ドキュメントに従ってyarnを用いてv-calendarをインストールする。

yarn add v-calendar@next

するとv-calendarの1.0.0-beta.23がインストールされた。

package.json
{
  "name": "...",
  "private": true,
  "dependencies": {
    "@coreui/coreui": "2.1.6",
    "@rails/actioncable": "^6.0.0-alpha",
    "@rails/activestorage": "^6.0.0-alpha",
    "@rails/ujs": "^6.0.0-alpha",
    "@rails/webpacker": "^4.0.7",
     // 中略
    "turbolinks": "^5.2.0",
    "v-calendar": "^1.0.0-beta.23",
    "vue": "^2.6.11",
    "vue-loader": "^15.9.1",
    "vue-template-compiler": "^2.6.11",
    "waypoints": "^4.0.1"
  },
  "version": "0.1.0",
  "devDependencies": {
    "webpack-dev-server": "^3.10.3"
  }
}

そしてwebpackerで使用するためにimportしてプラグインとして登録する。

app/javascript/packs/application.js
import Vue from 'vue'
import App from '../app.vue'
import VCalendar from 'v-calendar'
Vue.use(VCalendar)

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#vue',
    render: h => h(App)
  })
})

公式ドキュメントに従ってここまで設定してローカルサーバを起動したところ、コンソール上で"export 'default' (imported as 'VCalendar') was not found in 'v-calendar'と怒られてる。
ブラウザでも、Uncaught TypeError: Cannot read property 'mixin' of undefinedと怒られている。
公式通りにやってるのに何でや?と思って色々調べてみたがよく分からず。。。詰みかけていたところでこんなIssueを発見した。
"export 'default' (imported as 'Calendar') was not found in 'v-calendar/lib/components/calendar.umd'

わしの詰まってるエラーとほぼ同じや!!!きっとここに解決策が書いてあるはず!
と思って読んでいくと、肝心の開発者からの返答がない。
他のメンバーからも、はよ返事しろや。と怒られている。
(原文はAny responses to this?)

解決策

詰んだ………と思ってぼーっとIssueを眺めていたら、質問者のv-calendarのバージョンがv1.0.1 and 1.0.0-beta.23であることに気づく。
これもしかしたらバージョン下げたらいけんじゃね?と思い下記を実行。

yarn add v-calendar@1.0.0-beta.22

エラー発生せず解決した…!!!

結論

v-calendarを使う際はバージョンを1.0.0-beta.22に指定しよう。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0