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

help
1

Hi Everyone,

I have build a web app using meteor with blaze in front. There are some hidden errors which I am not able to solve. This is the exact error.

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 Function.DOMRange._insertNodeWithHooks (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:407)
    at Function.DOMRange._insert (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:376)
    at Blaze._DOMRange.DOMRange.attach (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:453)
    at Function.DOMRange._insert (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:371)
    at Blaze._DOMRange.DOMRange.attach (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:453)
    at Function.DOMRange._insert (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:371)
    at Blaze._DOMRange.DOMRange.attach (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:453)
    at Blaze._DOMRange.DOMRange.setMembers (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:497)
    at doMaterialize (blaze.js?hash=f33d3dfed63a491d24e3aa07ad66c24b5fe8c761:2093)
    at Object.Tracker.nonreactive (tracker.js?hash=997515fa2d5b0530ba07741da556c4b36963ef3b:640)

I am not able to find out which of the component is causing error.

Here is the page, I have used trumb

<template name="createblog">
   <head>
   </head>
   <style>
      .cropper-example-lena
      {
      width:100% !important;
      }
   </style>
   {{> header}}
   {{> blogcreate}}
   {{> sAlert}}
</template>
<template name="blogcreate">
   <!-- <button id="check_alert" > check alert</button> -->
   <div class="page_wh">
      <div class="page_all_white">
         <div class="row ">
            <div class="col s12 m6 l6" style="padding: 0px;">
               <h5 class="heading_create" id="createblog"> Create Blog</h5>
            </div>
            <div class="col s12 m6 l6">
               <h5 class="heading_create_inside"> <i class="fa fa-times pull-right" style="display: none !important;"></i> </h5>
            </div>
         </div>
         <div class="row">
            <div class="col s12 m12 ll2" style="padding: 0px;">
               <div class="card" style="padding: 0px; box-shadow: none;">
                  <div class="card-image" id="imagebox">
                     <img id="my_image" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/08/Dad-Blogs-Featured-Image.png" style="height: 300px;"  > 
                     <input type="hidden" name="cover_image" id="cover_image" value="https://www.elegantthemes.com/blog/wp-content/uploads/2017/08/Dad-Blogs-Featured-Image.png">
                     <label for="coverimage">
                     <span style="cursor: pointer;" class="card-title sppan_icons_one"><i class="fa fa-camera"></i></span></label>
                     <input type="file" name="cover_pic" id="coverimage" style="display:none !important;">
                     <span style="display: none;cursor: pointer;" id="removecoverpic" class="card-title sppan_icons_two"><i class="fa fa-trash sppan_icons_two"></i></span>
                  </div>
                  <div style="display: none;" class="card-image" id="divcrop">
                     <img id="my_image2">
                     <span style="cursor: pointer;" id="crop_image" class="card-title sppan_icons_one"><i class="fa fa-crop sppan_icons_one"></i></span>
                  </div>
               </div>
               <p class="text-center">
                  <!--  <img src="https://www.jigsawmedical.com/wp-content/uploads/banner_blog.jpg" alt="img" class="img-responsive">   -->
               </p>
            </div>
         </div>
         <div class="row">
            <div class="input-field col s12 m12 l6">
               <p class="heading_create_inside"> Blog Title <sup><span class="red_start"> * </span></sup> </p>
               <input value="" id="blog_title" type="text" class="validate frmt_inpt">        
               <!--      <input value="" id="grp_title" type="text" class="validate frmt_inpt"> -->        
            </div>
            <div class="input-field col s12 m12 l6">
               <p class="heading_create_inside">When to publish <sup><span class="red_start"> * </span></sup> </p>
               <input type="text" class="datepicker frmt_inpt" id="Blog_publish_date">
            </div>
         </div>
         <div class="row">
            <form >
               <div class="row">
                  <div class="input-field col s12">
                     <p class="heading_create_inside"> Description <sup><span class="red_start"> * </span></sup> </p>
                     <textarea id="blog_description" class="materialize-textarea frmt_inpt"></textarea>
                  </div>
               </div>
            </form>
         </div>
         <div class="loading loader_visiblity_block"  id="loading_div" ></div>
         <script type="text/javascript">
            var trumbowyg = $('#blog_description').trumbowyg(
            {
            btnsDef: {
                  // Create a new dropdown
                 
              },
              // Redefine the button pane
              btns: [
                  ['strong', 'em', 'del'],
                  ['superscript', 'subscript'],
                  //['link'],
                  // ['insertImage'],
                   ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                  ['unorderedList', 'orderedList'],
                  ['horizontalRule'],
                  ['removeformat'],
                  // ['fullscreen']
              ],
            });
            
         </script>
         <!-- 
            <script type="text/javascript">       
              $("#blog_visibility").dropdown("set selected","");
            </script> -->
         <div class="row">
            <div class="col s12 m12 l5"> &nbsp;  </div>
            <div class="col s12 m12 l2"><a class="waves-effect waves-light cncl_btm clicked_cancel">Cancel</a> </div>
            <div class="col s12 m12 l2"><a class="waves-effect waves-light save_button" id="save_blog_draft_btn" > Save in draft</a></div>
            <div class="col s12 m12 l3"><a class="waves-effect waves-light save_button" id="save_blog" > Preview to Publish</a></div>
         </div>
      </div>
   </div>
</template>

When I refreshes this page, the error vanishes away and I got the page.

Please help. Any help would be greatly appreciated

2

This typically happens when a DOM node which Blaze was expecting to be there, is not anymore.

That editor plugin that I see in your code, try without first and see what happens. I’m almost certain that that’s the cause. When using Blaze, you initialise an external plugin in the onRendered callback of your template, not like this.

3

HI @illustreets, I tried in onRendered callback but that does not work either, got the same results

4

Difficult to say, then, what you can do. Likely tumowyg is shifting the DOM in ways that make Blaze complain.

Actually, I remember that a while ago we needed an editor in our own app, but couldn’t make trumbowyg play nicely with Blaze, so we settled for TinyMCE.

5

Thanks, Man will give it a try!

6

Hi @illustreets, I just want to know why don’t you go with ckeditor, its even better. I have not integrated it though but is there any issue or something like that

7

Can’t remember what else we tried, but at the time TinyMCE was the easiest to integrate relative to the features that we wanted. Still works very well, so not keen on changing it soon.

8

ok & Thanks for your time.

1 Like