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

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

Closed
EmmanuelBeziat opened this issue May 4, 2018 · 26 comments
Closed

Comments

@EmmanuelBeziat
Copy link

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!

@jperelli
Copy link
Owner

jperelli commented May 4, 2018

@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
Copy link
Author

Hi,
Unfortunately, it has no effect…

@arenddeboer
Copy link

arenddeboer commented Nov 11, 2018

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
Copy link

@arenddeboer which file should that be ?

@arenddeboer
Copy link

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
Copy link

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
Copy link
Owner

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

@fdenzer
Copy link
Contributor

fdenzer commented Feb 12, 2019

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
Copy link

zhanghoo commented Mar 3, 2019

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
Copy link
Owner

jperelli commented Mar 4, 2019

Could you try now? I published v3.0.0

@zhanghoo
Copy link

zhanghoo commented Mar 4, 2019

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
Copy link
Owner

jperelli commented Mar 4, 2019

@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
Copy link
Contributor

fdenzer commented Mar 5, 2019

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
Copy link
Owner

jperelli commented Mar 5, 2019

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

@zhanghoo
Copy link

zhanghoo commented Mar 6, 2019

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
Copy link
Owner

jperelli commented Mar 6, 2019

Thanks!

@jperelli jperelli closed this as completed Mar 6, 2019
@AndreyNvk
Copy link

AndreyNvk commented Mar 6, 2019

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
Copy link
Owner

jperelli commented Mar 7, 2019

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

@AndreyNvk
Copy link

@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
Copy link

zhanghoo commented Mar 7, 2019

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
Copy link
Owner

jperelli commented Mar 7, 2019

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

@AndreyNvk
Copy link

@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
Copy link
Owner

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

@jperelli jperelli reopened this Mar 12, 2019
@jperelli
Copy link
Owner

@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
Copy link

@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
Copy link

wawagit commented May 24, 2019

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.

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

No branches or pull requests

8 participants