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

Fillah · 2018-03-27T13:25:56Z

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?

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

KoRiGaN · 2018-03-27T13:42:46Z

Hi @Fillah,

You name your component v-XXXX so in your template make sure to use the same name.

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

Hope this helps,

Micka

Fillah · 2018-03-27T14:14:33Z

Sorry i was too fast writing the code, @KoRiGaN . I actually do have that code you wrote and i still get the error

KoRiGaN · 2018-03-27T15:37:02Z

@Fillah, I tried your code in this jsfiddle with v0.0.60 and it works.

Seems to be something related to your setup.

Can you share an example that reproduces your issue?

Fillah · 2018-03-27T19:09:01Z

@KoRiGaN, could this be related to an "older" version of Vue, leaflet or Proj4?

Vue: 2.4.4
Leaflet: 1.0.3
Proj4: 2.4.4

EDIT: I have another project where it all works. Not sure why in this specific case it doesn't. I'm using it in a Vue-pwa template with service worker. The difference between this project and the other where it works is that this was created before the other. The fix might be to create a new project with the same setup.

KoRiGaN · 2018-03-30T17:03:30Z

@Fillah,

I tried with different version of Vue and it worked fine.

Do you have a project available where I can test that issue and fix it?

If I'm not able to reproduce the error I'm afraid I will have to close that issue.

Mickaël

Fillah · 2018-04-02T14:05:23Z

the project is for a customer and i therefore i can't share the project with you, sadly.
I can not seem to reproduce the error, so maybe it's just something with my build. Do you have any idea why the error would seem to appear or have any fix to it besides i have to create a new project? Maybe setup some other parameters for the tooltip or popup, which seems to be the problem, @KoRiGaN.

Otherwise i'm just gonna close it and try something else. But thank you for your time and help :)

KoRiGaN · 2018-04-03T00:03:31Z

It doesn't seem to be Vue2Leaflet related as 'Node' and 'appendChild' doesn't exist in the Vue2Leaflet codebase.

Could you try:
Only Popup (no tooltip). Does it produce the same error?
Only Tooltip (no popup). Does it produce the same error?
Use instead of . Does it produce the same error ? See here.

Hope this helps,

Micka

Fillah · 2018-04-03T07:28:16Z

Only popup: The error only occurs when i click on a marker and no popup shows.
Only tooltip: The error occurs on both hover and click and no popup shows.
Use instead of: Didn't work and still gives the me errors.

Fillah · 2018-04-03T07:31:46Z

KoRiGaN · 2018-04-03T11:07:38Z

All these errors are triggered in leaflet so I don't know what is going on.
I would suggest to debug it and see what happens in leaflet popup at _updateContent and what is this._content at that time.

I would help to narrow down possible issues and find a fix.

kissmygritts · 2018-07-27T20:03:52Z

The following link may help narrow down this issue.

https://gis.stackexchange.com/questions/141329/error-when-trying-to-bind-popup-on-geojson-failed-to-execute-appendchild

aluramh · 2018-08-08T22:44:16Z

This is still happening to me. It started happening out of nowhere.

burzum · 2018-10-31T00:28:33Z

Same issue for me, using ^1.1.1

				<l-map :zoom=10 :center="[51.7305228, 10.7710227]" id="map">
					<l-tile-layer
							url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
					<l-marker :key="index" v-for="(stamp, index) in stampLocations" :icon="icon" :lat-lng="stamp.longLat">
						<l-popup :content="stamp.name" :title="stamp.name"></l-popup>
					</l-marker>
				</l-map>

@KoRiGaN By default it seems that Leaflet 1.3 is installed, I've manually added the package and set it to ^1.2 and this made the tooltop work! So there is a BC breaking change in the 1.3 release that makes it dysfunctional with vue2-leaflet. :(

DonNicoJs · 2018-10-31T07:13:13Z

Did you guys tried to update to the latest version? We just released on npm a lot of bugfixes and improved the code base quite much! @burzum @aluramh

chaogis · 2018-11-07T10:19:02Z

i meet this problem yestoday when i updated vue2-leaflet from 1.0.2 to 1.1.1, while leaflet is the newest version 1.3.4. However, before update vue2-leaflet to 1.1.1, it all work fine. So, i wonder where the error come from, from vue2-leaflet or leaflet? @KoRiGaN Could you please take some attention to find it out and solve? Thank you!

DonNicoJs · 2018-11-07T10:28:42Z

@chaogis Can you please share the code snippet that cause the error ?

chaogis · 2018-11-07T11:57:57Z

@chaogis Can you please share the code snippet that cause the error ?
I am glad to receive from you, following is part of my code:
cityGeojsonOptions(){ return { pointToLayer: this.pointToLayerFunction, onEachFeature: this.onEachFeatureFunction } }, pointToLayerFunction(){ return(geoJsonPoint, latlng) => { let factorVal = geoJsonPoint[this.factor]; let level = 'level0'; if(factorVal){ level = getFactorLevel(this.factor, factorVal); } geoJsonPoint.icon = this.createIcon(level); return L.marker(latlng, geoJsonPoint) // .bindPopup(geoJsonPoint.properties.name),{ // //maxHeight: 20, // closeButton: false, // offset: [0, 2]}); } }, onEachFeatureFunction(){ return(feature, layer) => { layer.on('click', e => { console.log('onEachFeatureFunction: Click City'); //console.log(e); this.cityClick(feature.properties.cityCode); }); layer.on('mouseover', e => { console.log('onEachFeatureFunction: MouseMove City - ' + feature.properties.cityCode); layer.bindPopup(feature.properties.name + ' · ' + this.factor + ': ' + feature[this.factor], { //maxHeight: 20, closeButton: false, offset: [0, 2]}) .openPopup(); }); } },

I think the problem appeared because leaflet 1.3.4 is conflicting with vue2-leaflet 1.3.4. Just now, i manually install leaflet of version 1.2.0, and the problem is not appearint now.
please find why, thank you.

chaogis · 2018-11-07T12:00:17Z

@KoRiGaN the code above is confusion， so i clip a picture of my code

DonNicoJs · 2018-11-07T12:49:01Z

@chaogis Thank you for the code, I will try to replicate the problem!

HIMISOCOOL · 2018-11-20T00:28:44Z

I have this issue also, but I cannot reproduce it in jsfiddle..
http://jsfiddle.net/ybmpdqua/
this works perfectly fine here...
is anyone else who is encountering this issue using google-mutant? this is the only difference between my jsfiddle and my real codebase

DonNicoJs · 2018-11-20T06:35:07Z

This should all be related to #281 everytime an erro appear on a webpacked app and not when importing from cdn (jsfiddle) is something related to issue #281

DonNicoJs · 2018-11-20T06:36:31Z

@chaogis please take a look at #281 too to solve your problem. Please make sure that if you have a lock file no multiple versions of vue-leaflet are listed

core01 · 2018-11-22T20:48:25Z

@HIMISOCOOL @chaogis Hello, I've got the same issue. I just removed leaflet dependency, and run npm i --save vue2-leaflet. After that all works fine. As we can see here package.json#L27 vue2-leaflet package has own leaflet dependency, so there is no need to install it separately.
Let me know if I'm wrong.

chaogis · 2018-11-26T11:41:15Z

Ok, thank you very much, if i find other problems, i will write to you. chao_gis@163.com From: Nicolò Maria Mezzopera Date: 2018-11-20 14:35 To: KoRiGaN/Vue2Leaflet CC: chaogis; Mention Subject: Re: [KoRiGaN/Vue2Leaflet] Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. (#146) Reopened #146. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

mikebronner · 2018-12-10T23:46:21Z

I also got this error when building with webpack using Node 11.x. Reverting back to Node 10 resolved the issue. Just wanted to make a note here in case it is helpful for future development or if anyone else comes across this error and they happen to be on Node 11 (current stable at the time of writing).

DonNicoJs · 2018-12-18T15:10:22Z

@mikebronner will try to test with node 11

DonNicoJs · 2018-12-18T15:13:08Z

@mikebronner I quickly tested with the examples and it works fine! can you post your package.json ?
Also please check if #281 workaround fixes your problem.

yokane · 2018-12-24T23:08:36Z

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.

idohurvitz · 2018-12-25T17:45:40Z

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.

@HIMISOCOOL @chaogis Hello, I've got the same issue. I just removed leaflet dependency, and run npm i --save vue2-leaflet. After that all works fine. As we can see here package.json#L27 vue2-leaflet package has own leaflet dependency, so there is no need to install it separately.
Let me know if I'm wrong.

hey!
i want to update my application to use vue2-leaflet and its plugins.
i read all the comments here and in issue 208 and still getting the same error,
can someone help me please?

mikebronner · 2018-12-25T18:53:48Z

@yokane, I'm not sure if the cause for the problems we are having is the same. I am registering the components globally with Vue:

import Vue2Leaflet from "vue2-leaflet";
import Vue2LeafletMarkerCluster from 'vue2-leaflet-markercluster';

Vue.component("l-attribution", Vue2Leaflet.LControlAttribution);
Vue.component("l-map", Vue2Leaflet.LMap);
Vue.component("l-marker", Vue2Leaflet.LMarker);
Vue.component("l-popup", Vue2Leaflet.LPopup);
Vue.component("l-tile-layer", Vue2Leaflet.LTileLayer);
Vue.component("l-wms-tile-layer", Vue2Leaflet.LWMSTileLayer);
Vue.component("l-zoom", Vue2Leaflet.LControlZoom);
Vue.component("v-marker-cluster", Vue2LeafletMarkerCluster);

Unless vue2-leaflet-markercluster is also importing Leaflet, in which case there might be an issue?

kaboume · 2019-01-18T13:03:23Z

Hi,
I have the same pb.
I'm using Nuxt

My nuxt.config file :
plugins: [ { src: "~/plugins/leaflet.js", ssr: false }, ],

My plugins/leaflet.js file :


`import Vue from "vue";
import { LMap, LTileLayer, LMarker, LPopup, LTooltip } from "vue2-leaflet";

import L from "leaflet";
delete L.Icon.Default.prototype._getIconUrl;

if (process.client) {
  L.Icon.Default.mergeOptions({
    iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
    iconUrl: require("leaflet/dist/images/marker-icon.png"),
    shadowUrl: require("leaflet/dist/images/marker-shadow.png")
  });

  Vue.component("l-map", LMap);
  Vue.component("l-tilelayer", LTileLayer);
  Vue.component("l-marker", LMarker);
  Vue.component("l-popup", LPopup);
  Vue.component("l-tooltip", LTooltip);
}
`

And my component

`

    <l-marker
      v-for="marker in marqueurs"
      :key="marker.id"
      :lat-lng.sync="marker.position"
      @click="alert(marker)"
    >
      <l-popup :content="marker.tooltip"/>
      <l-tooltip :content="marker.tooltip"/>
    </l-marker>
  </l-map>
</no-ssr>

`

When I hover the marker

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

DonNicoJs · 2019-01-18T13:35:47Z

To everyone please check the workaround with the alias in the meantime I finish the 2.0
#281 check the end of the issue

whittaker007 · 2019-03-21T03:08:12Z

In case it helps anyone else I started getting this issue and in my case it turned out to be because the text source I was using in the popup/tooltip was actually numerical and I had to explicitly convert it to a string to avoid the error.

DonNicoJs · 2019-04-21T15:09:40Z

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

Fillah closed this as completed Apr 3, 2018

DonNicoJs reopened this Nov 20, 2018

DonNicoJs closed this as completed Apr 21, 2019

lpofredc mentioned this issue Feb 16, 2022

Some new feats and fixes SysDeb/overheadCablesAndBirdlife#1

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Fillah commented Mar 27, 2018 •

edited

KoRiGaN commented Mar 27, 2018

Fillah commented Mar 27, 2018 •

edited

KoRiGaN commented Mar 27, 2018

Fillah commented Mar 27, 2018 •

edited

KoRiGaN commented Mar 30, 2018

Fillah commented Apr 2, 2018 •

edited

KoRiGaN commented Apr 3, 2018

Fillah commented Apr 3, 2018

Fillah commented Apr 3, 2018

KoRiGaN commented Apr 3, 2018

kissmygritts commented Jul 27, 2018

aluramh commented Aug 8, 2018

burzum commented Oct 31, 2018 •

edited

DonNicoJs commented Oct 31, 2018 •

edited

chaogis commented Nov 7, 2018

DonNicoJs commented Nov 7, 2018

chaogis commented Nov 7, 2018

chaogis commented Nov 7, 2018

DonNicoJs commented Nov 7, 2018

HIMISOCOOL commented Nov 20, 2018 •

edited

DonNicoJs commented Nov 20, 2018

DonNicoJs commented Nov 20, 2018

core01 commented Nov 22, 2018 •

edited

chaogis commented Nov 26, 2018 via email

mikebronner commented Dec 10, 2018

DonNicoJs commented Dec 18, 2018

DonNicoJs commented Dec 18, 2018

yokane commented Dec 24, 2018

idohurvitz commented Dec 25, 2018

mikebronner commented Dec 25, 2018

kaboume commented Jan 18, 2019 •

edited

DonNicoJs commented Jan 18, 2019

whittaker007 commented Mar 21, 2019

DonNicoJs commented Apr 21, 2019

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

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

Comments

Fillah commented Mar 27, 2018 • edited

KoRiGaN commented Mar 27, 2018

Fillah commented Mar 27, 2018 • edited

KoRiGaN commented Mar 27, 2018

Fillah commented Mar 27, 2018 • edited

KoRiGaN commented Mar 30, 2018

Fillah commented Apr 2, 2018 • edited

KoRiGaN commented Apr 3, 2018

Fillah commented Apr 3, 2018

Fillah commented Apr 3, 2018

KoRiGaN commented Apr 3, 2018

kissmygritts commented Jul 27, 2018

aluramh commented Aug 8, 2018

burzum commented Oct 31, 2018 • edited

DonNicoJs commented Oct 31, 2018 • edited

chaogis commented Nov 7, 2018

DonNicoJs commented Nov 7, 2018

chaogis commented Nov 7, 2018

chaogis commented Nov 7, 2018

DonNicoJs commented Nov 7, 2018

HIMISOCOOL commented Nov 20, 2018 • edited

DonNicoJs commented Nov 20, 2018

DonNicoJs commented Nov 20, 2018

core01 commented Nov 22, 2018 • edited

chaogis commented Nov 26, 2018 via email

mikebronner commented Dec 10, 2018

DonNicoJs commented Dec 18, 2018

DonNicoJs commented Dec 18, 2018

yokane commented Dec 24, 2018

idohurvitz commented Dec 25, 2018

mikebronner commented Dec 25, 2018

kaboume commented Jan 18, 2019 • edited

DonNicoJs commented Jan 18, 2019

whittaker007 commented Mar 21, 2019

DonNicoJs commented Apr 21, 2019

Fillah commented Mar 27, 2018 •

edited

Fillah commented Mar 27, 2018 •

edited

Fillah commented Mar 27, 2018 •

edited

Fillah commented Apr 2, 2018 •

edited

burzum commented Oct 31, 2018 •

edited

DonNicoJs commented Oct 31, 2018 •

edited

HIMISOCOOL commented Nov 20, 2018 •

edited

core01 commented Nov 22, 2018 •

edited

kaboume commented Jan 18, 2019 •

edited