Vue-devtools: TypeError: Cannot read property '_isVue' of undefined

[alexbowers]

Version

5.0.0-beta.3

Browser and OS info

Chrome 68 / Mac OS X 10.13.5

Steps to reproduce

Use devtools 5.0-beta-3

What is expected?

For it to work

What is actually happening?

vue.common.js:593 [Vue warn]: Error in callback for watcher "ownTransports": "TypeError: Cannot read property '_isVue' of undefined"

found in

---> <PortalTarget>
       <Root>
warn @ vue.common.js:593
logError @ vue.common.js:1739
globalHandleError @ vue.common.js:1734
handleError @ vue.common.js:1723
run @ vue.common.js:3237
flushSchedulerQueue @ vue.common.js:2983
(anonymous) @ vue.common.js:1839
flushCallbacks @ vue.common.js:1760
Promise.then (async)
microTimerFunc @ vue.common.js:1808
nextTick @ vue.common.js:1852
queueWatcher @ vue.common.js:3070
update @ vue.common.js:3211
notify @ vue.common.js:699
reactiveSetter @ vue.common.js:1016
setupFilters @ filters.js:31
wrappedMutationHandler @ vuex.esm.js:697
commitIterator @ vuex.esm.js:389
(anonymous) @ vuex.esm.js:388
_withCommit @ vuex.esm.js:495
commit @ vuex.esm.js:387
boundCommit @ vuex.esm.js:335
(anonymous) @ filters.js:7
Promise.then (async)
setupFilters @ filters.js:6
wrappedActionHandler @ vuex.esm.js:704
dispatch @ vuex.esm.js:426
boundDispatch @ vuex.esm.js:332
setupFilters @ filters.js:237
setDefaultParams @ filters.js:90
findActiveFilter @ filters.js:108
callHook @ vue.common.js:2923
Vue._init @ vue.common.js:4632
Vue @ vue.common.js:4731
169 @ index.js:27
__webpack_require__ @ bootstrap b12b8e66767d1de062fd:54
168 @ OrderIndex.js:2406
__webpack_require__ @ bootstrap b12b8e66767d1de062fd:54
webpackJsonpCallback @ bootstrap b12b8e66767d1de062fd:25
(anonymous) @ OrderIndex.js:1
vue.common.js:1743 TypeError: Cannot read property '_isVue' of undefined
    at getCustomRefDetails (backend.js:405)
    at Object.keys.map.key (backend.js:11150)
    at Array.map (<anonymous>)
    at processRefs (backend.js:11150)
    at getInstanceState (backend.js:10992)
    at getCustomInstanceDetails (backend.js:11003)
    at encodeCache.cache (backend.js:275)
    at EncodeCache.cache (backend.js:228)
    at VNode.replacer (backend.js:275)
    at encode (backend.js:800)

---

The errors come from a modal property. This is potentially caused by using Vue Portal? Works without devtools however.

[Akryum]

Do you have a minimal reproduction?

[alexbowers]

I'll try to figure one out at lunch.

[alexbowers]

Is there anything I can do to assist debugging without a repro? Debug logs or anything

[constantm]

I've created a minimal reproduction of where I ran into this issue. It's not _the most_ minimal because it uses Bootstrap Vue modals, but it's probably minimal enough to get a better idea of what's happening.

Code: https://codesandbox.io/s/2wvl7vorm0
Reproduction here: https://2wvl7vorm0.codesandbox.io/

Console output:

backend.js:11149 {header: header#test-modal___BV_modal_header_.modal-header, body: div#test-modal___BV_modal_body_.modal-body, content: div.modal-content, modal: div#test-modal.modal.fade.show.d-block}
backend.js:11149 {header: header#test-modal___BV_modal_header_.modal-header, body: div#test-modal___BV_modal_body_.modal-body, content: div.modal-content, modal: div#test-modal.modal.fade.show.d-block}
backend.js:11149 {header: header#test-modal___BV_modal_header_.modal-header, body: div#test-modal___BV_modal_body_.modal-body, content: div.modal-content, modal: div#test-modal.modal.fade.show.d-block}
backend.js:11149 {header: header#test-modal___BV_modal_header_.modal-header, body: div#test-modal___BV_modal_body_.modal-body, content: div.modal-content, modal: div#test-modal.modal.fade.show.d-block}
backend.js:11149 {header: header#test-modal___BV_modal_header_.modal-header, body: div#test-modal___BV_modal_body_.modal-body, content: div.modal-content, modal: div#test-modal.modal.fade}
backend.js:11149 {header: header#test-modal___BV_modal_header_.modal-header, body: div#test-modal___BV_modal_body_.modal-body, content: div.modal-content, modal: div#test-modal.modal.fade}
backend.js:11149 {header: undefined, body: undefined, content: undefined, modal: undefined}
backend.js:11149 {header: undefined, body: undefined, content: undefined, modal: undefined}
proxyConsole.js:72 [Vue warn]: Error in event handler for "bv::show::modal": "TypeError: Cannot read property '_isVue' of undefined"

(found in <Root>)
function.console.(anonymous function) @ proxyConsole.js:72
s.config.warnHandler @ index.js:59
warn @ vue.common.js:591
logError @ vue.common.js:1739
globalHandleError @ vue.common.js:1734
handleError @ vue.common.js:1723
Vue.$emit @ vue.common.js:2542
Vue.(anonymous function) @ backend.js:10180
(anonymous) @ bootstrap-vue.common.js:9904
(anonymous) @ bootstrap-vue.common.js:9903
listener @ bootstrap-vue.common.js:3339
proxyConsole.js:72 TypeError: Cannot read property '_isVue' of undefined
    at getCustomRefDetails (backend.js:405)
    at Object.keys.map.key (backend.js:11150)
    at Array.map (<anonymous>)
    at processRefs (backend.js:11150)

[ctf0]

https://github.com/vuejs/vue-devtools/issues/450#issuecomment-422604783

[arpowers]

i'm getting this error with the following situation:

1. element has a sync'd property (some-prop.sync="whatever")
2. in the child element there is a this.$emit('update:someProp', $whatever)
3. in the Vue Dev inspector i use the component inspector/selector tool

[goldengecko]

Ditto here. I am also using a synced property.

[emanuelmutschlechner]

I've finally managed to successfully reproduce this error:

1. Open devtools and select component HelloWorld
2. Delete 'lorem ipsum' from the text input
3. Div 'Test' will be hidden because input length <= 5
4. $vm.refs is basically {test: undefined}

Code Sandbox Demo