ES6 dependency of loaded module not found (uncaught typeError) when initiating new instance

I'm learning JS and due to my general lack of knowledge I don't seem to find the correct keywords to google the solution myself.

I am trying to load Leaflet as part of an app, built with ES6 modules. File structure:

- Home directory
    - index.html
    - /scripts
         - main.js
         - /app
             - mapApp.js
         - /lib
             - leaflet.js

Inside index.html

    ...
    <script type="module" src="scripts/main.js"></script>
</head>
<body>
    <div id="app"></div>
    ...

mapApp contains an object, which will be extended to contain methods to alter the map/gui. In its most basic layout mapApp.js contains:

import * as L from "../lib/leaflet/leaflet.js"

function mapApp(container){

    // Fixed values
    var bounds = [
        [50.769562,5.448265], // Southwest coordinates
        [50.801687,5.507624] // Northeast coordinates
    ];

    // Parameters

    this.container = container  

    // Map initialize
    this.map = L.map(this.container,{
        zoomControl:false,
        maxZoom:21, 
        minZoom:8,
        center:[50.78898,5.4889],
        zoom:14,
        maxBounds: bounds,
        maxBoundsViscosity: 1.0 // Prevents pushback behaviour at bounds
    });
};

finally inside main.js, which might create multiple instances of the mapApp:

import {mapApp} from "./app/mapApp.js";

tester = new mapApp('app')

for the final line (tester = ...) I'm getting an Uncaught TypeError: L.map is not a function.

I can solve this by importing leaflet again in main.js. But that doesn't seem like the right way to go? It seems like a a hassle that I would have to reload 'child/nested' imports throughout the program chain?

What am I not understanding?

Solution

After a ridiculousness amount of time I finally solved it.

I must have somewhere loaded a "L" library, confusing me further.

Turns out the minified leaflet (leaflet.js) can not be used for modules. Instead use the leaflet-src.ecm.js file. See also This question on more details about the .ecm format.

For other people have this, or a similar issue, I propose to also use the solution in this SO question and try to load the module straight from the console. Once it works there, you're good to go (unless like me you're confused with a mistakenly loaded library with the same abbreviation)

TL;DR: the solution is changing import * as L from "../lib/leaflet/leaflet.js" to the correct file, supporting modules: import * as L from "../lib/leaflet/leaflet-src.esm.js"