Subscribe on changes!

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

avatar
Jan 30th 2024

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

https://github.com/vuejs/core/assets/4457572/90b37e16-1d4a-4bdb-955f-60b5e72762b5

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

avatar
Jan 30th 2024

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. CleanShot 2024-01-30 at 19 49 58@2x

avatar
Jan 30th 2024

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. CleanShot 2024-01-30 at 19 49 58@2x

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

avatar
Jan 30th 2024

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.

avatar
Jan 31st 2024

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.

avatar
Feb 5th 2024

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

avatar
Feb 7th 2024

This looks like a duplicate of #10210

avatar
Feb 8th 2024

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