Skip to content

bug: incompatible value of this used for getters/setters during SSR hydration #6749

@kyleMessnerLillyContractor

Description

Prerequisites

Stencil Version

4.43.5

Current Behavior

The following code produces a type error

@Prop()
get value(): number {
  return this.internalValue;
}
set value(newValue: number) {
  this.internalValue = this.formatValue(value);
}

This line

origSetter.apply(elm, [attrPropVal]);
calls apply with the proxy host element which, in the examples case, does not have a reference for this.formatValue. The result is that the setter tries to execute undefined like a function. This error seems to result in elements hydrating with templates that have nothing from the component's render method.

Expected Behavior

Referencing things on the this object does not result in in SSR hydration producing incorrect template HTML

System Info

System: node 22.22.3
    Platform: darwin (25.5.0)
   CPU Model: Apple M4 Pro (12 cpus)
    Compiler: /Users/***/***/node_modules/.pnpm/@stencil+core@4.43.5/node_modules/@stencil/core/compiler/stencil.js
       Build: 1779994050
     Stencil: 4.43.5 🍐
  TypeScript: 5.8.3
      Rollup: 4.44.0
      Parse5: 7.2.1
      jQuery: 4.0.0-pre
      Terser: 5.37.0

Steps to Reproduce

@Prop()
get value(): number {
  return this.internalValue;
}
set value(newValue: number) {
  this.internalValue = this.formatValue(value);
}

then render it using the @stencil/ssr hydrate module and check the response back from the server.

Code Reproduction URL

n/a

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Bug: ValidatedThis PR or Issue is verified to be a bug within Stencil

    Type

    No fields configured for Bug.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions