Stencil: TypeError: Cannot read property 'insertBefore' of null

[simonhaenisch]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request

Current behavior:

I render a list from an array, with the ability to remove items from that array. After removing e. g. the second item, the list re-renders, and the previously third item becomes the second one. Now, when removing the new second item, the state gets messed up and this error is thrown:

TypeError: Cannot read property 'insertBefore' of null
    at Object.$insertBefore (app.core.js:362)
    at updateChildren (app.core.js:776)
    at patchVNode (app.core.js:826)
    at updateChildren (app.core.js:735)
    at patchVNode (app.core.js:826)
    at updateChildren (app.core.js:735)
    at patchVNode (app.core.js:826)
    at updateChildren (app.core.js:735)
    at patchVNode (app.core.js:826)
    at updateChildren (app.core.js:735) 8 "APP-LIST"

Expected behavior:

It should work.

Related code:

@State() list: { id: number; label: string; }[] = [ /* ... */ ];

render() {
  return (
    <ion-content>
      {this.list.map(item => <ion-item><ion-label>{item.label}</ion-label></ion-item>)}
    </ion-content>
  );
}

Other information:

It works when adding a unique key attribute to each list item, e. g.

<ion-item key={item.id}><ion-label>{item.label}</ion-label></ion-item>

However I couldn't find anything about being supposed to do that in the docs.

[adamdbradley]

You're absolutely right about not mentioning key. Would you be able to submit a PR for the docs site? Thanks https://stenciljs.com/docs/templating-jsx

[simonhaenisch]

I can, however I'm not sure about the constraints of key. Is it similar to how keys work in React because it's a JSX thing?

From https://reactjs.org/docs/lists-and-keys.html#keys:

Keys help ~React~ Stencil identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys.

When you don’t have stable IDs for rendered items, you may use the item index as a key as a last resort.

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. If you choose not to assign an explicit key to list items then ~React~ Stencil will default to using indexes as keys.

[adamdbradley]

Yes they work the same as react.

[jeanbenitez]

Hello! I can't see that in stenciljs docs, maybe was deleted it by mistake? Thanks!

[simonhaenisch]

@manucorporat you removed the service worker from the stencil site (https://github.com/ionic-team/stencil-site/commit/91536ac327dab6f112031f07f6d2a1cba025bc3a), so everyone who has an active service worker with old content is stuck at the moment, until a new service worker lets them know about new content.

@jeanbenitez you can go to the stencil site, then open dev tools and "application" tab... select "service worker" in the left menu and next to sw.js click "unregister", then refresh the page.

[jeanbenitez]

@simonhaenisch Thanks!