Leaflet installation into F7- cordova (Vite) project

Does someone know how to correctly install Leaflet into a new F7-cordova project in Vite environment?

Since F7 was with Webpack I could solve the Leaflet “compatibility” issues of the URL’s in CSS (see https://github.com/Leaflet/Leaflet/issues/4968) installing the package “leaflet-defaulticon-compatibility” (https://www.npmjs.com/package/leaflet-defaulticon-compatibility).
Updating my project in the same way with the newest F7 (Vite) I got the below error. Without using “leaflet-defaulticon-compatibility”, icons and pictures are not included in the .apk

I have no expertises in webpack and in Vite environments. Thus any help will be greatly appreciated. :wink:

image

I found a workaround by converting the icon in Base64 and copying it in the iconURL as shown hereafter.

Hope it helps you as well.

myIcon = L.icon({
//iconUrl: ‘leaf-green.png’,
iconUrl:‘data:image/png;base64,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’,
// shadowUrl: ‘leaf-shadow.png’,
iconSize: [28, 28], // size of the icon
//shadowSize: [50, 64], // size of the shadow
iconAnchor: [14, 28], // point of the icon which will correspond to marker’s location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});