Error geometryReader is not a function

[alpacato]

I use library with nwjs, and make this component:

<template>
  <div class="vue-root">
    <div id="map">
      <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true">
        <vl-view :zoom="10" :center="center" :rotation="0"></vl-view>

        <vl-layer-tile id="osm">
          <vl-source-osm :url="map_source"></vl-source-osm>
        </vl-layer-tile>

        <vl-overlay class="feature-popup" v-for="feature in features" :key="feature.id" :id="feature.id" :position="pointOnSurface(feature.geometry)"
          :auto-pan="true">
          <component :is="feature.geometry.template" :coordinates="feature.geometry.coordinates"></component>
        </vl-overlay>

        <component v-for="layer in layers" :is="layer.template" v-if="layer.visible" :key="layer.id" v-bind="layer">

          <component :is="layer.source.template" v-bind="layer.source">
            <vl-feature v-for="feature in layer.source.features" :key="feature.id" :id="feature.id" :properties="feature.properties">
              <component :is="feature.geometry.template" :coordinates="feature.geometry.coordinates"></component>
            </vl-feature>

            <component v-if="layer.source.source" :is="layer.source.source.template" v-bind="layer.source.source">
              <vl-feature v-for="feature in layer.source.source.features" :key="feature.id" :id="feature.id" :properties="feature.properties">
                <component :is="feature.geometry.template" :coordinates="feature.geometry.coordinates" @click="alert(feature)"></component>
              </vl-feature>
            </component>
          </component>

          <component v-for="(style, i) in layer.style" :key="i" :is="style.template" v-bind="style">
            <component v-for="(s, template) in style.styles" :key="template" :is="template" v-bind="s">
              <vl-style-fill v-if="s.fill" v-bind="s.fill"></vl-style-fill>
              <vl-style-stroke v-if="s.stroke" v-bind="s.stroke"></vl-style-stroke>
            </component>
          </component>

        </component>

      </vl-map>
    </div>
  </div>
</template>

<script>
  import {
    core as vlCore
  } from 'vuelayers'

  export default {
    data() {
      return {
        center: [20.5502871, 54.732708099999996],
        map_source: "https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png", //"./map/images/{x}/{y}/{z}.png"
        map: undefined,
        features: [{
          type: 'Feature',
          id: 'random-1',
          geometry: {
            type: 'Point',
            coordinates: [20.5502871, 54.732708099999996],
          },
        }, {
          type: 'Feature 2',
          id: 'random-2',
          geometry: {
            type: 'Point',
            coordinates: [20.4502871, 54.632708099999996],
          },
        }],
        layers: [{
          id: 'cluster',
          title: 'Cluster',
          template: 'vl-layer-vector',
          visible: true,
          source: {
            template: 'vl-source-cluster',
            distance: 11,
            source: {
              template: 'vl-source-vector',
              features: [{
                template: 'Feature',
                id: 'random-1',
                geometry: {
                  template: 'vl-geom-point',
                  coordinates: [20.4502871, 54.632708099999996],
                }
              },{
                template: 'Feature',
                id: 'random-2',
                geometry: {
                  template: 'vl-geom-point',
                  coordinates: [20.3502871, 54.632708099999996],
                }
              }],
            },
          },
          style: [{
            template: 'vl-style-func',
            factory: this.clusterStyleFunc,
          }]
        }]
      }
    },
    mounted() {
      console.log('Component «Client Part Map» mounted.')
    },
    methods: {
      pointOnSurface: vlCore.geomHelper.pointOnSurface,
      clusterStyleFunc() {
        const cache = {}

        return function __clusterStyleFunc(feature) {
          const size = feature.get('features').length
          console.log('feature', feature)
          let style = cache[size]

          if (!style) {
            style = vlCore.styleHelper.style({
              imageRadius: 10,
              strokeColor: '#fff',
              fillColor: '#3399cc',
              text: size.toString(),
              textFillColor: '#fff',
              zIndex: 100,
            })
            cache[size] = style
          }
          console.log(style)
          return [style]
        }
      },
    }
  }
</script>

<style lang="scss" scoped>
  #map {
    min-height: 600px;
    height: calc(100vh - 40px - 150px - 15px);
    border-radius: 25px;
  }
</style>

I try to comment some components, and error makes in vl-source-vector component.
What i do wrong? Where function exepted?

Documentation like a:

[ghettovoice]

Hi! First of all, sorry about documentation, I work on it.
Now about your issue: you define features key with array inside your vl-source-vector config, this component has property with the same name, that accepts features array encoded in GeoJSON format.
You should define features as valid GeoJSON Feature (see example) or change key features to something else (see example).
Take a note: in the first example I define features in GeoJSON format , therefore no need to render them in component template; in the second example I define features array as Vue component config to render it with v-for inside template, so another key should be used to avoid intersection with source prop.

[alpacato]

Thank you for answer.
If docs will has simple examples of basic usage of components it will be great 👍