Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined

I really don’t know how to reproduce this bug. I hope it is as simple as you can investigate it looking on the stack trace below.

Steps to Reproduce

This bug appears when you resize browser window and quickly press “backward” browser’s button to return to prev SPA page with map. You should press “backward” button very quick as fast as you can to reproduce this. I can suggest that it appears when map mounted during window resizing. VueLeaflet try to handle resize event and crashes with error. It is very hard to create JSFiddle for this situation for with my skills but i think you find this issue usefull.

Investigation

After some investigation I set up conditional breakpoint with !el condition inside Map#getPosition and find that the Map._mapPane===null. This is incorrect state if you want to call Map.getPosition(). So I make suggestion LMap.moveEndHandler need to have additional check to prevent Map.getPosition() call when Map._mapPane is null. Hope this can be usefull.

function getPosition(el) {
	// this method is only used for elements previously positioned using setPosition,
	// so it's safe to cache the position for performance

	return el._leaflet_pos || new Point(0, 0);   // <- code crashes hire. el (which is Map._mapPane) === null hire
} 

VM1609:1 Uncaught TypeError: Cannot read property ‘_leaflet_pos’ of undefined getPosition (leaflet-src.js?e11e:2471) _getMapPanePos (leaflet-src.js?e11e:4488) containerPointToLayerPoint (leaflet-src.js?e11e:4062) _getCenterLayerPoint (leaflet-src.js?e11e:4525) getCenter (leaflet-src.js?e11e:3850) moveEndHandler (LMap.js?2699:436) (anonymous) (LMap.js?2699:15) setTimeout (async) eval (LMap.js?2699:14) fire (leaflet-src.js?e11e:593) setTimeout (async) invalidateSize (leaflet-src.js?e11e:3616) eval (leaflet-src.js?e11e:4354) requestAnimationFrame (async) requestAnimFrame (leaflet-src.js?e11e:244) _onResize (leaflet-src.js?e11e:4353) handler (leaflet-src.js?e11e:2679)

Browsers Affected

• [ *] Chrome

Versions

• Leaflet: v1.6.0
• Vue: v2.6.11
• Vue2Leaflet: v2.5.2

[mikeu]

Thanks for the issue, @alexey2baranov . I can confirm that I have been able to reproduce this manually in Chrome with some quick clicking of the back arrow. Haven’t managed to come up with an approach that generates this error in a test, or reliably and automatically in a demo either, but will investigate it further!

[ctot-nondef]

I can reproduce this in a nuxt setup upon every navigation away from a map view.

the stack trace tells me (similar to the original post) that something triggers the getCenter function through the maps moveEndHandler, oddly when the map component is actually destroyed. other than clogging the logs/console it doesn’t do much damage but it ain’t pretty.

leaflet-src.js?e11e:2450 Uncaught TypeError: Cannot read property '_leaflet_pos' of undefined
    at getPosition (leaflet-src.js?e11e:2450)
    at NewClass._getMapPanePos (leaflet-src.js?e11e:4439)
    at NewClass.containerPointToLayerPoint (leaflet-src.js?e11e:4013)
    at NewClass._getCenterLayerPoint (leaflet-src.js?e11e:4476)
    at NewClass.getCenter (leaflet-src.js?e11e:3801)
    at VueComponent.moveEndHandler (LMap.js?2699:436)
    at eval (LMap.js?2699:15)