Error: Failed to execute 'insertBefore' on 'Node'

Question

I tried to insert <div> containers around the {{#each}} but it didn't work as well. Its also odd because it works for 2 normal posts list pages, but not for the 3rd one which sorts them by distance.

Updates: I noticed that after i change the template JS from template.name.onRendered to onCreated, the sorting page works. However it works only if you go from a previous post list page and not from the profile page.

The only common ground of the error pages is those pages use publishComposite for sorting. Could that be the issue since publishComposite has a child to parent relationship?

The error message

Exception in queued task: Error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at Error (native)
    at Object.container._uihooks.insertElement (http://localhost:3000/packages/meteoric_ionic.js?e45c114e85716d9fad8bac1cd7904ae2700bc963:5750:19)
    at DOMRange._insertNodeWithHooks (http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:383:21)
    at Function.Blaze._DOMRange._insertNodeWithHooks (http://localhost:3000/packages/peerlibrary_blaze-components.js?4eddb4e3f0f660190548347e680d109a51a7050f:2377:10)
    at Function.DOMRange._insert (http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:354:16)
    at DOMRange.attach (http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:431:16)
    at Blaze._DOMRange.attach (http://localhost:3000/packages/peerlibrary_blaze-components.js?4eddb4e3f0f660190548347e680d109a51a7050f:2437:33)
    at Function.DOMRange._insert (http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:349:7)
    at DOMRange.attach (http://localhost:3000/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8:431:16)
    at Blaze._DOMRange.attach (http://localhost:3000/packages/peerlibrary_blaze-components.js?4eddb4e3f0f660190548347e680d109a51a7050f:2437:33)

The meteoric_ionic js file referred to line 19

container._uihooks = {                                                                                               
    insertElement: function(node, next) {                                                                              
      var $node = $(node);                                                                                             
      if (!template.transition || !$node.hasClass('view') || IonNavigation.skipTransitions) {                         
        container.insertBefore(node, next);  //line 19                                                                          
        return;                                                                                                        
      }  

The relevant html

  {{#ionView}}
    {{#ionContent}}
        {{#ionList}}
            <div>
              {{#each shops}}
                    {{> shopItem}}
              {{/each}}
            </div>
        {{/ionList}}
    {{/ionContent}}
  {{/ionView}}

Wilkey

There's a similar problem in another question. You might want to give it a try. – Houphouetboigny

I did, it removed some errors but main problem is unresolved. I mentioned it at the start of my post. – Wilkey

This might help you. – Consequently

@Consequently Same, didnt solve the problem. I googled the issue and was previously at the page. I wonder whats the issue! – Wilkey

You will need to post more code here. There is nothing wrong with the structure itself, but the javascript in your templates is doing some dynamic insertion on the dom and it's causing problems. Post your onRendered/onCreated code from each of your templates and we will be able to help. – Nissen

Answer 1

Try this and let me know:

Template.nearShops.onCreated(function () {  
  var self = this;
  self.autorun(function () {
    self.interval = Meteor.setInterval(function(){
      var currentLocation = Geolocation.latLng() || '';
      if(currentLocation) {
        Session.set('lat', currentLocation.lat);
        Session.set('lng', currentLocation.lng);
      }
    }, 2000);   
  });
  self.autorun(function(){  
    if(Session.get('lat')) {
      self.subscribe( "nearShops", Session.get('lng'), Session.get('lat') );
    }
  });
});

I'll make explaination if this work

Yusem

I was hoping the upvotes would bode well, but its still not working for me. Any other suggestion on what I should tweak? The idea is just to get current location when I click this tab. – Wilkey

@Wilkey can you post this file: meteoric_ionic.js?e45c114e85716d9fad8bac1cd7904ae2700bc963:5750:19 i did search from the source but couldn't find it. It seems you are using depreciated package. – Yusem

I suspect this is related with the packagae. I suggest you to open an issue – Yusem

I will open an issue for this. Would there be any workarounds? As the error prevents the page from loading up. – Wilkey

I think just referring to this question is enough. You should get more insight from package maintainer. – Yusem

Thanks the issue is with the package. Its outdated and deprecated. So I'll accept your answer. Thanks! – Wilkey

Answer 2

I fixed it by updating cdk from release 9 to 11.

My case : embedding of mat-card(cdkDrag) into mat-grid-list(cdkDropListGroup)/mat-grid-tile

Remind 'Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.'

Antidromic