v4.0.1 Selecting component instance to inspect by clicking name in the left pane tree on the Components tab triggers Uncought TypeError: "Cannot read property 'type' of null

[MatthewDanielLA]

Version

4.0.0

Browser and OS info

Chrome 63.0.3239.132 / Windows 10

Steps to reproduce

You can download this repository or use an online version note the local version will trigger a bunch of errors, mainly CORS issues but the results are the same, and the online version may change as it is part of an active pipeline.

Using files downloaded from repository

1. Open app.html
2. Open dev tools
3. Resume script execution as needed to get past all the errors (f8)
4. Click on component name in the left pane tree of components tab

Using online version

1. Open http://portal.cuevapor.com/
2. Enter these credentials: Username: me+vendor@mattdaniel1.com Password: test1234
3. Open vue dev tools
4. Click on a component name in the left pane in the components tab

What is expected?

The component's properties should appear in the pane on the right.

What is actually happening?

Nothing happens on the Vue Dev Tools tab (the right pane still says 'Select a component...') and the following error is triggered in Chrome:

backend.js:formatted:1095 Uncaught TypeError: Cannot read property 'type' of null
    at backend.js:formatted:1095
    at x (backend.js:formatted:1103)
    at t.a (backend.js:formatted:847)
    at Object.y (backend.js:formatted:134)
    at e (backend.js:formatted:395)
    at e (backend.js:formatted:405)
    at e (backend.js:formatted:396)
    at e (backend.js:formatted:396)
    at Object.t.stringifyStrict (backend.js:formatted:410)
    at Object.t.stringify (backend.js:formatted:350)
(anonymous) @ backend.js:formatted:1095
x @ backend.js:formatted:1103
t.a @ backend.js:formatted:847
y @ backend.js:formatted:134
e @ backend.js:formatted:395
e @ backend.js:formatted:405
e @ backend.js:formatted:396
e @ backend.js:formatted:396
t.stringifyStrict @ backend.js:formatted:410
t.stringify @ backend.js:formatted:350
t.o @ backend.js:formatted:55
O @ backend.js:formatted:1005
d.on.e @ backend.js:formatted:908
n.emit @ backend.js:formatted:725
e.listen.e @ backend.js:formatted:666
n @ backend.js:formatted:317
postMessage (async)
o @ proxy.js:1
EventImpl.dispatchToListener @ VM4744 extensions::event_bindings:403
publicClassPrototype.(anonymous function) @ VM4750 extensions::utils:138
EventImpl.dispatch_ @ VM4744 extensions::event_bindings:387
EventImpl.dispatch @ VM4744 extensions::event_bindings:409
publicClassPrototype.(anonymous function) @ VM4750 extensions::utils:138
dispatchOnMessage @ VM4751 extensions::messaging:392
backend.js:formatted:1 [Violation] 'message' handler took 611138ms

The code triggering the error:

function x(e) {
            return function(e) {
                let t;
                if (y && (t = e._props))
                    return Object.keys(t).map(n=>{
                        const r = t[n]
                          , o = r.options;
                        return {
                            type: "props",
                            key: r.path,
                            value: e[r.path],
                            meta: {
                                type: o.type ? D(o.type) : "any",
                                required: !!o.required,
                                mode: f[r.mode]
                            }
                        }
                    }
                    );
                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 []

At:

  meta: {
                                type: o.type ? D(o.type) : "any",
                                required: !!o.required

---

It doesn't happen with all my components, if I navigate in my app to a view containing specific components as long as I haven't tried to inspect one of the components that triggers the error first, these components of the same app can still be inspecting without any error. For example, after loading the app, click the blue 'Create' button and inspect the resulting view, those components are able to be inspected as intended.

Vuex tab works all the time as intended regardless of my app state.

Was not happening prior to update on Jan.13th. I reverted my app to a handful of previous commits (points in time I know dev tools was working without this error) to test if the error has something to do with a change in my code but still received the error in every previous version.

[Akryum]

Hi, do you happen to use vee-validate? #499

[MatthewDanielLA]

Yeah I do... And I updated it to 2.0.3 and everything is working as intended. Sorry, I promise I checked the issues before creating this! I just didn't realize the list was filtering out closed issues... At least I got some practice typing console.log today.