Failing on page load

[AStoker]

On page load I'm getting an error in the function elementHasNamedParent in the dom-tracker.js file. Element is not defined, and walking up the tree it looks like the _createClass getter is setting the element variable being passed down to be null (due the the property view.firstchild.parentElement being null. It appears that it's looping through DOM elements, and it's hit a comment element <!--view--> that aurelia automatically generates. Not sure if that is the actual problem, but that's what I think I'm seeing going on here.

[AStoker]

More info. It seems to be happening on a custom element. I have a replaceable part in the custom element, and one of my uses (the one that's breaking it I think) is to make the replaceable part empty...

However, after trying to fill in those empty replaceable parts, it's still a no go.

[charlespockert]

@AStoker is this on latest Aurelia framework?

Any chance of a repro too? I tested on my application, maybe you have got a use pattern that I've not come across yet that needs some edge case handling

[AStoker]

v0.17.0, should be.

[charlespockert]

Yep, sounds good - ok if you can get me a minimal repro that would be useful

It sounds like for some reason the viewslot's anchor is in a fragment and therefore has no parent

[AStoker]

Still need to get you a repro, sorry. But here is the call stack for the failure:

[AStoker]

Fun fact... I'm having a hard time reproducing the issue in Safari, but it always happens in Chrome. And it happens when it gets to a comment that aurelia automatically posts. Could be something with how Babel transpiles for different browsers?

[AStoker]

Let me retract that... Safari isn't throwing the error in the console, but I still don't see the debugger.

[AStoker]

https://github.com/AStoker/broken-aurelia-debugger.
Basic repro. In order for it to fail, make sure in the app.html line 13 has a space between the custom element.

  <tab-nav navigation.bind="router.navigation"> </tab-nav>

For it to work, remove the space.

  <tab-nav navigation.bind="router.navigation"></tab-nav>

[charlespockert]

Awesome, thanks for that I'll have a look in a bit and hopefully it's something trivial.

[AStoker]

No problem. Here's for hoping! Could very well be something trivial I'm doing wrong...

[charlespockert]

@AStoker out of curiosity, are you finding this plugin useful? It was born from a comment Patrick Walters made on gitter...

[AStoker]

It has been useful. I'm coming from a KnockoutJS background, and we always had the ability to get the data context for any element by typing in the console ko.dataFor($0) where $0 is the selected element in your debugging tools. I don't have that with aurelia, so this tool gives me the ability to see the contexts. I would be satisfied with just a command line tool, but this seems to be the only thing out there for the moment.

[charlespockert]

@AStoker did you ever get to the bottom of this issue yourself? Sorry I've not really looked myself yet, loads going on in my neck of the woods so I was struggling...

[AStoker]

I haven't either, been busy with moving buildings and conferences coming up. I'm not roadblocked by this, thankfully.
An idea for this tool though, is to make it more based in the console. That way you can debug a bit easier without having to deal with something floating in the view. Perhaps this could be an option, or a different branch?