Vue3, Leaflet, and Plugin cause multiple instances of leaflet

[GalenReich]

At the moment, the project uses Vue3 and a beta version of Vue-Leaflet that supports Vue3 (the stable version only supports Vue2).

There is an issue, documented here: vue-leaflet/vue-leaflet#48 (comment) which results in two instances of leaflet being imported.

The recommended solution is to import * as L from 'leaflet/dist/leaflet-src.esm'; which works, but causes issues with using the Leaflet-AreaSelect plugin which requires L to be available.

Though L is available when import * as L from 'leaflet/dist/leaflet-src.esm'; is used, the plugin fails either with an:

Uncaught ReferenceError: L is not defined (when importing the plugin immediately after leaflet)
or
L.AreaSelect is read-only (if leaflet is imported in main.js) - this references the first line of the plugin

This may be related to ES6 imports: Leaflet/Leaflet.markercluster#874