Cannot read property '__VUE_DEVTOOLS_APP_RECORD__' of undefined

[callmeioy]

Version

6.0.0-beta.1

Browser and OS info

Chrome 62 / Windows 10

Steps to reproduce

import { createApp} from 'vue'
import { store } from './store/index'
import App from './App.vue'
import './index.css'
// vue.config.devtools = true;
const app = createApp(App)
app.use(store).mount('#app')

What is expected?

backend.js:1966 Uncaught (in promise) TypeError: Cannot read property 'VUE_DEVTOOLS_APP_RECORD' of undefined

What is actually happening?

when open the vue console to look for detail it was happen

[donnysim]

Same here, Chrome 84, Vue 3 RC5, component tree is empty in dev tools and the same error message exists on:

function getAppRecord(instance) {
    if (instance.root) {
        return instance.appContext.__app.__VUE_DEVTOOLS_APP_RECORD__;
    }
}

[n0n3br]

Found that instance.appContext has an app key that contains VUE_DEVTOOLS_APP_RECORD.
Tried to fix it in the source code to see if it would work, but couldn't make dev script work on v6, so I opened issue #1250.

[akrizs]

I'm having the same issue. As @n0n3br mentioned the app has a key that contains VUE_DEVTOOLS_APP_RECORD but when you look at window.__VUE_DEVTOOLS_GLOBAL_HOOK__ it has a Vue key that is undefined, im guessing that the vuetools is looking for the VUE_DEVTOOLS_APP_RECORD within that key and not the app record on the instance.

[NickEastNL]

I'm also having the same issue. The error occurs here:

function getAppRecord(instance) {
    if (instance.root) {
        return instance.appContext.__app.__VUE_DEVTOOLS_APP_RECORD__;
    }
}

On both Chrome and Edge (Chromium) __VUE_DEVTOOLS_APP_RECORD__ is undefined, but on Firefox __app is undefined.

[Fanna1119]

Same issue on Chrome Version 84.0.4147.89 (Official Build) (64-bit)

"dependencies": { "vue": "^3.0.0-rc.1", "vuex": "^4.0.0-beta.4" }, "devDependencies": { "vite": "^1.0.0-rc.1", "@vue/compiler-sfc": "^3.0.0-rc.1" }

backend.js:1966 Uncaught (in promise) TypeError: Cannot read property 'VUE_DEVTOOLS_APP_RECORD' of undefined

[ghost]

Same. Trying on a default Vite app install. (the previous extension is disabled)

[d-pollard]

Looks like this change is because of: vuejs/core@54727f9

We just need to update the devtools now using .app instead of .__app (there's an open PR)

[thebrownfox]

@Akryum could you take a look at it please? The PR should work. This is really essential tool.

[thebrownfox]

I tried the PR. It pretends to be working but cannot see anything like data or computed. Vue3 is not and won't be production ready until this is solved. Libraries are not ready I can live with that, but I tried to use browser debugger and found out this tool alone is the reason I use vue itself. It really makes life easier. Wanted to start new project in vue3, but it's not worth the hassle.

[jbjorge]

It got merged, so I hope the one who merged verified that it fixed the issue. I was unable to do a build, so it was a "blind" PR, hoping it would be as easy as fixing the reference.
I'll have another go and see if I'm able to build/debug.

[d-pollard]

@thefoxie - from looking at the code; it looks like none of that is written yet (the displays etc); since this is a ground up re-write, it's going to take some time to get that all in

[lq9958]

this maybe not solved yet, is there have some solutions? this tool really important to our noobs. (dog,dog,dog)

[jbjorge]

Looks like Akryum has been working hard on fixing bugs and implementing features. Thank you very much @Akryum, your work is very appreciated!
We'll just have to wait until the team has a working version - this is to be expected when we're using bleeding edge features.

[thebrownfox]

this maybe not solved yet, is there have some solutions? this tool really important to our noobs. (dog,dog,dog)

It's not about being noob. It's about seeing thing in real time without any hassle. It's about being productive, even when you use just basic features. You can always use browser debugging tools or console.log(), but this is whole different league. I cannot imagine doing stuff without it even if I know and can.

[ghost]

I see that this error is gone in the new version 6.0.0-beta.2
-> Please note that only vue 3.0.0-rc.10 is fully supported for now
Starter I use - https://github.com/web2033/vite-vue3-tailwind-starter

Instead, I see these statements in the console now:

[NWYLZW]

I also had a similar bug when the page is changed using router-link of vue-router

Uncaught (in promise) TypeError: Cannot read property 'instanceMap' of undefined
    at getComponentInstance (backend.js:991)
    at Object.sendSelectedComponentData (backend.js:935)
    at Object.<anonymous> (backend.js:1211)
    at Object.emit (<anonymous>:1:755)
    at DevtoolsPluginApiInstance.notifyComponentUpdate (backend.js:381)
    at eval (vue-router.esm-bundler.js?6c02:2427)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
    at Array.job (runtime-core.esm-bundler.js?5c40:2059)
    at flushPreFlushCbs (runtime-core.esm-bundler.js?5c40:329)

[Akryum]

@NWYLZW See #1451

[amcsi]

I was able to fix this by removing the Vue Devtools extension, then installing it again.