Stencil: `node.parentNode` value is null when relocating slot content in certain cases

[kensodemann]

Stencil version:

 @stencil/[email protected]<version>

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Working with a community member we've run into this strange error that shows up when we bring in a Stencil component (scoped w/ slots) in an app using maquette (https://maquettejs.org/):

index-91ef63aa.js:1059 Uncaught (in promise) TypeError: Cannot read property 'childNodes' of null 
at relocateSlotContent (index-91ef63aa.js:1059) 
at relocateSlotContent (index-91ef63aa.js:1109) 
at renderVdom (index-91ef63aa.js:1179) 
at updateComponent (index-91ef63aa.js:1348) 
at index-91ef63aa.js:1324 
at then (index-91ef63aa.js:1547) 
at dispatchHooks (index-91ef63aa.js:1324) 
at Array.dispatch (index-91ef63aa.js:1292) 
at consume (index-91ef63aa.js:2747) 
at flush (index-91ef63aa.js:2800)

The error seems to be caused by a comment node being processed when relocating the slot content.

Expected behavior:
It would not throw an exception... :)

Steps to reproduce:

1. clone https://github.com/Esri/calcite-components/
2. check out the 1121/radio-mapviewer-issues branch.
3. run npm i && npm start
4. open <dev server url>/demos/maquette-playground.html (make sure dev console is open)

Other information:
Additional info:

• calcite-radio-button (used in the repro case)
• the following build flags are enabled:

extras: { 
  appendChildSlotFix: true, 
  cssVarsShim: true, 
  dynamicImportShim: true, 
  safari10: true, 
  scriptDataOpts: true, 
  shadowDomShim: true, 
  slotChildNodesFix: true 
}

[kensodemann]

Using the sample is the repo provided by the Stencil user, the issue appears to manifest on this line of code with the content of the childNode being <!---->.

More info from the user:

the error occurs whenever there is a single text node. The following maquette snippet will produce the error:

h("calcite-radio-button", ["foo"])

Adding more than one works fine:

h("calcite-radio-button", ["foo", "bar"])

[eriklharper]

Hi @kensodemann! I discovered and reproduced this bug originally. Let me know if you/the team have any questions when you start to take a look at this.

[eriklharper]

I reproduced this bug here with stencil-component-starter: https://github.com/eriklharper/stencil-maquette-bug. Just clone that, npm i && npm start to see the bug. Ignore the steps to reproduce up above since the maquette playground html file has been removed from that branch.

[eriklharper]

I can't seem to get my local build of Stencil working with the 1121/radio-mapviewer-issues branch. I'm getting lots of TypeScript errors that don't occur when using the npm build of Stencil (same versions and everything).

@eriklharper are you able to provide a more reduced test case so I can test against this problem locally?

https://github.com/ionic-team/stencil/issues/2758#issuecomment-738278819
https://github.com/eriklharper/stencil-maquette-bug

[claviska]

@eriklharper Just saw that after posting my comment...thanks, I'll take another look!