Uncaught (in promise) Maximum recursive updates exceeded in component <RouterView>

[janceChun]

Vue version

3.4.15

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-mgmzpd?file=src%2Fcomponents%2FHome.vue

Steps to reproduce

just need add or remove console.log in Home.vue, and you will get the error

demo2.mov

What is expected?

Find the source of the error and fix it

What is actually happening?

in vue 3.4.15，vue-router 4.2.5.
the code with v-for and ref ,for example

<ul>
    <li v-for="item in list" :key="item" ref="items">
      {{ item }}
    </li>
</ul>

and than you change any script will trigger an error Uncaught (in promise) Maximum recursive updates exceeded in component <RouterView>
for example add the console.log('========');

by the way, in in vue 3.4.14 ，there won't be this problem

System Info

Need to install the following packages:
envinfo@7.11.0
y

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.14.0 - /usr/local/bin/pnpm
  npmPackages:
    vue: ^3.4.15 => 3.4.15

Any additional comments?

No response

[janceChun]

I don't think this is a core problem with vue because the errors do not occur when I reload the page. Perhaps you can submit an issue in vue-router.

yes, the errors do not occur when reload the page, it occur when you add or delect the script (console.log) to trigger hmr @Doctor-wu

[mmoore99]

I have an app that is experiencing the same issue as described by OP. Today I upgraded the app from using Vue 3.2.45 to 3.4.15. After upgrading to 3.4.15 the problem started occurring. I then began to go back to earlier versions of Vue and the issue does not occur on any version prior to 3.4.15. In all cases the version of vue-router is 4.2.5.

[pjreed]

I just encountered this same issue, and after playing with it for a bit, I believe this problem was introduced in version 3.4.6. I cannot reproduce the issue with vue 3.4.5, but I can with 3.4.6.

[lmc3s3f0r]

Having a similar issue in a project using with vue-openlayers (I'd like to add a repo to showcase the issue, but the project is quite large and it's tough to add everything), but not with v-for. Just in a prop passed as a ref.

If it helps, I've tried with some versions with these results:
-3.3.4 and 3.4.14: everything works fine
-3.4.13 and 3.4.15: the "Maximum recursive updates exceeded" error appears

[yyx990803]

This looks like a duplicate of #10210

[lmc3s3f0r]

I just tried 3.4.16 and I'm getting the same "Maximum recursive updates eceeded".