"Maximum recursive updates exceeded" message with Vue > 3.4.14

[lmc3s3f0r]

Vue version

3.4.21

Link to minimal reproduction

https://github.com/lmc3s3f0r/openlayers_max_recursive_updates_bug

Steps to reproduce

1- Clone the repo linked in the "Reproduction link" field (or here: https://github.com/lmc3s3f0r/openlayers_max_recursive_updates_bug)

2- Run npm install

3- Run it (npm run dev)

4- In Chrome, go to the console and you'll see the message "Uncaught (in promise) Maximum recursive updates exceeded. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself. Possible sources include component template, render function, updated hook or watcher source function."

Extra: the error message doesn't appear on Vue 3.4.14. To reproduce it:

1- In package.json, change
"vue": "^3.4.21",
to
"vue": "3.4.14",

2- Delete node_modules and package-lock.json

3- Run npm install again

4- Run the project. You won't see the "maximum recursive updates exceeded" message.

What is expected?

I'd expect not to have this error message, same as with Vue 3.4.14.

What is actually happening?

I wish I knew.

System Info

System:
    OS: Linux 6.1 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 13th Gen Intel(R) Core(TM) i7-1355U
    Memory: 17.00 GB / 30.98 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
  Browsers:
    Chrome: 122.0.6261.111
  npmPackages:
    vue: ^3.4.21 => 3.4.21

Any additional comments?

I'm working on a big project with heavy use of OpenLayers maps, and when we recently updated Nuxt and Vue versions, we found this error and we can't figure out where it's coming from (Vue or vue3-openlayers).

The project is quite big so I provided this small version. The error is caused in the file /components/MapOL.vue, line 82. If you comment that line, the error message doesn't appear, but in that case we can't show polygons in the map.

A recent Vue update seemed to fix this error message for many users, but not for our project.

We're currently stuck on Vue 3.4.14 because updating to a higher version causes this error everywhere (and we'd like to update Vue so we can update other packages that need Vue 3.4.19 or higher).

[edison1105]

I think this should be submitted to vue3-openlayers first, or there is a simple replication that does not rely on third-party libraries.

[lmc3s3f0r]

I think this should be submitted to vue3-openlayers first, or there is a simple replication that does not rely on third-party libraries.

Yep, I submitted the issue to them as well (MelihAltintas/vue3-openlayers#312), but I would expect them to also tell me the issue might be from Vue and that I should submit it here, so I opted to submitting it to both sides.

Submitting it here, at least I hoped for someone to shed some light on what might be wrong, either in Vue or in vue3-openlayers, because the line that causes the problem is just a regular ref variable being updated from the result of a function that takes a string as a parameter:

The line:

  geometryFeatures.value = wktFormat.readFeatures(geometry, {
    dataProjection: "EPSG:25830",
    featureProjection: "EPSG:25830",
  });

(where "geometry" is "MULTIPOLYGON(((500538.9863512241 4638424.586848955,501016.7991949093 4638371.797327979,500871.9664065969 4638191.77152569,501221.1893914997 4638245.914624118,501207.65361689095 4637923.763188435,500422.57868959 4637971.138399563,500538.9863512241 4638424.586848955)))")

Can't figure out how a recursive loop happens there.

[mostafaznv]

I'm encountering another error, even when using the plugin documentation pages.
Every time I open this page and navigate to the second map, the current Chrome tab crashes, and everything freezes.

[lmc3s3f0r]

I'm encountering another error, even when using the plugin documentation pages. Every time I open this page and navigate to the second map, the current Chrome tab crashes, and everything freezes.

Hi. Is this related to the issue I reported or should it be reported separately?

[mostafaznv]

To be honest, I’m not entirely sure yet. I’m currently investigating the issue, but I haven’t identified the root cause so far.

I thought it might be related to this issue, but if it’s not, please disregard my reply. Apologies in advance for any confusion.

[longjiahui]

I met this problem too after I upgraded the vue version of my project to v3.4.21( 3.4.15 still report the errors after tested ). Until I found this issue and downgraded to 3.4.14 and the recursive error report stoped.

[lmc3s3f0r]

I met this problem too after I upgraded the vue version of my project to v3.4.21( 3.4.15 still report the errors after tested ). Until I found this issue and downgraded to 3.4.14 and the recursive error report stoped.

It's been fixed in a recent vue3-openlayers update (MelihAltintas/vue3-openlayers#312), but unfortunately, while it fixed the issue in the reproduction project I provided, I'm still getting the error in the actual app I'm developing. I'm currently trying to find where the problem is still present to provide a new reproduction project.

[lmc3s3f0r]

I met this problem too after I upgraded the vue version of my project to v3.4.21( 3.4.15 still report the errors after tested ). Until I found this issue and downgraded to 3.4.14 and the recursive error report stoped.

FYI, it's just been fixed in vue3-openlayers 6.4.1 ;)

[yyx990803]

Closing since this has been fixed in the related library.