Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Does not work with ES6 imports for leaflet

See original GitHub issue

It seems this plugin makes the assumption that L is still exported globally. However using leaflet the ES6 way with direct imports like import { map } from "leaflet/src/map/Map"

does not expose a L global anymore. So trying to include this plugins MarkerClusterGroup fails cause of this definition.

export var MarkerClusterGroup = L.MarkerClusterGroup = L.FeatureGroup.extend({

The correct way would be to write this like this:

import { FeatureGroup } from "leaflet/src/layer/FeatureGroup"
export var MarkerClusterGroup = FeatureGroup.extend({

Issue Analytics

State:
Created 6 years ago
Reactions:8
Comments:30 (6 by maintainers)

Top GitHub Comments

14reactions

pkecommented, Jan 7, 2020

Coming back here after 2 years I’d have thought this issue to be resolved. It seems its still not possible to properly import leaflet and this plugin. I am going to open a new PR over at leaflet to suggest a 2.0 release and intentionally breaking all the plugins depending on a global ‘L’ var. It seems otherwise we can not get any plugin owner to move forward to packages.

10reactions

azrin1972commented, Nov 12, 2018

Finally found the solution

instead of using import * as L from ‘leaflet’

I use

import L from ‘leaflet’

some reading http://www.thedreaming.org/2017/04/28/es6-imports-babel/

Top Results From Across the Web

Can I use Leaflet as an es6 module? Plugins too?

Looking at the Leaflet docs, I don't see how to import Leaflet as an es6 module. And more importantly, all the Leaflet plugins...

ES6 imports support for GoogleMutant (#99) · Issues - GitLab

I use your GoogleMutant with vue2-leaflet-googlemutant That package is a simple wrapper around your plugin, but leaflet migrated to ES6 ...

Leaflet 1.2.0 has been released

Traditionally, Leaflet plugins has altered and added to Leaflet's ... is no longer allowed after Leaflet was rebuilt on ES6 modules (an ...

ES6 - How to use own html button for leaflet control?

import "./styles.css"; · import L from "leaflet"; · import "leaflet-draw"; · import "leaflet/dist/leaflet. · import "leaflet-draw/dist/leaflet. · const map = L. · L....

INTEGRATING LEAFLET PLUGINS WITH NGX-LEAFLET

ES6 Modules. These are the easiest because you can perform named imports of Leaflet and of the plugin you want to use. Nothing...