VueJS 3，什么原因导致TypeError: currentRenderingInstance is null

Question

我希望将地图集成到现有的 vue3 项目中。使用 vue3-openlayers 的入门页面：https://vue3openlayers.netlify.app/get-started.html 我得到一个如下所示的组件：

`

<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>`

随着我的 main.js 中的这些更改：

` 导入“vue3-openlayers/styles.css”；

import OpenLayersMap from "vue3-openlayers";

app.use(OpenLayersMap /*, options */);`

当我转到包含该组件的页面时，出现以下错误：

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

我假设我的环境中有其他东西是冲突的（说实话，那里有很多东西）

 "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" },

但是我正在努力弄清楚这个错误的含义以及如何诊断它。

我希望在谷歌上找到关于这个错误的含义以及原因的解释，但似乎很少。

Answer 1

鉴于此处的 Github 讨论：https://github.com/MelihAltintas/vue3-openlayers/issues/56

您应该尝试使用 NPM 或 PNPM（我假设您当前正在使用纱线）。