Vue2leaflet: Using SSR results in an error "window is not defined"

[michaelbrandeis]

The .vue imports LMap fine, but when added to components {} it causing the error:

ReferenceError: window is not defined
at Object. (/Users/michael/workspace/winwisely/node_modules/vue2-leaflet/dist/vue2-leaflet.min.js:1:314)

Steps to Reproduce

Expected Results

Should not fail when added to components. This would allow us to use an SSR check on whether the component should be rendered.

Actual Results

ReferenceError: window is not defined
at Object. (/Users/michael/workspace/winwisely/node_modules/vue2-leaflet/dist/vue2-leaflet.min.js:1:314)

Browsers Affected

Server side bug

Versions

quasar: 0.17.6
vue2-leaflet: 1.0.2

[DonNicoJs]

Leaflet need the window object when imported. Leaflet does import it as soon as it started on the on several components including LMap.

You can solve with the no-ssr component from egoist (works with Nuxt )

[michaelbrandeis]

I'm using quasar and not nuxt.js. Its possible nuxt's no-ssr module supports marking javascript as not to be loaded on the server, but quasar seems unable to do that. And from looking at the nuxt/no-ssr docs it looks like their solution is actually to check the process variable to see if it is running in the browser, so I did something similar for quasar like this

<script>
let Vue2Leaflet = {}

if (!process.env.SERVER) {
  console.log('loading vue2-leaflet')
  Vue2Leaflet = require('vue2-leaflet')
}
export default {
  name: 'CampaignMap',
  components: {
    'l-map': Vue2Leaflet.LMap,
    'l-tile-layer': Vue2Leaflet.LTileLayer,
    'l-marker': Vue2Leaflet.LMarker
  },
....

since this works and the problem seems to be in the leaflet code i will close this issue.

[mohammadnazari110]

<no-ssr>
    <l-map :zoom="zoom" :center="center">
        <l-tile-layer :url="url"/>
        <l-marker :lat-lng="marker"/>
        <l-icon-default :image-path="path"/>
    </l-map>
</no-ssr>

<script>
    let Vue2Leaflet = {}
    if (process.client)
        Vue2Leaflet = require('vue2-leaflet')

export default {
        components: {
            'l-map': Vue2Leaflet.LMap,
            'l-tile-layer': Vue2Leaflet.LTileLayer,
            'l-marker': Vue2Leaflet.LMarker
        },
data() {
            return {
                zoom: 14,
                path: '/images/',
                center: [47.413220, -1.219482],
                url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
                marker: (process.client)?L.latLng(47.413220, -1.219482):null,
            }
        },

[DonNicoJs]

@mohammadnazari110 are you using it in nuxt? are you using nuxt-leaflet?

[mohammadnazari110]

@DonNicoJs yes i use