Skip to content

$derived causes SSR error when referencing a property with the same name as a nested reactive state #16050

Closed
@legendSabbir

Description

@legendSabbir

Describe the bug

When using $derived to reference a nested reactive state (like this.icon.current) and the local property is named the same (current), it causes an error during server-side rendering (SSR). Renaming the local property to something else resolves the issue.

Reproduction

class Hello {
  current = $state([]);
}

class World {
  icon = new Hello();
  
  // Causes SSR error if property name is "current". renaming variable name solves error
  current = $derived({
    icon: this.icon.current,
  });

  constructor() {
    // Triggers the SSR issue
    this.icon.current = ["Hello", "World"];
  }
}

const world = new World();

Logs

//

System Info

//

Severity

annoyance

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions