Cannot read property 'mapObject' of undefined inside App.vue

I am including the vue2leaflet draw toolbar into a NuxtJS project. Leaflet is used via the nuxt-leaflet module:

<div id="map-wrap" style="height: 100vh">
 <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-tile-layer>
     <l-marker :lat-lng="[47.413220, -1.219482]"></l-marker>
   </l-map>
 </no-ssr>
</div>

The toolbar is imported globally as explained in documentation and used inside the template as:

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

The building phase doesn't complain and it successfully instantiate the map. But the app suddenly shows this error "Cannot read property 'mapObject' of undefined" and the component crashes.

It seams that, when it calls on mounted: const map = _this.$parent.$parent.$refs.map.mapObject;

_this.$parent.$parent.$refs is an empty object

Am I missing something?

No, its a bug. It should get mapObject in a smarter way. I'm working on this component right now, if you have a sugestion, be free to make a pull request.

Is that the same thing I'm seeing here?

TypeError: "_this.$parent.$parent.$refs.map is undefined" mounted LDrawToolbar.common.js:1238 VueJS 2 nextTick flushCallbacks vue.runtime.esm.js:1888

I'm also having that refs undefined error. Tried matching all of the versions in package.json to what I'm seeing for this repo, but still not working. Is there any working example code for this component?

Hi. I had the same issue, and this could be solved by adding ref="map" to the l-map tag. <l-map ref="map" ... [Edited 2020 dec 14] Important : This might not work anymore, see @garymazz answer below https://github.com/hubertokf/vue2-leaflet-draw/issues/1#issuecomment-744605896

Same error. Fixed with ref="map". It's right?

@morfair Yes !

FYI: ref="map" to l-map tag doesn't work as per today. Still the same error from same location: const map = _this.$parent.$parent.$refs.map.mapObject;

I think Vue2Leaflet recommends using findRealParent()

FYI: ref="map" to l-map tag doesn't work as per today. Still the same error from same location: const map = _this.$parent.$parent.$refs.map.mapObject;

I think Vue2Leaflet recommends using findRealParent()

Thanks for the follow up. Updated my own comment to point here

If I was better at leaflet, Vuejs and quasar framework, I'd fix it myself and release. I'm just learning them at the same time. Oh yeah, javascript as well.

@saku-kaarakainen or anyone else - the variant of the "hacky change" that worked for me was the following:

var map = _this.$parent.mapObject;..

With this, I also didn't need to add ref="map"

@trevelyanuk thanks for the solution. It worked for me.

@Everyone Any permanent solution on this?

@saku-kaarakainen thanks, In mi case the row 1238 into , var map = _this.$parent.$parent.$parent.$refs.map.mapObject;

this works for me