TypeError: Cannot read property 'nextSibling' of null

[karthickthangasamy]

We are facing issue while routing between samples (contains child routing) and other root menu (about, installation) navigation.

aurelia-templating.js:1082 Uncaught (in promise) TypeError: Cannot read property 'nextSibling' of null
    at View.removeNodes (http://localhost:3000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.4/aurelia-templating.js:1082:23)
    at http://localhost:3000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.4/aurelia-templating.js:1446:17
    at Array.forEach (native)
    at ViewSlot.removeAll (http://localhost:3000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.4/aurelia-templating.js:1434:16)
    at Repeat.unbind (http://localhost:3000/jspm_packages/npm/aurelia-templating-resources@1.0.0-beta.1.1.3/repeat.js:76:21)
    at Controller.unbind (http://localhost:3000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.4/aurelia-templating.js:2965:26)
    at View.unbind (http://localhost:3000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.4/aurelia-templating.js:1050:26)
    at If.unbind (http://localhost:3000/jspm_packages/npm/aurelia-templating-resources@1.0.0-beta.1.1.3/if.js:68:17)
    at Controller.unbind (http://localhost:3000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.4/aurelia-templating.js:2965:26)
    at View.unbind (http://localhost:3000/jspm_packages/npm/aurelia-templating@1.0.0-beta.1.1.4/aurelia-templating.js:1050:26)removeNodes @ aurelia-templating.js:1082(anonymous function) @ aurelia-templating.js:1446removeAll @ aurelia-templating.js:1434unbind @ repeat.js:76unbind @ aurelia-templating.js:2965unbind @ aurelia-templating.js:1050unbind @ if.js:68unbind @ aurelia-templating.js:2965unbind @ aurelia-templating.js:1050unbind @ aurelia-templating.js:2961unbind @ aurelia-templating.js:1050returnViewToCache @ aurelia-templating.js:1939returnToCache @ aurelia-templating.js:962removeAction @ aurelia-templating.js:1459removeAll @ aurelia-templating.js:1472after @ router-view.js:41work @ router-view.js:126(anonymous function) @ router-view.js:143

Reproduce the issue

1. Run the bridge application.
2. Navigate to Components catalog menu.
3. Again navigate to about menu.

Now, the about page is empty and getting the console error as like the above stack trace.

[Thanood]

@karthickthangasamy pointed me to this issue: https://github.com/aurelia/templating/issues/259 which is similar to that one mentioned here.

[Thanood]

@karthickthangasamy My Gitter doesn't like me atm so I'm writing here (and post in Gitter when it likes me again).

I could not solve this with the Aurelia version that you're using. Even wrapping the navigation menu in a <template> doesn't solve it like I suggested.

But I updated (jspm update) to the latest libs and replaced all <content> with <slot> and initialized @children arrays as empty array. For example like this:

  export class ejGrid extends WidgetBase {
  @children(`${constants.elementPrefix}column`) columns = []; // <-- needs initialization
  constructor(element, templateEngine) {
    super();
    this.element = element;
    this.hasChildProperty = true;
    this.childPropertyName = 'columns';
    this.templateProcessor = new TemplateProcessor(this, templateEngine);
    this.templateProcessor.initTemplate();
  }

And with the most recent templating library the issue is solved and it works! :smile:

I really think you should update. Syncfusion bridge doesn't have that much <content> so it should really be easy to migrate to <slot>.

I will PR my changes for you as a starting ground.

edit: Having said that, the about page is not loading because it's missing an image file. I couldn't find the cause and have to move on to do other things for work now. :smile: I suppose it will be easy for you to find this.

Switching to "Components Catalog" and back to "Installation" works, though.

[tommasop]

Any idea on when the Thanood fork will be merged in?

[karthickthangasamy]

@tommasop The PR has been merged.