Vue-devtools: v4.0.1 - "Uncaught TypeError: Cannot read property '_route' of undefined" Everywhere

[ImpossivelPT]

On chrome devtools -> Vue, if I click on any component (on the component tree on the left side) this error appears on console:

vue-router.esm.js?880d:557 Uncaught TypeError: Cannot read property '_route' of undefined at Vue$3.get (vue-router.esm.js?880d:557) at backend.js:1 at x (backend.js:1) at t.a (backend.js:1) at Object.y (backend.js:1) at e (backend.js:1) at e (backend.js:1) at e (backend.js:1) at e (backend.js:1) at Object.t.stringifyStrict (backend.js:1)

updated the the project packages, including vue-router, tried on an old version of the project that was working before, but with the v4.0.1 it gives the same error. Installed an old version of vue-devtools (3.1.7) and everything works well as before.

when events or other actions are triggered when using the website the console fills with errors:

On firefox it gives this error:
TypeError: this._routerRoot is undefined

[skrelo]

Same here, latest update from today seems to be broken...
Uncaught TypeError: Cannot read property 'type' of null

[Akryum]

@ctbradley @skrelo Your issues seems to be different, see #499

[Akryum]

@ImpossivelPT You must have some code in your app that is setting this._routerRoot of a component to null.

[Akryum]

It only happens if I manually change _routerRoot: https://github.com/vuejs/vue-devtools/pull/510/files#diff-bf544b5f67a4b91038f07a8dcc6cf4b8R54

We definitively need a boiled-down reproduction of this issue.

[cmandesign]

My plugin has been updated yesterday and I have this issue too. I cannot do anything anymore, I've got stuck -_-

[Akryum]

As I wrote above, we need a minimal reproduction to be able to fix this, since we wern't able to reproduce it locally.

[beliveyourdream]

I had this same problem and i had to downgrade to v3 of the extension. I tracked this to a function x(e) in backend.js that has this if in it:

                if (t = e.$options.props) {
                    const n = [];
                    for (let r in t) {
                        const o = t[r];
                        r = Object(s.f)(r),
                        n.push({
                            type: "props",
                            key: r,
                            value: e[r],
                            meta: {
                                type: o.type ? D(o.type) : "any",
                                required: !!o.required
                            }
                        })
                    }
                    return n
                }
                return []

the problem is that some of the values in t are null (in my case there were 2: valid and invalid) and there's a call for o.type so it throws an error because const o = t[r] is null.

[Akryum]

@beliveyourdream You are facing another issue which is related to vee-validate, see #499

[beliveyourdream]

@Akryum so i have to upgrade vee-validate to 2.0.3 ?

[Akryum]

Yes.

[beliveyourdream]

@Akryum seems to be working now. Thanks for the quick reply.

[gertqin]

I have also been experiencing the problem in 4.0.1. After some trial and error I managed to reproduce the bug in my vue-typescript playground project, which is quite minimal. It only occurs (for me at least) in a setup with typescript, vuex and vue-router (synced with vuex-router-sync), and then by using the store inside the global navigation guard router.beforeEach. So I'm not surprised you could not reproduce it :)

I have attached my playground project. The bug happens when you click on the Products component (route: /produtcs) in the Vue-devtools.

vue-ts-playground.zip

[Akryum]

@gertqin You are setting a computed property in your VueBase that returns the Vuex store. Remove it and use this.$store directly in Products.vue

[gertqin]

@Akryum My computed property is returning this.$store (wrapping it with a type). Is that not allowed? If I change Products.vue to use this.$store I still get the error. The problem is with the router.beforeEach, where I use the Vuex store yes.

[Akryum]

Remove the get tStore() from VueBase.ts

[gertqin]

Ok, that works. But I still think it is valid code (and very useful in my case, as I have a complete typesafe store this way). In any case my app works fine, but the devtools does not.

[Akryum]

Vuex already have typings.

[gertqin]

Yes, but they are very generic and not really useful. My own types gives me complete type safety + intellisense etc on not only the state, but also getters, mutations and actions, using the same syntax as .js vue. Anyways this is another discussion.

[samayo]

I thought I was the only one, I updated my npm packages two days ago, and all I get is this error.

[samayo]

Yup, sorry. I just re-read the whole comment and it was @baianat's vee-validate that broke the app. It's funny, I had installed it but switched to vuelidate because It never seemed to work properly, but I forgot to uninstall it ... hence even dormant, it kept killing my time :)

[asscarecrow]

@samayo I meet the same problem call by the 'vee-validate'.I have removed it too.

[Akryum]

Fixed by #523

[samayo]

@Akryum Do you think this was related only to vee-validate? I think vue-devtools might be causing the same error also. Even thought the error went away when I remove vee-validate, I got the same error today on Chrome, but when I switched to FF it disappeared, because I don't have devtools on FF

[Akryum]

@samayo The error reported in this issue is not the same as #499

[samayo]

@Akryum I know it's not the same. That's why I was asking for it here. Even though I have removed vee-validate, I get the same error:

TypeError: Cannot read property '_route' of undefined
    at Vue$3.get (vue-router.esm.js:557)
    at backend.js:1
    at x (backend.js:1)
    at t.a (backend.js:1)
    at Store.y (backend.js:1)
    at e (backend.js:1)
    at e (backend.js:1)
    at e (backend.js:1)
    at e (backend.js:1)
    at e (backend.js:1)

Is there a solution for this?

[Akryum]

You can test this branch: https://github.com/Akryum/vue-devtools/tree/types-improvements

[KristupasMat]

Facing the same problem with the '_route' of undefined, any fixes for this?

[samayo]

@KristupasMat Seems like this is some bug related to recent updates. Can you test Akryum's branch? I don't have time to test it yet, found it easier to work without devtools for now but I'll check.

let us know if you test it

[mbube2]

I am getting some Error Message "TypeError: Cannot read property 'getLeftThumb' of undefined" while trying to use U are U 4500 FingerPrint Device.
I need help on how to solve this problem ? Plz I need help!

[wmcmurray]

Maybe this will help : I'm having the exact same error (Uncaught TypeError: Cannot read property '_route' of undefined), and in my case it was because there is 2 VueJs apps in my webpage, one is the "main app" with a vue-router, and the other app is just a chat widget without vue-router.

Now, if I try to access this.$route or this.$router from inside the chat widget app code this error will be thrown !

My understanding is : because vue-router define the $route getter globally on Vue itself, while inside my chat widget there is no _routerRoot because the router is not there ! It's in my main app ! :man_shrugging: