Vaadin + leaflet issue

Flow
1

I’ve moved myapp to vaadin 25.0.2.
In the app I’m using leaflet, so in my view is loading the resources as:

@JsModule ( “./leaflet/leaflet.js” )

@JsModule ( “./leaflet/leaflet.markercluster.js” )

public class MapLuoghi extends VerticalLayout {

Which is ok, but when I publish in production, the app is not starting (even the home page or the login form) because the generated chunkXYZ.js is including a chunk (L…) claiming for resources defined in modules loaded after. There is no way to change the order.

This is an exerpt of generated chunk file.
…
/**

  • @license
  • Copyright (c) 2017 - 2025 Vaadin Ltd.
  • This program is available under Apache License Version 2.0, available at Vaadin licensing FAQ and troubleshooting
    /
    class $u extends K(H(Z)) {
    static get is() {
    return “vaadin-form-row”
    }
    static get styles() {
    return Nu
    }
    static get lumoInjector() {
    return {
    …super.lumoInjector,
    includeBaseStyles: !0
    }
    }
    render() {
    return B<slot></slot>
    }
    }
    N($u);
    //THIS L object is defined in the next block!
    L.Icon.Default.mergeOptions({
    iconUrl: “icons/marker-icon.png”,
    shadowUrl: “icons/marker-shadow.png”
    });
    /     @preserve
  • Leaflet 1.9.4, a JS library for interactive maps. https://leafletjs.com
  • (c) 2010-2023 Vladimir Agafonkin, (c) 2010-2011 CloudMade
    */
    (function(d, s) {
    …

Any help is appreciated.

2

You can create one JS file where you have two import statements and then load only that file using @JsModule

3

Yes I did it, but it is useless, since the culprit block is loaded before the leaflet function.

I’ve created a js for this reason and to force leaflet to load icons from a given folder,

icons.js

import L from 'leaflet';
import "leaflet.markercluster";
window.L = L;
L.Icon.Default.mergeOptions({ iconUrl: 'icons/marker-icon.png', shadowUrl: 'icons/marker-shadow.png' });

and import it:
@JsModule(“./leaflet/icons.js”)
@JsModule(“./leaflet/leaflet.js”)
@JsModule(“./leaflet/leaflet.markercluster.js”)

4

I finally got it working!!
What did the trick is to use
@LoadDependenciesOnStartup({MyMap.class})

In the Application start class!