Build in Electron

I failed to run a simple map in an electron-vue project.

I built a simple project from vue init simulatedgreg/electron-vue mydemo

add imports:

import VueLayers from 'vuelayers'
import 'vuelayers/lib/style.css'
Vue.use(VueLayers)

then replace LandingPage.vue with

<template>
  <main id="app">
    <vl-map :load-tiles-while-animating="true" :load-tiles-while-interacting="true">
      <vl-view ref="view" :zoom="2" :center="[0, 0]" :rotation="0"></vl-view>

      <vl-geoloc @update:position="onUpdatePosition">
        <template slot-scope="ctx">
          <vl-feature v-if="ctx.position" id="geoloc-feature">
            <vl-geom-point :coordinates="ctx.position"></vl-geom-point>
          </vl-feature>
        </template>
      </vl-geoloc>

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

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

export default {
  name: 'app',
  data () {
    return {
      zoomedToPosition: false,
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    onUpdatePosition (coordinate) {
      if (!this.zoomedToPosition) {
        this.zoomedToPosition = true
        this.$refs.view.animate({
          center: vlCore.projHelper.fromLonLat(coordinate, this.$refs.view.projection),
          zoom: 12,
          duration: 1000
        })
      }
    }
  }
}
</script>

It failed with a such stacktrace

/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:114 Uncaught TypeError: a.xa is not a function
    at Wf (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:114)
    at X.k.Wp (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:134)
    at X.<anonymous> (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:120)

Uncaught (in promise) TypeError: a.addEventListener is not a function
    at z (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:47)
    at X.k.gm (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:132)
    at X.b (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:46)
    at X.Tc.b (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:49)
    at Zc (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:51)
    at X.k.set (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:51)
    at X.k.hh (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/openlayers/dist/ol.js:136)
    at VueComponent.setView (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/vuelayers/lib/map/index.js:336)
    at VueComponent.boundFn [as setView] (vue.esm.js?efeb:188)
    at VueComponent.mount (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/vuelayers/lib/map/index.js:755)
/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/vuelayers/lib/core/index.js:3376 

Uncaught (in promise) TypeError: layer.get is not a function
    at VueComponent.addLayer (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/vuelayers/lib/core/index.js:3376)
    at VueComponent.boundFn [as addLayer] (vue.esm.js?efeb:188)
    at VueComponent.mount (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/vuelayers/lib/core/index.js:3234)
    at boundFn (vue.esm.js?efeb:188)
    at <anonymous>
addLayer @ /Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/vuelayers/lib/core/index.js:3376
boundFn @ vue.esm.js?efeb:188
mount @ /Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/vuelayers/lib/core/index.js:3234
boundFn @ vue.esm.js?efeb:188
/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/vuelayers/lib/core/index.js:3922 

Uncaught (in promise) TypeError: this.$view.getProjection is not a function
    at VueComponent.createTileGrid (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/vuelayers/lib/core/index.js:3922)
    at VueComponent.boundFn [as createTileGrid] (vue.esm.js?efeb:189)
    at VueComponent.init (/Users/ludoo/dev/vuejs/vuelayers/vuelayers-electron/node_modules/vuelayers/lib/core/index.js:3938)
    at boundFn (vue.esm.js?efeb:188)
    at <anonymous>

The same code in a simple web page is ok. So Electron could introduce some different behaviors… Any help to understand the root cause would be great !

thanks !

[ghettovoice]

It seems like I found the reason: in VueLayers widely used ... instanceof Vue checks of arguments, for example: method setView(view ol.View|Vue) in map component, there is check of vieww argument: view = view instanceof Vue ? view.$view : view. I noticed that in simulatedgreg/electron-vue setup VueLayers and OpenLayers are loaded as external dependencies, (loaded as separate files in the Source tab), Vue loaded with webpack. I don’t know how it might be related , but instanceof check always returns false for instance of Vue component. Looks like require('Vue') inside VueLayers module loads another instance of Vue. There is only one workaround that i found in Issues of simulatedgreg/electron-vue project: add vuelayers to white list in file .electron-vue/webpack.renderer.config at line 21: let whiteListedModules = ['vue', 'vuelayers'] And then all should work as expected.

[ghettovoice]

Ok, thank you. I’ll try to create project with electron soon.