LifecycleError: VlGeomPoint.8b9916e6-2ced-413b-923f-270329a2fe9a unmount ol object failed: Cannot read properties of null (reading 'coordinates')

[paulbeare77]

Hi,
I am using you code in my site to show a map of a property. The long and lat information is stored in a db and is added to the map on creation. This all works and the circle for the property is added.
however when the user moves away from the component (via routing) that the map is in they get the below error. What can I do to remove this error.
Vue warn]: Error in beforeDestroy hook (Promise/async): "LifecycleError: VlGeomPoint.8b9916e6-2ced-413b-923f-270329a2fe9a unmount ol object failed: Cannot read properties of null (reading 'coordinates')"
found in
--->


at src/components/accommodation/details/AccommodationDetailsMapCard.vue
at src/components/accommodation/details/AccommodationDetails.vue
at src/App.vue

My compoinent looks like this:

<template>
  <b-card no-body>
    <b-card-body>
      <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
              data-projection="EPSG:4326" style="height: 300px">
        <vl-view :zoom.sync="zoom" :center.sync="centre" :rotation.sync="rotation"></vl-view>
            <vl-feature>
              <vl-geom-point :coordinates.sync="centre === null ? [0,0] : centre"></vl-geom-point>
              <vl-style>
                <vl-style-circle :radius="8">
                  <vl-style-stroke color="blue"></vl-style-stroke>
                </vl-style-circle>
              </vl-style>
            </vl-feature>
        <vl-layer-tile>
          <vl-source-osm></vl-source-osm>
        </vl-layer-tile>
      </vl-map>
    </b-card-body>
  </b-card>
</template>

<script>
  export default {
    name: 'accommodation-details-map-card',
    props: ['accommodation'],
    data: function () {
      return {
        zoom: 14,
        centre: [0, 0],
        rotation: 0,
      }
    },
    created: function () {
      this.centre = [];
      if (this.accommodation.longitude !== "") {
        this.centre.push(parseFloat(this.accommodation.longitude));
        this.centre.push(parseFloat(this.accommodation.latitude));
      }
    },
  }
</script>

[ghettovoice]

Hello @paulbeare77 ,
I have found a bug in geometry components.
Thanks for response!

I'll make a new patch

[ghettovoice]

Upgrade to v0.12.7. It should resolve this issue.

[paulbeare77]

thanks for the update