Maps in nuxts static mode break about nuxt-leaflet HOT 10 CLOSED

purgeCSS: {
    paths: [
      'i18n/**/*.js'
    ]
  },

purgeCSS: {
    paths: [
      'i18n/**/*.js'
    ],
    whitelistPatterns: [/leaflet/, /marker/]
  },

<template>
  <div>
    <client-only>
      <loading class="z-999" :active="loadingMapData" :can-cancel="true" :is-full-page="false" :color="spinnerColor" />
      <l-map class="w-full h-3/4" :zoom="zoom" :center="center" :options="options" @click="clearDescription">
        <shop-card v-if="shop" :shop="shop" class="absolute left-0 bottom-0 z-999" />
        <l-tile-layer :url="tilesUrl" />
        <shop-marker v-for="shop in shops" :key="shop.id" :shop="shop" @display-description="displayDescription" />
      </l-map>
    </client-only>
  </div>
</template>

<script>
import ClientOnly from 'vue-client-only'
import Loading from 'vue-loading-overlay'
import ShopCard from '~/components/Map/ShopCard'
import ShopMarker from '~/components/Map/ShopMarker'
import shops from '~graphql/shops'

export default {
  apollo: {
    shops: {
      query: shops
    }
  },
  components: {
    ShopCard,
    ShopMarker,
    ClientOnly,
    Loading
  },
  props: {
    center: {
      type: Array,
      required: true
    },
    zoom: {
      type: Number,
      required: true
    },
    tilesUrl: {
      type: String,
      // cf. https://sosm.ch/projects/tile-service/
      default: 'https://tile.osm.ch/switzerland/{z}/{x}/{y}.png'
    }
  },
  data: () => ({
    shop: undefined,
    spinnerColor: '#e78000ff'
  }),
  computed: {
    loadingMapData () {
      return this.$apollo.queries.shops.loading
    },
    options () {
      return {
        gestureHandling: true,
        gestureHandlingOptions: {
          text: {
            touch: this.$i18n.t('gestureHandling.touch'),
            scroll: this.$i18n.t('gestureHandling.scroll'),
            scrollMac: this.$i18n.t('gestureHandling.scrollMac')
          },
          duration: 2000
        },
        zoomControl: false
      }
    }
  },
  methods: {
    displayDescription (id) {
      this.shop = this.shops.find(item => item.id === id)
    },
    clearDescription () {
      this.shop = undefined
    }
  }
}
</script>

<style src="~/assets/css/tailwind.css"></style>
<style src="vue-loading-overlay/dist/vue-loading.css"></style>
<style src="leaflet/dist/leaflet.css"></style>
<style src="leaflet-gesture-handling/dist/leaflet-gesture-handling.css"></style>
<style>
/* .leaflet-tile-pane {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
} */
</style>

import i18n from './i18n'
const path = require('path')
const pkg = require('./package')

module.exports = {
  mode: 'universal',

  env: {
    GRAPHQL_API: process.env.GRAPHQL_API || 'http://localhost:8080/v1/graphql/'
  },

  /*
  ** Headers of the page
  */
  head: {
    title: pkg.name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    { src: '~plugins/errorHandling.js' },
    { src: '~plugins/leaflet.js', mode: 'client' }
  ],

  buildModules: [
    '@nuxtjs/tailwindcss'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: ['@nuxtjs/apollo', 'nuxt-purgecss', ['nuxt-i18n', i18n]],

  purgeCSS: {
    paths: [
      'i18n/**/*.js'
    ]
  },

  // Give apollo module options
  apollo: {
    tokenExpires: 10, // optional, default: 7 (days)
    includeNodeModules: true, // optional, default: false (this includes graphql-tag for node_modules folder)
    authenticationType: 'Basic', // optional, default: 'Bearer'
    // optional
    // errorHandler (error) {
    //   console.log('%cError', 'background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;', error.message)
    // },
    // required
    clientConfigs: {
      default: '~/apollo/clientConfig.js'
    }
  },

  /*
  ** Build configuration
  */
  build: {
    extractCSS: true,
    postcss: {
      // Add plugin names as key and arguments as value
      // Install them before as dependencies with npm or yarn
      plugins: {
        // Disable a plugin by passing false as value
        // 'postcss-url': false,
        // 'postcss-nested': {},
        // 'postcss-responsive-type': {},
        // 'postcss-hexrgba': {}
      },
      preset: {
        // Change the postcss-preset-env settings
        autoprefixer: {
          grid: true
        }
      }
    },

    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      config.resolve.alias['~graphql'] = path.resolve(__dirname, '../../shared/graphql/')
    }
  }
}

import Vue from 'vue'
import { LMap, LMarker, LTileLayer } from 'vue2-leaflet'
// eslint-disable-next-line no-unused-vars
import { GestureHandling } from 'leaflet-gesture-handling'

import { Icon } from 'leaflet'
delete Icon.Default.prototype._getIconUrl

Icon.Default.mergeOptions({
  iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
  iconUrl: require('leaflet/dist/images/marker-icon.png'),
  shadowUrl: require('leaflet/dist/images/marker-shadow.png')
})

Vue.component('l-map', LMap)
Vue.component('l-tile-layer', LTileLayer)
Vue.component('l-marker', LMarker)

yarn add vue-no-ssr

<template>
  <div>
    <div id="map-wrap" style="height: 100vh; width: 100%;">
      <no-ssr>
        <l-map :zoom="13" :center="[47.413220, -1.219482]">
          <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
          <l-marker :lat-lng="[47.413220, -1.219482]" />
        </l-map>
      </no-ssr>
    </div>
  </div>
</template>

<style src="leaflet/dist/leaflet.css"></style>

build.extractCSS: true

<client-only>
</client-only>