Vue-devtools: Uncaught TypeError: Cannot read property '__VUE_DEVTOOLS_ROOT_UID__' of undefined

[adrienbaron]

Version

5.0.0-beta.1

Browser and OS info

Chrome Version 68.0.3440.106 / Windows 10

Steps to reproduce

• Install 5.0.0-beta.1
• Clone this repo: https://github.com/adrienbaron/bug-components-tree-vuedevtools
• Run npm install and npm run dev
• Go to http://localhost:3000/
• Open the Components tab -> Components under the root page index are missing
• Open the Performance tab and start recording -> FPS bar chart is not displaying
• Select Component Render tab -> No components are displayed

What is expected?

• All the components should appear in the tree in the Components tab
• Performance tab should display FPS bar chart
• Component Render should display components

What is actually happening?

In console the following error is thrown:

backend.js:7 Uncaught TypeError: Cannot read property '__VUE_DEVTOOLS_ROOT_UID__' of undefined
    at backend.js:7
    at L (backend.js:7)
    at L.children.e.children.e.children.map.e (backend.js:7)
    at Array.map (<anonymous>)
    at L (backend.js:7)
    at D (backend.js:7)
    at Array.map (<anonymous>)
    at L (backend.js:7)
    at Array.map (<anonymous>)
    at L (backend.js:7)

---

I found the bug on my current project which uses Nuxt edge and Vuetify.
I then reproduced by creating a sample app using: https://github.com/nuxt-community/create-nuxt-app and updating dependencies to latest stable release (Nuxt 1.4.2, Vuetify 1.2.1).
The problem doesn't seem to appear with Nuxt base app alone, so it might come from Vuetify functional components?

[ellis2323]

Same bug with vuetify 1.2.1 only

[adrienbaron]

On my other project it also happens with Vuetify 1.1.14, so might be more than just version 1.2.1

[ellis2323]

Ok. It's related to vuetify. I created a new default project and same problem. No problem without vuetify

[ellis2323]

I have a created a bug in vuetify:
https://github.com/vuetifyjs/vuetify/issues/5013

[johnleider]

This has to do with how vue-devtools is parsing functional components and expecting a $root instance to be on them, which it is not. There is nothing we can do aside from removing functional components to resolve this @ellis2323 .

[Akryum]

Can't reproduce on dev:

[Rosefalk]

@Akryum Just some information. I encountered the same issue and could somewhat reproduce it (unrelated to vuetify). A coworker of mine had a logging library which had a constructor added to a mixin. Removing the constructor caused Vue DevTools to show components again. No warnings were shown anywhere.

[Akryum]

Do you have a minimal reproduction? @Rosefalk

[Rosefalk]

@Akryum I will try to make one and get back to you 👍

[blalan]

Updated to beta 3. Now no errors and it seems to be working again for me (Didn't work on an earlier beta) (Using Vuetify 1.2.3). Looks fantastic!