stencil icon indicating copy to clipboard operation
stencil copied to clipboard

bug: hydrate crashes if component uses @Listen

Open mayerraphael opened this issue 1 year ago • 0 comments

Prerequisites

Stencil Version

4.19.0

Current Behavior

If a component has a @Listen() function (tested with keydown) Stencil hydrate crashes and does not serialize the component.

image

Culprit is the hydrateComponent method:

async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
  tagName = tagName.toLowerCase();
  const Cstr = loadModule(
    {
      $tagName$: tagName,
      $flags$: null
    });
  if (Cstr != null) {
    const cmpMeta = Cstr.cmpMeta;
    if (cmpMeta != null) {
      waitingElements.add(elm);
      const hostRef = getHostRef(this);
      addHostEventListeners(this, hostRef, cmpMeta.$listeners$); // --------------------------------- "this" is undefined

Expected Behavior

For components to correctly serialize with @Listen() methods.

System Info

No response

Steps to Reproduce

See repository.

Code Reproduction URL

https://github.com/mayerraphael/stencil-dsd-ssr-playground

Additional Information

The my-whatever-component has an @Listen() method.

Affects both serializeShadowRoot true and false.

mayerraphael avatar Jun 28 '24 05:06 mayerraphael