Error in render: "TypeError: destinationProjection is null"

Hello there,

I’m trying to create a simple map with a source-vector by loading external features. I already did it in a static single html page using cdn js imports. Now I’m trying to port my code in a Vue-cli project so I give vuelayers a try !

I followed this example from vuelayers documentation : https://vuelayers.github.io/#/docs/component/vector-layer

Few specificities about my code :

• I need to create features from GeoJSON and I didn’t find any helpers in vuelayers to do so. So I installed openlayers in addition to vuelayers.
• My input data is in EPSG:2154 so I defined this projection using proj4 in my main.js file like this

import proj4 from 'proj4'
proj4.defs("EPSG:2154","+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");

Here is my component :

<template>
  <div>
    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true"
             data-projection="EPSG:2154" style="height: 400px">
      <vl-view :zoom.sync="zoom" :center.sync="center" :rotation.sync="rotation" projection="EPSG:3857"></vl-view>

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

      <vl-layer-vector>
        <vl-source-vector :features.sync="features"></vl-source-vector>

        <vl-style-box>
          <vl-style-stroke color="green" :width="3"></vl-style-stroke>
          <vl-style-fill color="rgba(255,255,255,0.5)"></vl-style-fill>
        </vl-style-box>
      </vl-layer-vector>

    </vl-map>
  </div>

</template>

<script>
import Vue from 'vue'
import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css' // needs css-loader
import fetchProfileService from '@/services/api/myservice.service.js'

import {Feature} from 'ol'
import {GeoJSON} from 'ol/format'

Vue.use(VueLayers)

export default {
    data () {
        return {
          zoom: 2,
          center: [0, 0],
          rotation: 0,
          features: [],
        }
    },
    mounted () {
      this.loadFeatures().then(features => {
        this.features = features.map(Object.freeze)
        this.loading = false
      })
    },
    methods: {
      // emulates external source
      loadFeatures () {
        let profile = fetchProfileService.fetchDatedProfileData().profile;
        let features = [ new Feature( (new GeoJSON()).readGeometry(profile, {
            dataProjection: 'EPSG:2154',
            featureProjection: 'EPSG:3857',
        })) ]
        return new Promise(resolve => {
          setTimeout(() => {
            // generate GeoJSON random features
            resolve(
              features
            )
          }, 2000)
        });
      }
    }
}
</script>

I end up with console errors when loading my page : Error in render: "TypeError: destinationProjection is null" andTypeError: sourceProjection is null

profile variable used to create features contains the following Json array :

{
  "type": "MultiPoint",
  "coordinates" : [
    [ 307990.482808, 6651285.00402, -0.541960716248],
   ...
   ]
}

Any ideas ?

[benjaminh]

No I didn’t because I thought package-lock.json was recreated at each re-install. Thanks for the tip, the problem is solved, so here is what I did precisely:

• remove the ol occurrence in DevDependencies in my package.json
• dropped node_modules directory as you said
• dropped package-lock.json: otherwise, I doesn’t work for some reason
• re-install npm packages with npm install

Now, there is no node_modules directory within ./node_modules/vuelayers and everything looks fine, no more complaints about my projection, and ol package version is 5.3.3 (coming from vuelayers dependency).

Thank you for your help !

[ghettovoice]

Very strange, something wrong with your current setup. Do you try to drop package-lock.json too before full re-install with npm install?