Vuetify + Leaflet - Webpack error

[philchass]

I followed the instructions from https://www.npmjs.com/package/vue2-leaflet https://vue2-leaflet.netlify.app/quickstart/#installation

main.js
import 'leaflet/dist/leaflet.css';

MyComponent.vue

<template>
..
<l-map
                v-if="showMap"
                :zoom="zoom"
                :center="center"
                :options="mapOptions"
                style="height: 80%"
                @update:center="centerUpdate"
                @update:zoom="zoomUpdate"
                @ready="doSomethingOnReady"
              >
                <l-tile-layer
                  :url="url"
                  :attribution="attribution"
                />
                <l-marker :lat-lng="withPopup">
                  <l-popup>
                    <div @click="innerClick">
                      I am a popup
                      <p v-show="showParagraph">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
                        sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
                        Donec finibus semper metus id malesuada.
                      </p>
                    </div>
                  </l-popup>
                </l-marker>
                <l-marker :lat-lng="withTooltip">
                  <l-tooltip :options="{ permanent: true, interactive: true }">
                    <div @click="innerClick">
                      I am a tooltip
                      <p v-show="showParagraph">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque
                        sed pretium nisl, ut sagittis sapien. Sed vel sollicitudin nisi.
                        Donec finibus semper metus id malesuada.
                      </p>
                    </div>
                  </l-tooltip>
                </l-marker>
</l-map>
...
</template>

import latLng from 'leaflet'; // https://vue2-leaflet.netlify.app/quickstart/#installation
import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from 'vue2-leaflet';

components: {
      LMap,
      LTileLayer,
      LMarker,
      LPopup,
      LTooltip
}

data: () => ({
      zoom: 13,
      center: latLng(47.41322, -1.219482),
      url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      attribution:
        '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
      withPopup: latLng(47.41322, -1.219482),
      withTooltip: latLng(47.41422, -1.250482),
      currentZoom: 11.5,
      currentCenter: latLng(47.41322, -1.219482),
      showParagraph: false,
      mapOptions: {
        zoomSnap: 0.5
      },
      showMap: false
}

Actual Results

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in data(): "TypeError: leaflet__WEBPACK_IMPORTED_MODULE_32___default(...) is not a function"

found in

<MyComponent> at src/views/apps/deal/MyComponent.vue
       <VMain>
         <VApp>
           <Layout> at src/layouts/full-layout/Layout.vue
             <VApp>
               <App> at src/App.vue
                 <Root>

→ seems latLng function is unknown

Versions

• Leaflet: v1.7.1
• Vue: v2.6.12
• Vuetify: v2.4.0
• Vue2Leaflet: v2.7.0

[mikeu]

Hi @philchass, thanks for the detailed error report. It looks as if you should be able to get up and running if you change

import latLng from 'leaflet'; // https://vue2-leaflet.netlify.app/quickstart/#installation

to

import { latLng } from 'leaflet';

with braces around latLng to import just the one command.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.