Error when highlighting the child of a functional component: "backend.js:396 Uncaught TypeError: Cannot read property 'name' of undefined"

acdcjunior commented 5 years ago

Version

5.1.1

Browser and OS info

Chrome 76 / Windows 10

Steps to reproduce

open https://xsy58.csb.app/
open vue-devtools and check the component tree:
highlight the <Anonymous Component> on the component tree and the error will appear in the console:

Full/complete steps:

create a functional component with an <input /> child
the child will be displayed as "<Anonymous Component> (functional)" on vue-devtool's component tree
highlight it and the error will appear in the console

Error:

backend.js:396 Uncaught TypeError: Cannot read property 'name' of undefined
    at getComponentName (backend.js:396)
    at highlight (backend.js:1600)
    at Bridge.<anonymous> (backend.js:2170)
    at Bridge.emit (backend.js:6074)
    at Bridge._emit (backend.js:5897)
    at backend.js:5822
    at Array.forEach (<anonymous>)
    at backend.js:5822
    at listener (backend.js:3215)

What is expected?

no errors

What is actually happening?

console logs error

originally reported as a stackoverflow.com question (https://stackoverflow.com/q/57952313/1850609) by @Sanjay
The error happens because the functional components' children have no vnode.fnOptions. This occurrs even when the child is a Vue component (not just when they are <input />s, such as in the demo).
The problem is many functions expect the options to not be undefined.
- I begun a patch by adding guards to the functions as they errored (getComponentName is just the first; more show up as you patch)...
- ...but then I realised the problem may be in (1) the vnode.fnOptions being not filled (when it should have been) for those children, or (2) the children of the functional components should not appear in the component tree, which would make this whole thing a non issue.
- Since I didn't have enough info to conclude on the best path to follow, I stopped the patch and just created the issue. If you wish to point me in the right direction, I can help.

bobvandevijver commented 4 years ago

This is still relevant, and actually quite annoying. But, as mentioned in the SO question, in my case it seem to be related to scoped styles in functional component. When there is no scoped style, the error is gone. So for know, move the scoped styling to some global place is a valid workaround for me.

@acdcjunior Your reproducable example is gone btw.

acdcjunior commented 4 years ago

@bobvandevijver Apparently, there's a bug in codesandbox. The link is https://codesandbox.io/s/vue-template-xsy58 . It only works when I'm logged in.

vuejs / devtools-v6