"Maximum recursive updates exceeded" message with Vue > 3.4.14

[lmc3s3f0r]

Describe the bug
In a project with vue3-openlayers, having a Vue version higher than 3.4.14, I'm getting this error 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."

I'm not getting the error message with Vue 3.4.14.

Affected version(s)

Please run npm list --depth=0 vue vue3-openlayers ol ol-ext ol-contextmenu and paste the output below:

nuxt-app@ /home/lmcsf/Desktop/work/dev/repos/bug_reports/openlayers_max_recursive
├── ol-contextmenu@5.4.0
├── ol-ext@4.0.17
├── ol@8.2.0
├── vue@3.4.21
└── vue3-openlayers@4.0.2

To Reproduce
Steps to reproduce the behavior:

1. Clone this repo: https://github.com/lmc3s3f0r/openlayers_max_recursive_updates_bug
2. Run npm install and then npm run dev to launch it
3. Go to Chrome's console
4. See error meesage "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."
5. The error doesn't appear when you go to components/MapOL.client.vue and comment lines 81 to 83 (the setTimeout function) and uncomment the line 85 (same action, but without setTimeout).

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

Desktop (please complete the following information):

• OS: Ubuntu 22
• Browser: Chrome

Additional context
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).

---

UPDATE:
The latest 4.1.2 version does fix the issue, although I was still having it in the actuall app I found this bug on, so I've updated the reproduction project linked above (https://github.com/lmc3s3f0r/openlayers_max_recursive_updates_bug) and I'm able to reproduce the issue again.

Apparently the problem only happens when using "setTimeout". If you go to components/MapOL.client.vue, comment lines 81 to 83, and uncomment line 85, no error appears.

[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.

Is it related to this issue 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.

[d-koppenhagen]

@mostafaznv the bug has been fixed meanwhile I think and docs aren't crashing anymore.
@lmc3s3f0r I checked out your repo and update to vue3-openlayers@4.1.0. There seems to be no bug anymore.
Please consider also updating to the latest version 6.2.1

[lmc3s3f0r]

@mostafaznv the bug has been fixed meanwhile I think and docs aren't crashing anymore. @lmc3s3f0r I checked out your repo and update to vue3-openlayers@4.1.0. There seems to be no bug anymore. Please consider also updating to the latest version 6.2.1

Hi! I did update to 4.1.2 in my reproduction repo and the problem is gone. However, in the actual app where I found this bug, it's still present, so I guess I'll have to figure out another small repo to reproduce this issue >_<

Also tried upgrading to 6.2.1, and while I get no "recursive" error message in both the reproduction and the actual project, the vector layers don't show up in the real project.

[lmc3s3f0r]

@d-koppenhagen I managed to update the provided repo to show the error that is still happening. Apparently, it only happens when using "setTimeout" to get the features displayed in the map (and that's something I can't avoid, as in my app I have much more stuff happening in that "setTimeout").

This updated repo uses vue3-openlayers 4.1.2 (as I can't manage to show the geometry with version 6.3.2).

Please let me know if this issue can be reopened or if I should report it as a new issue.

Thanks a lot in advance <3

---

EDIT with some extra info:
Tested 6.3.2 a bit more, both in the actuall app and in the reproduction project.

The issue I was having (geometry not showing up in the map) only happens (again) when using setTimeout. If I directly provide the data without the "setTimeout" function, the geometry appears. If I wrap it inside a "setTimeout", it doesn't.

So it looks like there's something happening with vue3-openlayers and setTimeout, either in v4 or v6.

Hope it helps.

[d-koppenhagen]

okay. I will have a look at it.

[d-koppenhagen]

Hey, I investigated this further by checking out your repo and using npm link against the dev env from this repo. I found out that the feature changes weren't watched, in fact there was no update when setting the features in a setTimeout().

I just released a new version where feature changes are watched explicitly.
Please update and use vue3-openlayers@6.4.1. In the demo repo you have to change:

  "dependencies": {
    "@types/proj4": "^2.5.5",
    "nuxt": "^3.11.1",
-    "ol": "^8.2.0",
+    "ol": "^9.1.0",
-    "ol-contextmenu": "^5.3.0",
+    "ol-contextmenu": "^5.4.0",
-    "ol-ext": "^4.0.13",
+    "ol-ext": "^4.0.17",
-    "proj4": "^2.10.0",
+    "proj4": "^2.11.0",
    "vue": "3.4.21",
    "vue-router": "^4.3.0",
-    "vue3-openlayers": "^4.1.2"
+    "vue3-openlayers": "6.4.1"
  },

With this setup it seems to work and since in previous versions of version >6, the "Maximum recursive updates exceeded" log should also disappear (was some problem with computed props).
I would be happy if you can verify it works now.

[lmc3s3f0r]

Works like a charm. Thank you very much! :D