Uncaught (in promise) Maximum recursive updates exceeded in component <RouterView>
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
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
.
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 invue-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
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.
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.
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