プロジェクトにおいて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
がインストールされた。
{
"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してプラグインとして登録する。
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
に指定しよう。