[2.7.x] TypeError: Cannot read properties of undefined (reading 'on')

[Tofandel]

Version

2.7.3

Screen

Steps to reproduce

Unsure, I'm very confident I will not be able to provide a reproduction, this is happening on a big app with a few vuex plugins when upgrading from v2.6.14 to v2.7.3

What is expected?

No error

What is actually happening?

[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'on')"

---

This is on this line https://github.com/vuejs/vue/blob/main/src/v3/currentInstance.ts#L22

It seems in some very obscure case that I will not be able to reproduce (seems triggered by a watcher from vuex)

Based on debugging it seems in some case, setCurrentInstance is called on a vm that is still uninitialized and so the _scope property is still undefined when called (as you can see it's a comment, because it's comming from a component with a v-if="false")

The stack strace, shows that it's coming from this setCurrentInstance

[Tofandel]

After changing

function setCurrentInstance(vm) {
    if (vm === void 0) { vm = null; }
    if (!vm)
        currentInstance && currentInstance._scope && currentInstance._scope.off();
    currentInstance = vm;
    vm && vm._scope && vm._scope.on();
}

The issue dissappears and the page renders but I'm getting $attrs is readonly / $listeners is readonly which pointed me to the fact I had both 2.6.14 and 2.7 loaded on the page

So I added this to my package.json

    "resolutions": {
        "vue-loader": "15.10.0",
        "vue": "2.7.3"
    },

[Tofandel]

So yep, issue was due to multiple vue instances bundled, would be nice if this could be detected and have an error message straight away, as this is a common recurring issue, and with this version the error message is different
For instance this is the thread with the same issue but different version bootstrap-vue/bootstrap-vue#3040

[Sinosaurus]

same question

[yyx990803]

There's not really a way for Vue itself to reliably detect that multiple versions of it is being used - since this can depend on your dependency tree, package manager used, build tool used, and dep install order over time.

Even if we special this case, there could be other errors when you have multiple copies of Vue being bundled.

One way to avoid this is to always remove your lockfiles and do a fresh install when upgrading major deps like Vue.

[mheers]

I had the same problem. The hint with the multiple versions helped. Due to upgrade from 2.6.14 to 2.7.8 and some rebasing my yarn.lock looked like this:

vue@^2.2.6, vue@^2.5.17, vue@^2.6.10, vue@^2.6.11, vue@^2.6.14:
  version "2.6.14"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.14.tgz#e51aa5250250d569a3fbad3a8a5a687d6036e235"
  integrity sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==

vue@^2.6.12:
  version "2.7.2"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.2.tgz#d42aba8d03c4e82d4b127f7b764a822cf19f9cdc"
  integrity sha512-fQPKEfdiUP4bDlrGEjI5MOTkC5s/XIbnfKAx0B3MxJHI4qwh8FPLSo8/9tFkgFiRH3HwvcHjZQ1tCTifOUH0tg==
  dependencies:
    "@vue/compiler-sfc" "2.7.2"
    csstype "^3.1.0"

vue@^2.7.8:
  version "2.7.8"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.8.tgz#34e06553137611d8cecc4b0cd78b7a59f80b1299"
  integrity sha512-ncwlZx5qOcn754bCu5/tS/IWPhXHopfit79cx+uIlLMyt3vCMGcXai5yCG5y+I6cDmEj4ukRYyZail9FTQh7lQ==
  dependencies:
    "@vue/compiler-sfc" "2.7.8"
    csstype "^3.1.0"

So I removed these lines and after a yarn install it looks clean:

vue@^2.2.6, vue@^2.5.17, vue@^2.6.10, vue@^2.6.11, vue@^2.6.12, vue@^2.6.14, vue@^2.7.8:
  version "2.7.8"
  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.8.tgz#34e06553137611d8cecc4b0cd78b7a59f80b1299"
  integrity sha512-ncwlZx5qOcn754bCu5/tS/IWPhXHopfit79cx+uIlLMyt3vCMGcXai5yCG5y+I6cDmEj4ukRYyZail9FTQh7lQ==
  dependencies:
    "@vue/compiler-sfc" "2.7.8"
    csstype "^3.1.0"

[zamronypj]

Thanks. I had the same problem. The hint with the multiple versions helped.

[marcbachmann]

Just found an edge case where the same error is thrown.

The culprit was a custom provide property that conflicted with the internal _scope variable of vue. Renaming it fixes the issue.

new Vue({
  el: element,
  provide: {
-    _scope: someScope
+    _customScope: someScope
  }
})

I guess the same issue can occur in vue 3. An assertion to prevent internal property overrides could provide a safeguard against such issues.

[acmu]

Thank you for your hint, same question

[yangyxd]

The problem disappeared after I repaired the various npm package versions used in the project and upgraded to vue 2.7.14.

[leereichardt]

I've just upgraded to Vue 2.7 and I'm now getting this and can't figure out why. I'm using npm and I don't have multiple versions of vue installed but I have narrowed down this error to only when I'm using router-links (for our legacy app, we have some links that need to be a tags).

Any ideas here?

[martinapitakova]

@leereichardt Look into the router-links library and see if you are also adding Vue within it, which has a different version (not 2.7)

[leereichardt]

@leereichardt Look into the router-links library and see if you are also adding Vue within it, which has a different version (not 2.7)

Sorry, I meant a "router-link" tag, which is all part of vue-router. Vue-router as vue 2.7. I'll check some other libraries I have installed though

[leereichardt]

After changing

function setCurrentInstance(vm) {
    if (vm === void 0) { vm = null; }
    if (!vm)
        currentInstance && currentInstance._scope && currentInstance._scope.off();
    currentInstance = vm;
    vm && vm._scope && vm._scope.on();
}

The issue dissappears and the page renders but I'm getting $attrs is readonly / $listeners is readonly which pointed me to the fact I had both 2.6.14 and 2.7 loaded on the page

So I added this to my package.json

    "resolutions": {
        "vue-loader": "15.10.0",
        "vue": "2.7.3"
    },

I tried this change to the source code, but now if I try and use router-links (as part of vue-router), I now get an infinite update loop. I'm thinking that vue-router just hasn't received the vue 2.7 love

[pawelgur]

Bumped into similar case: was getting TypeError: Cannot read properties of undefined (reading 'depend') after updating to Vue 2.7.16.

Was caused by "catch-all keys" Proxy instance being passed as component property. Proxy was returning unexpected value for __ob__ field introduced in 2.7.16 here .

Solution was to update proxy implementation to ignore __ob__ key.