Vue2からVue3へのアップデートを@vue/compatを利用して進めていた際、vuedraggableを使用した箇所で予期せぬエラーが発生しました。
問題の発生
Vue2からVue3にアップデートする際、vuedraggableのバージョンも上げなければなりません
今回、vuedraggableのバージョンを4xに上げると以下のエラーが出ました。
vuedraggable.js:142 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'updated')
at Proxy.updated (vuedraggable.js:142:29)
at callWithErrorHandling (vue.esm-bundler.js:10069:22)
at callWithAsyncErrorHandling (vue.esm-bundler.js:10078:21)
at hook.__weh.hook.__weh (vue.esm-bundler.js:4036:29)
at flushPostFlushCbs (vue.esm-bundler.js:10270:32)
at flushJobs (vue.esm-bundler.js:10315:9)このエラーは、ドラッグアンドドロップ機能を持つリストのレンダリング時に発生しています。
解決策
@vue/compat環境でVue2モードでビルドしている時に発生することがわかりました。なのでこのエラーを解決させるにはVue3へのバージョンアップを完了させて@vue/compatを削除するか以下の対応をする必要があります。
import draggable from 'vuedraggable'
draggable.compatConfig = {
MODE: 3
}
export default {
name: 'HogeHoge',
components: {
draggable: draggable
},関連記事
