Error from calling L.MarkerClusterGroup after updating to 2.0.0 #15

EmmanuelBeziat · 2018-05-04T10:18:48Z

Hi,

Having just updated vue2-leaflet from 0.x.x to 1.0.2 (vue2-leaflet-markercluster and leaflet dependencies are up to date too), I just ran into this error in console browser:

L.MarkerClusterGroup is not a constructor

My code hasn't change much, except for the vue2-leaflet breaking-changes that needed to be done.

Here's what it looks like:

let V2L = {}
let V2LMarkerCluster = {}
let V2LTracksymbol = {}

if (process.browser) {
	L = require('leaflet')
	V2L = require('vue2-leaflet')
	V2LMarkerCluster = require('vue2-leaflet-markercluster')
}

export default {
	components: {
		'l-map': V2L.LMap,
		'l-marker': V2L.LMarker,
		'l-tilelayer': V2L.LTileLayer,
		'v-marker-cluster': V2LMarkerCluster
	}
// [...]
}

Except from the components names, there's no difference with before. I checked the doc here but I find nothing that I would have missed.

Any idea of what's happening?

Thanks!

The text was updated successfully, but these errors were encountered:

jperelli · 2018-05-04T13:16:01Z

@EmmanuelBeziat Try adding leaflet.markercluster to the list of requirements

if (process.browser) {
	L = require('leaflet')
        require('leaflet.markercluster')
	V2L = require('vue2-leaflet')
	V2LMarkerCluster = require('vue2-leaflet-markercluster')
}

EmmanuelBeziat · 2018-05-04T21:54:36Z

Hi,
Unfortunately, it has no effect…

arenddeboer · 2018-11-11T12:14:37Z

Did you find a solution ? I run into the same issue after updating.
EDIT
I solved my issue by moving V2L = require('vue2-leaflet') to a file that is included earlier in the app bootstrap routine. Because the actual import order of require() in webpack is not guaranteed, you can end up having the markercluster imported before leaflet, resulting in this error.

hponcede · 2018-11-14T09:30:02Z

@arenddeboer which file should that be ?

arenddeboer · 2018-11-14T10:28:23Z

I moved require('vue2-leaflet') to my app.js instead of my-component.vue file it was used in.
Even though that solved this issue, another error surfaced when clicking on a marker cluster. I then realized I had no need for vue2-leaflet-markercluster as I create my markers from javascript instead of the v-marker-cluster vue element tag. Using just leaflet.markercluster with vue2-leaflet was sufficient for me.

hponcede · 2018-11-14T10:34:35Z

Thanks. Meanwhile, i've modified my vue.config.js :

webpack = require('webpack')
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
              L: 'leaflet'
            })
          ]
    }
}

I still have other problems though, but with leaflet.markercluster, not the Vu2 componenent.

jperelli · 2018-12-23T03:32:52Z

I updated the package to v2.1.0, please try it again and let me know if this issue keeps appearing

fdenzer · 2019-02-12T15:40:44Z

For me, neither of these package stacks work consistently, so I am having a hard time figuring out why the leaflet-part of my application breaks.

I am working on npm 6.7.0 and node 10.15.1 as of now.

Most current 2.x setup

vue @ 2.5.22
leaflet 1.3.4, vue2-leaflet 1.1.1, vue2-leaflet-markercluster 2.0.0

The most current modules on the two unixoids produce the same results as OP described.

After downgrade to older versions of the JS-modules

vue(-template-compiler) 2.6.6,
leaflet 1.4.0, vue2-leaflet 1.2.3, vue2-leaflet-markercluster 2.1.2

on a debian server w/ node 10:

The error message is not literally as OP wrote, but:
Cannot read property 'markerClusterGroup' of undefined
where n.L is undefined.

~~My local machine~~

~~(macOS) testing environment works like a charm.~~

zhanghoo · 2019-03-03T13:12:41Z

For me, neither of these package stacks work consistently, so I am having a hard time figuring out why the leaflet-part of my application breaks.

I am working on npm 6.7.0 and node 10.15.1 as of now.

Most current setup
vue @ 2.5.22
leaflet 1.3.4, vue2-leaflet 1.1.1, vue2-leaflet-markercluster 2.0.0
The most current modules on the two unixoids produce the same results as OP described.

After downgrade to older versions of the JS-modules
vue(-template-compiler) 2.6.6,
leaflet 1.4.0, vue2-leaflet 1.2.3, vue2-leaflet-markercluster 2.1.2
on a debian server w/ node 10:

The error message is not literally as OP wrote, but:
Cannot read property 'markerClusterGroup' of undefined
where n.L is undefined.

My local machine

(macOS) testing environment works like a charm.

Me too.

jperelli · 2019-03-04T00:35:54Z

Could you try now? I published v3.0.0

zhanghoo · 2019-03-04T07:02:04Z

When I clone your project. npm install, npm run example. It's working.
But when I install it (npm install --save vue2-leaflet-markercluster) in my other project (has install vue2-leaflet) and run dev. It's error ~~

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property '_zoom' of undefined"
found in
--->

Example.vue is right separately. But install in other isn't working.

jperelli · 2019-03-04T20:02:03Z

@zhanghoo could you tell me what packages do you have installed in your other project? Try installing leaflet and if it still doesn't work, try installing leaflet.markercluster also. Let me know if it works

fdenzer · 2019-03-05T12:06:52Z

Could you try now? I published v3.0.0

vue2-leaflet-markercluster 3.0.0 works for me with:

leaflet 1.3.4 and/or leaflet 1.4.0
vue2leaflet 2.0.2 (at least 2.0 is required i guess)

👍

jperelli · 2019-03-05T16:08:00Z

True. I'll need to setup the peer dependencies correctly. I'll do that

zhanghoo · 2019-03-06T01:23:05Z

I built new one. It's working. Thank you very much.

"leaflet": "^1.4.0",
"leaflet.markercluster": "^1.4.1",
"vue2-leaflet": "^2.0.2",
"vue2-leaflet-markercluster": "^3.0.0"

jperelli · 2019-03-06T14:05:59Z

Thanks!

AndreyNvk · 2019-03-06T21:40:57Z

When I clone your project. npm install, npm run example. It's working.
But when I install it (npm install --save vue2-leaflet-markercluster) in my other project (has install vue2-leaflet) and run dev. It's error ~~

[Vue warn]: Error in mounted hook: "TypeError: Cannot read property '_zoom' of undefined"
found in
--->

Example.vue is right separately. But install in other isn't working.

Sorry for that, but I have the same problem as @zhanghoo had
The example.vue standalone works fine, but when it goes to my project it fails

I've tried to update the packages but it didn't help to solve the issue

Could you please tell what was the final remedy for this issue?
It was all about the order of libraries loading or the problem was about the packages' version? Or sth else?

jperelli · 2019-03-07T10:15:43Z

@AndreyNvk the problem should be related to the packages' versions only. Please try updating to these #15 (comment)

AndreyNvk · 2019-03-07T11:41:07Z

@jperelli I've got exactly the same versions of the packages but it doesn't affect somehow the situation with the issue

I took a look on the Vue devtool and noticed that the order of elements is violated
I've got in the devtool the structure:

<LMap>
   <LIconDefault>
   <v-marker-cluster>
   <LTileLayer>

But in my vue component the LTileLayer goes first and after it the v-marker-cluster
I've changed the order of elements in the Example.vue and got errors in the console quite similar that I have in my project

Maybe this is the root cause of my problem

Do you have an idea why Vue violate the order of elements and how I can control it?

zhanghoo · 2019-03-07T13:47:21Z

I still don't know the reason. This demo is new one that runs OK. @AndreyNvk
https://github.com/zhanghoo/vue-leaflet-demo.git

jperelli · 2019-03-07T14:18:50Z

@AndreyNvk can you share your code or make a project that has the error so we can reproduce it?

AndreyNvk · 2019-03-11T21:34:48Z

@jperelli yes, you can find the code which emits the error in the repo

Is it ok that I continue to comment this issue or it's better to open a new one?

jperelli · 2019-03-12T01:03:58Z

@AndreyNvk It's ok here. I'm looking into your repo

jperelli · 2019-03-12T01:26:39Z

@AndreyNvk You never said that you were using rotatedmarker plugin. The problem is that that plugin is not made for vue2-leaflet version 2 https://github.com/mudin/vue2-leaflet-rotatedmarker, the upstream issue is that the rotatedmarker plugin is not compatible with ES6 modules declarations. See bbecquet/Leaflet.RotatedMarker#11
I might create an es6 version of rotatedmarker or maybe create PRs to fix both repos, but I don't have the time right now. You might try contacting the original rotatedmarker developer...

AndreyNvk · 2019-03-12T12:50:15Z

@jperelli Yes, I've turned the rotadedmarker off and everything started to work smoothly

Julian, thank you for your detailed response you've really helped me to work it out

wawagit · 2019-05-24T12:37:36Z

Did you find a solution ? I run into the same issue after updating.
EDIT
I solved my issue by moving V2L = require('vue2-leaflet') to a file that is included earlier in the app bootstrap routine. Because the actual import order of require() in webpack is not guaranteed, you can end up having the markercluster imported before leaflet, resulting in this error.

Thanks @arenddeboer ! I follow your move to fix the same issue in my react app using leaflet-marker-cluster and webpack.

jperelli added bug help wanted labels May 7, 2018

jperelli closed this as completed Mar 6, 2019

jperelli reopened this Mar 12, 2019

jperelli closed this as completed Mar 12, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error from calling L.MarkerClusterGroup after updating to 2.0.0 #15

Error from calling L.MarkerClusterGroup after updating to 2.0.0 #15

EmmanuelBeziat commented May 4, 2018

jperelli commented May 4, 2018 •

edited

Loading

EmmanuelBeziat commented May 4, 2018

arenddeboer commented Nov 11, 2018 •

edited

Loading

hponcede commented Nov 14, 2018

arenddeboer commented Nov 14, 2018

hponcede commented Nov 14, 2018

jperelli commented Dec 23, 2018

fdenzer commented Feb 12, 2019 •

edited

Loading

zhanghoo commented Mar 3, 2019

Most current setup

After downgrade to older versions of the JS-modules

on a debian server w/ node 10:

My local machine

jperelli commented Mar 4, 2019

zhanghoo commented Mar 4, 2019

jperelli commented Mar 4, 2019

fdenzer commented Mar 5, 2019 •

edited

Loading

jperelli commented Mar 5, 2019

zhanghoo commented Mar 6, 2019

jperelli commented Mar 6, 2019

AndreyNvk commented Mar 6, 2019 •

edited

Loading

jperelli commented Mar 7, 2019

AndreyNvk commented Mar 7, 2019

zhanghoo commented Mar 7, 2019

jperelli commented Mar 7, 2019

AndreyNvk commented Mar 11, 2019

jperelli commented Mar 12, 2019

jperelli commented Mar 12, 2019

AndreyNvk commented Mar 12, 2019

wawagit commented May 24, 2019

Error from calling L.MarkerClusterGroup after updating to 2.0.0 #15

Error from calling L.MarkerClusterGroup after updating to 2.0.0 #15

Comments

EmmanuelBeziat commented May 4, 2018

jperelli commented May 4, 2018 • edited Loading

EmmanuelBeziat commented May 4, 2018

arenddeboer commented Nov 11, 2018 • edited Loading

hponcede commented Nov 14, 2018

arenddeboer commented Nov 14, 2018

hponcede commented Nov 14, 2018

jperelli commented Dec 23, 2018

fdenzer commented Feb 12, 2019 • edited Loading

Most current 2.x setup

After downgrade to older versions of the JS-modules

on a debian server w/ node 10:

zhanghoo commented Mar 3, 2019

Most current setup

After downgrade to older versions of the JS-modules

on a debian server w/ node 10:

My local machine

jperelli commented Mar 4, 2019

zhanghoo commented Mar 4, 2019

jperelli commented Mar 4, 2019

fdenzer commented Mar 5, 2019 • edited Loading

jperelli commented Mar 5, 2019

zhanghoo commented Mar 6, 2019

jperelli commented Mar 6, 2019

AndreyNvk commented Mar 6, 2019 • edited Loading

jperelli commented Mar 7, 2019

AndreyNvk commented Mar 7, 2019

zhanghoo commented Mar 7, 2019

jperelli commented Mar 7, 2019

AndreyNvk commented Mar 11, 2019

jperelli commented Mar 12, 2019

jperelli commented Mar 12, 2019

AndreyNvk commented Mar 12, 2019

wawagit commented May 24, 2019

jperelli commented May 4, 2018 •

edited

Loading

arenddeboer commented Nov 11, 2018 •

edited

Loading

fdenzer commented Feb 12, 2019 •

edited

Loading

fdenzer commented Mar 5, 2019 •

edited

Loading

AndreyNvk commented Mar 6, 2019 •

edited

Loading