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

Most upvoted comments

+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 TempaltePart holding onto disconnected nodes, and the ! assertion on startNode.parentNode!: https://github.com/Polymer/lit-html/blob/04a30abb010b4e0d8abec1b2ca411b127d8a06e0/src/lib/parts.ts#L333.

But, we disconnect this TemplatePart, so it’s startNode no longer had a parentNode.

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-html version 0.11.2, which is what lit-element itself 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.js works, which triggers ShadyRender to be used, which breaks. When you switch to webcomponents-loader.js the 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.