Fixing the markers breaks the tooltips

[christophfriedrich]

Description

The marker tooltip demo example works fine, but with Webpack, the marker images are missing. When I insert the recommended code to fix the markers, the tooltips get broken: They are no longer displayed. Instead, there are lots of errors in the console.

Live Demo

Not applicable because it uses Webpack.

Steps to Reproduce

1. Set up a standard Vue project with Webpack
2. Take the code for the tooltip demo
3. Above the existing import statement, add: import 'leaflet/dist/leaflet.css'; for the styles
4. Run it -> tooltips work, but marker images are missing
5. Insert the suggested code snippet below the import statements to fix the markers
6. Run it again -> markers are displayed correctly, but as soon as you hover over them, there are no tooltips, but instead lots of errors in the console

(let me know if you need more info)

Expected Results

Tooltip displayed, no error

Actual Results

Tooltip not displayed, error: Uncaught TypeError: Node.appendChild: Argument 1 does not implement interface Node.
This error is thrown again and again each time you hover over the marker.

Trace:

_updateContent       webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:9387
update               webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:9330
onAdd                webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:9267
onAdd                webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:10002
_layerAdd            webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:6486
whenReady            webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:4366
addLayer             webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:6548
openTooltip          webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:10152
openTooltip          webpack:///./node_modules/leaflet/dist/leaflet-src.js?:10480
_openTooltip         webpack:///./node_modules/leaflet/dist/leaflet-src.js?:10546
fire                 webpack:///./node_modules/leaflet/dist/leaflet-src.js?:587
_fireDOMEvent        webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:4341
_handleDOMEvent      webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:4298
handler              webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:2279
addOne               webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:2314
on                   webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:2234
_initEvents          webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:4228
initialize           webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:3094
NewClass             webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:300
createMap            webpack:///./node_modules/vue2-leaflet/node_modules/leaflet/dist/leaflet-src.js?:4625
mounted              webpack:///./node_modules/vue2-leaflet/dist/vue2-leaflet.min.js?:1
VueJS 11 
<anonymous>          webpack:///./src/main.js?:9
js                   http://localhost:9000/js/app.js:226
__webpack_require__  http://localhost:9000/js/app.js:80
<anonymous>          webpack:///multi_./src/main.js?:1
0                    http://localhost:9000/js/app.js:237
__webpack_require__  http://localhost:9000/js/app.js:80
checkDeferredModules http://localhost:9000/js/app.js:46
<anonymous>          http://localhost:9000/js/app.js:156
<anonymous>          http://localhost:9000/js/app.js:153

Code point where the error arises:

9229: var DivOverlay = Layer.extend({
...

Browsers Affected

• Firefox 87.0 on Windows 10

Versions

• Leaflet: v1.7.1
• Vue: v2.6.12
• Vue2Leaflet: v1.2.3

---

PS: The issue template contains this line:

Instructions For Filing a Bug: https://github.com/KoRiGaN/Vue2Leaflet/blob/master/CONTRIBUTING.md#filing-bugs

but the link is broken.

[christophfriedrich]

I narrowed this done more: The line import { Icon } from 'leaflet'; alone is responsible! Inserting this after having imported the things from vue2-leaflet causes the breakage. When moving it before the vue2-leaflet imports the bug doesn't happen anymore -- but the markers are not fixed either.

[mikeu]

Hi @christophfriedrich , thank you for the detailed reproduction steps (and the note about the issue template!).

May I ask why you are using a previous major version of Vue2Leaflet, from 2018? I have followed your reproduction steps but with Leaflet 1.7.1, Vue 2.6.11, and Vue2Leaflet 2.7.0 (in Firefox 88.0.1 on Windows 10), and the example works as expected with no errors logged to the console. Is updating an option for you?

[christophfriedrich]

Hi @mikeu, thank you for your very quick reply -- I am sorry I only get to answer it now.

To be honest I had just copied a skeleton from an older project and didn't realise it was an old major (!) version. I just updated the dependency to 2.7.0 without any problems (I already imported the items "in v2 style" anyway). And indeed the error no longer happens! 👍

---

For the record, in the meantime I had fixed the problem like this:

<l-marker ref="getFeatureInfoMarker" v-if="getFeatureInfo.location" :lat-lng="getFeatureInfo.location">
    <l-icon :icon-url="icon.marker" :icon-retina-url="icon.retina" :shadow-url="icon.shadow"></l-icon>
    <l-popup :content="getFeatureInfo.html"></l-popup>
</l-marker>

data() {
    return {
        icon: {
             marker: require('leaflet/dist/images/marker-icon.png'),
             retina: require('leaflet/dist/images/marker-icon-2x.png'),
             shadow: require('leaflet/dist/images/marker-shadow.png')
        },