Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Default')

[sstainba]

Getting this exception with a minimally configured map.

vue-leaflet.es.js:47 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Default')
    at qe (vue-leaflet.es.js:47:12)
    at async vue-leaflet.es.js:1310:7

Packages:

"dependencies": {
  "@apollo/client": "^3.9.4",
  "@mdi/font": "^7.4.47",
  "@vue-leaflet/vue-leaflet": "^0.10.1",
  "@vue/apollo-option": "^4.0.0",
  "axios": "^1.6.7",
  "core-js": "^3.36.0",
  "dotenv": "^16.4.4",
  "graphql": "^16.8.1",
  "graphql-tag": "^2.12.6",
  "graphql-ws": "^5.15.0",
  "leaflet": "^1.9.4",
  "lodash": "^4.17.21",
  "moment": "^2.30.1",
  "pinia-plugin-persistedstate": "^3.2.1",
  "roboto-fontface": "*",
  "uuid": "^9.0.1",
  "vue": "^3.4.19",
  "vue3-treeview": "^0.4.2",
  "vuedraggable": "^2.24.3",
  "vuetify": "^3.5.4"
},
"devDependencies": {
  "@vitejs/plugin-vue": "^5.0.4",
  "cross-env": "^7.0.3",
  "eslint": "^8.56.0",
  "eslint-config-standard": "^17.1.0",
  "eslint-plugin-import": "^2.29.1",
  "eslint-plugin-n": "^16.6.2",
  "eslint-plugin-node": "^11.1.0",
  "eslint-plugin-promise": "^6.1.1",
  "eslint-plugin-vue": "^9.21.1",
  "pinia": "^2.1.7",
  "sass": "^1.70.0",
  "unplugin-auto-import": "^0.17.5",
  "unplugin-fonts": "^1.1.1",
  "unplugin-vue-components": "^0.26.0",
  "unplugin-vue-router": "^0.7.0",
  "vite": "^5.1.2",
  "vite-plugin-vue-layouts": "^0.11.0",
  "vite-plugin-vuetify": "^2.0.1",
  "vue-router": "^4.2.5"
}

markup:

<template>
  <v-container :style="divStyle">
    <l-map ref="map"
           v-model="zoom"
           v-model:zoom="zoom"
           @ready="onReady"
           :min-zoom="minZoom"
           :max-zoom="maxZoom"
           :center="mapCenter"
           :style="{height: '100%', 'min-height': '200px'}">
      <l-tile-layer v-for="layer in layers"
                    :key="layer.name"
                    :url="layer.url"
                    :name="layer.name"
                    layer-type="base" />
    </l-map>
  </v-container>
</template>

[Saimoness]

Same issue, with very similar dependencies & minimal map setup.

@vue-leaflet_vue-leaflet.js?v=b19dea01:72 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'Default')
    at qe (@vue-leaflet_vue-leaflet.js?v=b19dea01:72:12)
    at async @vue-leaflet_vue-leaflet.js?v=b19dea01:1420:7

Did you find anything about this error?

[Saimoness]

@sstainba I found out that this problem was here recently https://github.com/vue-leaflet/vue-leaflet/issues/278

I also found out that as a temporary fix, it works for me when initializing vue, to import:
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'

OR

Adding directly in the map :use-global-leaflet="false"

[sstainba]

@sstainba I found out that this problem was here recently https://github.com/vue-leaflet/vue-leaflet/issues/278

I also found out that as a temporary fix, it works for me when initializing vue, to import: import 'leaflet/dist/leaflet.css' import L from 'leaflet'

OR

Adding directly in the map :use-global-leaflet="false"

Thanks. I'll give that a shot.

[Saimoness]

Sure, actually, it works only with import L from 'leaflet'.

But also there can be potential issues, because it imports the entire Leaflet library into application, thus, increase the size of application's bundle and potentially its memory consumption & build time, anyway, the trade-off is generally favorable because I found that the leaflet is relatively lightweight, especially when compared to some other mapping libraries, the minified version of Leaflet's JavaScript file (leaflet.js) is around 39 KB gzipped.

[sstainba]

Thanks. This is working for me now. Though, I'd prefer not to deal with workarounds. :-) I'm several months out from deployment so hopefully this will get corrected by then.