lit: Uncaught (in promise) TypeError: Cannot read property 'nextSibling' of null
I’ve got a LitElement with render method:
render({restaurantId}) {
const restaurantView = restaurant => html`
<restaurant-view restaurant="${restaurant}">
${fetchReviews(restaurantId).then(reviewsList)}
</restaurant-view>
`;
const restaurantList = restaurants => html`
<restaurant-list restaurants="${restaurants}"></restaurant-list>
`;
const restaurant = fetchRestaurantById(restaurantId).then(restaurantView);
const restaurants = fetchRestaurants().then(restaurantList);
return restaurantId
? html`${until(restaurant, restaurantView())}`
: html`${until(restaurants, restaurantList([]))}`;
}
When I load up a restaurantId, I get the following error:
lit-html.ts:776 Uncaught (in promise) TypeError: Cannot read property 'nextSibling' of null
at removeNodes (lit-html.ts:776)
at NodePart.clear (lit-html.ts:665)
at NodePart._setNode (lit-html.ts:563)
at NodePart._setTemplateResult (lit-html.ts:592)
at NodePart.setValue (lit-html.ts:542)
at value.then (lit-html.ts:659)
removeNodes @ lit-html.ts:776
clear @ lit-html.ts:665
_setNode @ lit-html.ts:563
_setTemplateResult @ lit-html.ts:592
setValue @ lit-html.ts:542
value.then @ lit-html.ts:659
Promise.then (async)
_setPromise @ lit-html.ts:657
setValue @ lit-html.ts:548
directive @ until.ts:23
getValue @ lit-html.ts:405
setValue @ lit-html.ts:530
update @ lit-html.ts:710
render @ lit-html.ts:177
_propertiesChanged @ lit-element.js:113
_flushProperties @ properties-changed.js:307
ready @ properties-changed.js:151
ready @ lit-element.js:79
_enableProperties @ properties-changed.js:287
connectedCallback @ properties-mixin.js:176
(anonymous) @ restaurant-reviews.js:117
Show 2 more blackboxed frames
Immediately after this exception, my view renders properly. Attempts to track down bugs in my own code that could cause this have so far turned up nothing. Perhaps consider a more verbose exception.
Thanks for considering this issue
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 22 (11 by maintainers)
Commits related to this issue
- Reparent nodes into detached DocumentFragment when clearing NodePart Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here di... — committed to jridgewell/lit-html by jridgewell 5 years ago
- Reparent nodes into detached DocumentFragment when clearing NodePart Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here di... — committed to lit/lit by jridgewell 5 years ago
- Reparent nodes into detached DocumentFragment when clearing NodePart Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here di... — committed to jridgewell/lit-html by jridgewell 5 years ago
- Reparent nodes into detached DocumentFragment when clearing NodePart Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here di... — committed to lit/lit by jridgewell 5 years ago
- Reparent nodes into detached DocumentFragment when clearing NodePart Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here di... — committed to lit/lit by jridgewell 5 years ago
- Reparent nodes into detached DocumentFragment when clearing NodePart Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here di... — committed to lit/lit by jridgewell 5 years ago
- Reparent nodes into detached DocumentFragment when clearing NodePart Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here di... — committed to lit/lit by jridgewell 5 years ago
- Reparent nodes into detached DocumentFragment when clearing NodePart Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here di... — committed to lit/lit by jridgewell 5 years ago
- Reparent nodes into detached DocumentFragment when clearing NodePart Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here di... — committed to lit/lit by jridgewell 5 years ago
- Check Node Tree Before Committing Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here directive() }` } }`, container)... — committed to lit/lit by jridgewell 5 years ago
- Check Node Tree Before Committing Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here directive() }` } }`, container)... — committed to lit/lit by jridgewell 5 years ago
- Check Node Tree Before Committing Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here directive() }` } }`, container)... — committed to lit/lit by jridgewell 5 years ago
- Check Node Tree Before Committing (#966) Imagine this template structure: ```js render(html`${ // Outer NodePart ${ html`${ // Nested NodePart here directive() }` ... — committed to lit/lit by jridgewell 4 years ago
+1 this issue is affecting IE11 heavily. A (simple) work around is to put the offending nodes into a new ShadyDOM, obviously a solution like that is less than ideal and could result in a significant performance hit.
As a rule, you should never manually manipulate any html that was rendered by lit-html. If you do, there’s a reasonable chance that you break future renders. Use lit-html to change what you want
Excellent demo. I’ve reduced it further at https://output.jsbin.com/kaneruq/quiet.
It boils down to the
TempaltePartholding onto disconnected nodes, and the!assertion onstartNode.parentNode!: https://github.com/Polymer/lit-html/blob/04a30abb010b4e0d8abec1b2ca411b127d8a06e0/src/lib/parts.ts#L333.But, we disconnect this
TemplatePart, so it’sstartNodeno longer had aparentNode.There is a known issue with ShadyCSS that was introduced in 0.11.3, so that may be causing your problems with shady-render. I think the fix is already in so it should be resolved with 0.11.4
If you are using LitElement, you should probably be using
lit-htmlversion 0.11.2, which is whatlit-elementitself uses. Otherwise there’s a reasonable chance that you are using two different versions, which may also explain some problems.I can’t reproduce your issues though: https://codepen.io/ruphin/pen/qMyMVO?editors=1010
The only explanation I can come up with is that
webcomponents-bundle.jsworks, which triggers ShadyRender to be used, which breaks. When you switch towebcomponents-loader.jsthe polyfills don’t work for some reason, which causes ShadyRender to not be used and explains why you don’t get the error, but get the incompatible polyfill warnings, and don’t get properly polyfilled CSS. I don’t know why this is happening though, both versions of the polyfill should work, although I generally recommend using-bundle.It would help if I knew on what browser/version you are seeing the problem.