Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Hey KoRiGaN.

I just installed Vue2-leaflet 0.0.60 to my project and followed your simple example on how to set it up, which works. The problem appears when i’m trying to add a popup or tooltip to my markers. The error happens on load and whenever i hover over a marker / clicks on a marker.

Error:

Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’.

I have the following code:

<v-map :zoom="zoom" :center="center">
    <v-tilelayer :url="url" :attribution="attribution"></v-tilelayer>
        <v-marker v-for="marker in markers" :key="marker.id" :visible="marker.visible" :draggable="marker.draggable" :lat-lng="marker.position">
            <v-popup :content="marker.tooltip" />
            <v-tooltip :content="marker.tooltip" />
      </v-marker>
</v-map>

<script>
import Vue2Leaflet from 'vue2-leaflet';

export default {
    name: 'vuejscomponent',
    components: {
        'v-map': Vue2Leaflet.Map,
        'v-tilelayer': Vue2Leaflet.TileLayer,
        'v-popup': Vue2Leaflet.Popup,
        'v-marker': Vue2Leaflet.Marker,
        'v-tooltip': Vue2Leaflet.Tooltip
    },
    data () {
        return {
            zoom: 14,
            center: [51.505, -0.09],
            url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
            markers: [
                { id: "m1", position : {lat:51.005, lng:-0.09}, tooltip: "tooltip for marker3", draggable: true, visible: true },
                { id: "m2", position : {lat:50.7605, lng:-0.09}, tooltip: "tooltip for marker4", draggable: true, visible: false }
            ],
            options: { permanent: true, custom: true, className: 'tooltipBox', custom: true, dashOffset: "" }
        }
    }
}
</script>

Got any suggestion how to fix this?

[yokane]

I found same problem. and it solved. That cause is Leaflet’s double import.

show that example, on component,

import {
  L,
  LMap,
  LTileLayer,
  LMarker,
  LPopup,
  LTooltip,
  LLayerGroup
} from "vue2-leaflet";

and on main.js

import L from 'leaflet'
import 'leaflet.icon.glyph'
import 'leaflet/dist/leaflet.css'

After remove section of leaflet is related from main,js, runs successfully. Though it is easy mistake, I’m glad if you can use it as a reference.

[DonNicoJs]

2.0 is released since a while, closing this, feel free to re-open