Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ReferenceError: L is not defined on prod builds with optimizeBundle = true #15

Open
chippmann opened this issue Jul 4, 2024 · 2 comments

Comments

@chippmann
Copy link

Describe the bug
I try to build a prod build of my application with an optimized frontend bundle. But when i do that i receive the following error in the browser console, no map is drawn and all subsequent calls to leaflet fail: ReferenceError: L is not defined

On dev builds and prod builds with optimizeBundle = false everything works as expected though.

In your sample application i see that you also have optimizeBundle = false but IMO that does not sound like a great idea for a prod application.

But maybe I'm just missing something obvious which applies to addons in general (this is the only third party addon i use)?

I'm using Vaadin 24.4.3 and vcf-leaflet 2.0.1.

To Reproduce
Steps to reproduce the behavior:

  1. build a vaadin application with vcf-leaflet in prod and with optimizeBundle = true
  2. open the application in a browser and open the console

Expected behavior
The application can be built for prod with optimizeBundle = true.

Desktop (please complete the following information):

  • OS: Arch Linux (Endeavour OS)
  • Browser: Firefox, Chromium
  • Version: Vaadin: 24.4.3, vcf-leaflet: 2.0.1

Thx a lot for your work!

@chippmann
Copy link
Author

Ok i pinned it down to the creation of a MarkerClusterGroup. If this class is instantiated in the code it throws the error. Without any plugins, the map works fine on prod builds with optimizeBundle set to true. Whether other plugins are affected as well or not, i cannot tell as currently I'm only using the markercluster plugin.

@chippmann
Copy link
Author

chippmann commented Jul 4, 2024

Ok i was able to resolve the issue by manually importing leaflet into the root layout through a custom jsModule:

// frontend/loadLeaflet.js
import L from 'leaflet';
window.L = L;
@JsModule("./loadLeaflet.js")
class MainLayout : Div(), RouterLayout {
    // ...
}

As this is a rather hacky solution IMO i leave this issue open as IMO this should be fixed in this project.
Sadly i have no clue where that would go here so i cannot create a PR for this.

If anyone has an idea where such an import would need to go in this project I'd be happy for a hint so i (or someone else) could file a PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant