vue-leaflet/Vue2Leaflet

Roadmap to support Leaflet 1.8.0

venzeo opened this issue · 7 comments

Description

Right now the Vue2Leaflet supports 1.7.1

Are there any plans/roadmap to update it to Leaflet 1.8.0 which includes some major updates?

stale commented

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

mikeu commented

Are you experiencing errors or other issues when you use Vue2Leaflet with Leaflet 1.8.0, or even 1.9.3 now?

@mikeu my apologies for the delay in replying. I have been using Vue2Leaflet version 2.5.2 with Leaflet version 1.7.1 in my project and all was well - because of a bug that was fixed in Leaflet 1.8.0, I wanted to upgrade that dependency. However, after making the upgrade, attempting to click on the map logs the following error to the console:

Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of undefined (reading 'Marker')"

found in

---> <LMarker>
       <LMap>
         <MapInput> at src/components/form/MapInput.vue
           <PointInput> at src/components/form/PointInput.vue
             <Field> at src/components/form/Field.vue
               <FormSection> at src/components/form/FormSection.vue
                 <FormSectionRow> at src/components/form/FormSectionRow.vue
                   <Form> at src/components/form/Form.vue
                     <Observation> at src/components/Observation.vue
                       <Index> at src/views/Index.vue
                         <App> at src/App.vue
                           <Root>

TypeError: Cannot read properties of undefined (reading 'Marker')
    at NewClass.eval (leaflet.draw.js?20d6:8:1)
    at proto.callInitHooks (leaflet-src.js?e11e:359:1)
    at new NewClass (leaflet-src.js?e11e:306:1)
    at marker (leaflet-src.js?e11e:7791:1)
    at VueComponent.mounted (LMarker.js?4e2b:265:1)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854:1)
    at callHook (vue.runtime.esm.js?2b0e:4219:1)
    at Object.insert (vue.runtime.esm.js?2b0e:3139:1)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346:1)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565:1)

I also found that this occurs with Leaflet version 1.9.3.

Is there anything else I can provide you with to help clarify this issue? Thank you very much for your time and hard work.

mikeu commented

@darrenklein are you able to provide a demo project that reproduces the error, which I could access? A minimal test of Vue2Leaflet 2.5.2 with Leaflet 1.9.3 didn't give me any errors or problems in this codesandbox.

Though that said, I notice you have other components involved as well, including the leaflet.draw plugin. I can't actually find any place in the Vue2Leaflet code that attempts to access a property called Marker on any object, and even though the error is found in <LMarker>, the first line of the call stack is in leaflet.draw.js, so I'm also wondering whether you might have more luck tracking down the issue in that plugin.

Another thing that might be worth trying is an update to the latest version of Vue2Leaflet, 2.7.1, just in case—though it is older than Leaflet 1.8, and again doesn't contain the code that appears to be throwing the error, so I wouldn't be surprised if it didn't resolve the issue.

Thanks very much for looking that over - I'm not much of a front-end dev, so my apologies for not being too insightful on that error - I appreciate your perspective on it and the time you put into this. Yah, there's another Leaflet-related dependency in this project, perhaps that's the culprit. Let me poke around with that a bit, I'll report back - but yeah, based on your findings, I'd say that the issue is not with this repo.

mikeu commented

All good, I saw the ---> <LMarker> and dove right in to trying to reproduce or debug the issue myself before looking more closely at the stack trace :)

But yeah, please do report back with what you find! If it's a solution then it'd be great to have that documented here for others facing the same issue, and if not then I'm happy to dig into it further. Whichever library is throwing the error, it's not impossible that a change here could help resolve it anyway. To that point, what is your package.json dependency for Leaflet Draw? There are a couple of different Vue2Leaflet–Leaflet-Draw wrappers out there, and it's possible to work with the base package too, so it'd be useful to know which one was involved here.