matfish2/vue-tables-2 + vuex = TypeError: Cannot set property 'outerHTML' of undefined

[vesper8]

I'm running into this error where if I have a very simple basic table from https://github.com/matfish2/vue-tables-2 on a page, if I go to another page and click back, or if I just click a link that reloads the same page, I get the errors below.

The rest of my app works fine with turbolinks/vue-turbolinks

I do use vue on every page. I'm using the latest 2.0 version of vue-turbolinks

I noticed this error only happens with https://github.com/matfish2/vue-tables-2 but also only happens if I'm using the "vuex" mode for the server-side tables. If I switch off vuex, then I don't get the error.. I'm pretty confused what's causing it but my app depends on using vuex server tables so hopefully you can give me some help fixing this problem

thanks!

TypeError: Cannot set property 'outerHTML' of undefined
    at Vue$3.destroyed (index.js:24)
    at callHook (vue.js:2872)
    at Vue$3.Vue.$destroy (vue.js:2682)
    at vuex.esm.js:567
    at Array.<anonymous> (vue.js:1798)
    at flushCallbacks (vue.js:1719)
    at <anonymous>
logError @ vue.js:1702
globalHandleError @ vue.js:1693
handleError @ vue.js:1682
callHook @ vue.js:2874
Vue.$destroy @ vue.js:2682
(anonymous) @ vuex.esm.js:567
(anonymous) @ vue.js:1798
flushCallbacks @ vue.js:1719
Promise resolved (async)
microTimerFunc @ vue.js:1767
nextTick @ vue.js:1811
queueWatcher @ vue.js:3018
update @ vue.js:3153
notify @ vue.js:686
del @ vue.js:1069
(anonymous) @ vuex.esm.js:482
_withCommit @ vuex.esm.js:495
unregisterModule @ vuex.esm.js:480
webpackJsonp../node_modules/vue-tables-2/compiled/state/register-module.js.module.exports @ register-module.js:21
webpackJsonp../node_modules/vue-tables-2/compiled/mixins/created.js.module.exports @ created.js:10
created @ v-server-table.js:65
callHook @ vue.js:2872
Vue._init @ vue.js:4504
VueComponent @ vue.js:4674
createComponentInstanceForVnode @ vue.js:4195
init @ vue.js:4012
createComponent @ vue.js:5463
createElm @ vue.js:5411
createChildren @ vue.js:5534
createElm @ vue.js:5439
createChildren @ vue.js:5534
createElm @ vue.js:5439
patch @ vue.js:5928
Vue._update @ vue.js:2617
updateComponent @ vue.js:2745
get @ vue.js:3086
Watcher @ vue.js:3075
mountComponent @ vue.js:2749
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:8322
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:10661
init @ vue.js:4018
createComponent @ vue.js:5463
createElm @ vue.js:5411
createChildren @ vue.js:5534
createElm @ vue.js:5439
createChildren @ vue.js:5534
createElm @ vue.js:5439
createChildren @ vue.js:5534
createElm @ vue.js:5439
patch @ vue.js:5928
Vue._update @ vue.js:2617
updateComponent @ vue.js:2745
get @ vue.js:3086
Watcher @ vue.js:3075
mountComponent @ vue.js:2749
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:8322
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:10661
init @ vue.js:4018
createComponent @ vue.js:5463
createElm @ vue.js:5411
createChildren @ vue.js:5534
createElm @ vue.js:5439
createChildren @ vue.js:5534
createElm @ vue.js:5439
patch @ vue.js:5967
Vue._update @ vue.js:2617
updateComponent @ vue.js:2745
get @ vue.js:3086
Watcher @ vue.js:3075
mountComponent @ vue.js:2749
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:8322
./node_modules/vue/dist/vue.js.Vue$3.$mount @ vue.js:10661
Vue._init @ vue.js:4514
Vue$3 @ vue.js:4599
(anonymous) @ app.js:49
t.dispatch @ turbolinks.js:5
t.Controller.r.notifyApplicationAfterPageLoad @ turbolinks.js:5
t.Controller.r.visitCompleted @ turbolinks.js:6
t.Visit.r.complete @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
requestAnimationFrame (async)
t.Visit.r.render @ turbolinks.js:5
t.Visit.r.loadResponse @ turbolinks.js:5
t.BrowserAdapter.r.visitRequestCompleted @ turbolinks.js:5
t.Visit.r.requestCompletedWithResponse @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
t.HttpRequest.r.endRequest @ turbolinks.js:5
t.HttpRequest.r.requestLoaded @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
XMLHttpRequest.send (async)
(anonymous) @ VM57233:1
t.HttpRequest.r.send @ turbolinks.js:5
t.Visit.r.issueRequest @ turbolinks.js:5
t.BrowserAdapter.r.visitStarted @ turbolinks.js:5
t.Visit.r.start @ turbolinks.js:5
t.Controller.r.startVisit @ turbolinks.js:5
t.Controller.r.startVisitToLocationWithAction @ turbolinks.js:5
t.BrowserAdapter.r.visitProposedToLocationWithAction @ turbolinks.js:5
t.Controller.r.visit @ turbolinks.js:5
t.Controller.r.clickBubbled @ turbolinks.js:5
(anonymous) @ turbolinks.js:5
vue.js:580 [Vue warn]: Error in destroyed hook: "TypeError: Cannot set property 'outerHTML' of undefined"

(found in <Root>)

[vesper8]

I made an example repo with instructions on how to reproduce this

All details in this comment: https://github.com/matfish2/vue-tables-2/issues/339#issuecomment-347777669

[mnussbaumer]

I've ran into this same error when using vuex-router-sync, it seems it has to do with the destroyed hook/watches, if I used vuex without the router sync (or don't call sync on them) it won't trigger the error.

I was able to make it go away by adding another check for the presence of $el, on index.js:

if (this == this.$root && this.$el) {
    this.$el.outerHTML = this.$originalEl;
}

Not sure of the implications of this ? I'm still hooking up the whole spa so I'm not sure it introduces some erratic behaviour but it does seem to be working as expected otherwise.

[vesper8]

thank you @mnussbaumer I just tried this and it does indeed make the ugly red error go away with no noticeable side-effects.. I do also wonder what are the implications of this.. could @jeffreyguenther comment on this? If this seems like a safe thing to do then maybe a PR would be accepted to add it?

[excid3]

Awesome, that probably is something we should have been doing from the beginning.

[excid3]

I just cut a release for 2.0.1 with this fix in it.