Console error: prepare.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')

[redfox05]

Console errors originating from the Vue.js devtools beta extension. Version: 7.0.0 beta 12

Let me know what other debug info you would like.

prepare.js:1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
    at Is (prepare.js:1:49734)
    at At (prepare.js:1:52982)
    at mn (prepare.js:1:53166)
    at prepare.js:1:59930
    at prepare.js:1:63865
    at Array.map (<anonymous>)
    at prepare.js:1:63858
    at Et.callHookWith (prepare.js:1:35597)
    at prepare.js:1:63815
    at new Promise (<anonymous>)
    at Object.getInspectorState (prepare.js:1:63797)
    at Proxy.getInspectorState (VM278279 user-app.js:71:73711)
    at b (VM278279 user-app.js:71:49932)
    at t (VM278279 user-app.js:71:64182)

Chrome Devtools points to the following section of code in prepare.js, specifically the line o = t.type.props;

function Is(t) {
        let e = []
          , o = t.type.props;
        for (let n in t.props) {
            let r = o ? o[n] : null
              , s = so(n);
              ......code continues......

[webfansplz]

You can try to use the stable version (7.6.4).

[redfox05]

@webfansplz ok worth a try if it gets annoying for me, but I'm primarily reporting it here as a bug report in the github issues so that the dev's can be aware and look into fixing it in the beta version :)

(I think that's probably why someone downvoted your reply).

[webfansplz]

@webfansplz ok worth a try if it gets annoying for me, but I'm primarily reporting it here as a bug report in the github issues so that the dev's can be aware and look into fixing it in the beta version :)

(I think that's probably why someone downvoted your reply).

Beta and stable versions are not the same project in the Google Extension Store, after the release of the stable version, we do not maintain the Beta version, so we recommend using the stable version (it will be better in every way).

[mlmoravek]

I have the same error. (I used the latest versions released to date.) When I create a second Vue app instance, I can see the new instance in the DevTools. However, opening a component in the DevTools of the second instance produces an error in prepare.js:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type')
    at Ss (prepare.js:1:50813)
    at xt (prepare.js:1:53849)
    at _n (prepare.js:1:54020)
    at prepare.js:1:60925
    at prepare.js:1:64944
    at Array.map (<anonymous>)
    at prepare.js:1:64937
    at Et.callHookWith (prepare.js:1:35674)
    at prepare.js:1:64894
    at new Promise (<anonymous>)

I discovered that it is based in this function:

 function _n(t) {
        var a;
        let e = k(I.value, t.instanceId)
          , o = ae(e)
          , n = N(e)
          , r = (a = e == null ? void 0 : e.type) == null ? void 0 : a.__file
          , s = xt(e);
return {...};

While k is:

  function k(t, e) {
      return e = e || `${t.id}:root`,
      t.instanceMap.get(e) || t.instanceMap.get(":root")
  }

The call k(I.value, t.instanceId) returns undefined. The error occurred in the call to xt(e), where the inner call to SS(t) caused it.

function xt(t) {
    let e = Is(t);
    return vs(t).concat(Ss(t), Cs(t), Ns(t, e), Ds(t), Ps(t), xs(t, e), As(t), Rs(t))
}

function Ss(t) {
    let e = t.type // `t` is undefined => TypeError: Cannot read properties of undefined (reading 'type')
...

I discovered, that in I.value the property instanceMap has only one value, in my case myrootappname:root. However, the value of property t.instanceId is completely different (in one project "app-1:3470"; in another project "vitepressapp:279"). So when k(t, e) is called, the t.instanceMap does have no value with such an instanceId in the call t.instanceMap.get(e).

I found the place in the source code: https://github.com/vuejs/devtools/blob/58d87371caf2ce5535fb08db1d34f65c9439269f/packages/devtools-kit/src/core/component/state/index.ts#L11