I am looking to integrate a map into an existing vue3 project. Using the getting started page of vue3-openlayers: https://vue3openlayers.netlify.app/get-started.html I get a component that looks like this:
`
<template>
<ol-map style="min-width: 400px; min-height: 400px;">
<ol-view :center="[40, 40]" :zoom="5" projection="EPSG:4326" />
<ol-tile-layer>
<ol-source-osm />
</ol-tile-layer>
</ol-map>
</template>
<style scoped>
</style>`
Along with these changes in my main.js:
` import "vue3-openlayers/styles.css";
import OpenLayersMap from "vue3-openlayers";
app.use(OpenLayersMap /*, options */);`
When I go to a page which includes the component I get the following error:
Uncaught (in promise) TypeError: currentRenderingInstance is null renderSlot runtime-core.esm-bundler.js:2961 setup vue3-openlayers.es.js:430 renderComponentRoot runtime-core.esm-bundler.js:874 componentUpdateFn runtime-core.esm-bundler.js:6011 run reactivity.esm-bundler.js:177 update runtime-core.esm-bundler.js:6142 setupRenderEffect runtime-core.esm-bundler.js:6152 mountComponent runtime-core.esm-bundler.js:5920 processComponent runtime-core.esm-bundler.js:5874 patch runtime-core.esm-bundler.js:5342 componentUpdateFn runtime-core.esm-bundler.js:6018 run reactivity.esm-bundler.js:177 update runtime-core.esm-bundler.js:6142 setupRenderEffect runtime-core.esm-bundler.js:6152 mountComponent runtime-core.esm-bundler.js:5920 processComponent runtime-core.esm-bundler.js:5874 patch runtime-core.esm-bundler.js:5342 componentUpdateFn runtime-core.esm-bundler.js:6098 run reactivity.esm-bundler.js:177 update runtime-core.esm-bundler.js:6142 callWithErrorHandling runtime-core.esm-bundler.js:192 flushJobs runtime-core.esm-bundler.js:399 promise callback*queueFlush runtime-core.esm-bundler.js:308 queueJob runtime-core.esm-bundler.js:302 effect runtime-core.esm-bundler.js:6136 resetScheduling reactivity.esm-bundler.js:264 triggerEffects reactivity.esm-bundler.js:308 triggerRefValue reactivity.esm-bundler.js:1070 set value reactivity.esm-bundler.js:1115 finalizeNavigation vue-router.mjs:3361 pushWithRedirect vue-router.mjs:3226 promise callback*pushWithRedirect vue-router.mjs:3193 push vue-router.mjs:3118 install vue-router.mjs:3559 use runtime-core.esm-bundler.js:3850 <anonymous> main.js:14 js app.js:337 __webpack_require__ app.js:1318 __webpack_exports__ app.js:2489 O app.js:1360 <anonymous> app.js:2490 <anonymous> app.js:2492
I am assuming there is something else in my environment which is conflicting (and TBH there is quite a bit in there)
"dependencies": { "@popperjs/core": "2.11.8", "bootstrap": "5.3.3", "chart.js": "^4.4.1", "core-js": "3.36.0", "dropzone": "6.0.0-beta.2", "marked": "^14.1.3", "ol": "^10.3.1", "ol-contextmenu": "^5.5.0", "ol-ext": "^4.0.24", "quill": "1.3.7", "vue": "3.4.19", "vue-chartjs": "^5.3.1", "vue-count-to": "1.0.13", "vue-flatpickr-component": "11.0.4", "vue-router": "4.3.0", "vue3-openlayers": "^11.3.0", "vuex": "4.1.0" },
But I am struggling to work out what this error means and how I might go about diagnosing it.
I was hoping to find an explanation on google as to what this error means, and what causes it, but there appears to be very little.
Another answer mentions a potential cause. The library mistakenly imposes a restriction on Vue version in library dependencies, while it's supposed to do this in peerDependencies only. This may result in duped vue and, therefore, bugs.
A fix is update Vue version in project dependencies to satisfy version constraint of vue3-openlayers, i.e. ^3.4.35 as of now. This makes maintenance complicated because this problem may recur in future.
A better solution is to force the library to use the same Vue version as the project. With Yarn this can be done like:
"resolutions": {
"vue3-openlayers/vue": "*"
}