fix: leafleat module import error in ssr mode

pycontw · Feb 5, 2024 · 65c2cbe · 65c2cbe
1 parent 3a35ccf
commit 65c2cbe
Show file tree

Hide file tree

Showing 5 changed files with 29,337 additions and 79 deletions.
diff --git a/components/venue/VenueMap.vue b/components/venue/VenueMap.vue
@@ -15,7 +15,6 @@
             :attribution="tileProvider.attribution"
             layer-type="base"
         />
-
         <l-control-layers position="bottomright"></l-control-layers>
         <l-control-zoom position="topright"></l-control-zoom>
         <l-control
@@ -46,27 +45,11 @@
 </template>
 
 <script>
-import {
-    LMap,
-    LControl,
-    LTileLayer,
-    LMarker,
-    LControlZoom,
-    LControlLayers,
-    LTooltip,
-} from 'vue2-leaflet'
-import { icon } from 'leaflet'
+// import { icon } from 'leaflet'
+let L = { icon() {} }
+if (process.browser) L = require('leaflet')
 export default {
     name: 'VenueMap',
-    components: {
-        LMap,
-        LTileLayer,
-        LMarker,
-        LControlZoom,
-        LControlLayers,
-        LTooltip,
-        LControl,
-    },
     data() {
         return {
             venueButtonUrl: require('@/static/venue-button.png'),
@@ -97,18 +80,21 @@ export default {
             attribution:
                 '&copy; <a target="_blank" href="http://osm.org/copyright">OpenStreetMap</a> contributors',
             zoom: 16,
-            icon: icon({
-                iconUrl: '/2023/snake.png',
-                shadowUrl: '/2023/snake-bg.png',
-                iconSize: [42, 42],
-                iconAnchor: [21, 21],
-                shadowSize: [45, 55],
-                shadowAnchor: [25, 30],
-            }),
+            icon: null,
             center: [25.040997, 121.611417],
             markerLatLng: [25.040997, 121.611417],
         }
     },
+    mounted() {
+        this.icon = L.icon({
+            iconUrl: '/snake.png',
+            shadowUrl: '/snake-bg.png',
+            iconSize: [42, 42],
+            iconAnchor: [21, 21],
+            shadowSize: [45, 55],
+            shadowAnchor: [25, 30],
+        })
+    },
     methods: {
         centerMap() {
             this.$nextTick(() => {

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -125,7 +125,7 @@ export default {
         { src: '~/plugins/strings.js' },
         { src: '~/plugins/vue-dompurify.js' },
         { src: '~/plugins/vue-awesome-swiper.js' },
-        { src: '~/plugins/leaflet.js', mode: 'client' },
+        // { src: '~/plugins/leaflet.js', ssr: false },
     ],
 
     // Auto import components (https://go.nuxtjs.dev/config-components)
@@ -183,6 +183,8 @@ export default {
         // https://sitemap.nuxtjs.org/
         // This module must be at the end of the modules array
         '@nuxtjs/sitemap',
+        // https://github.com/schlunsen/nuxt-leaflet
+        'nuxt-leaflet',
     ],
     i18n: {
         strategy: 'prefix',