bug: hydrate crashes if component uses @Listen

[mayerraphael]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

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.

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.

[christian-bromann]

@mayerraphael thanks for raising this issue and helping us make Stencil better.

tested with keydown

Can you please describe how you did trigger the event? If I change the eventName to click , everything works fine when clicking on it.

[christian-bromann]

Actually after some more testing, I am able to reproduce this issue and can investigate/work on a solution.

[christian-bromann]

A bug fix has been proposed in #5877 and a dev release (4.19.1-dev.1719875079.a06f64c) confirmed that it fixes the double rendering in the provided reproduction case.