fix(frontend): $derived-Syntaxfehler in events/[eventId]/+page.svelte (state_invalid_placement) #194

New issue

Closed

opened 2026-07-02 22:22:11 +00:00 by niboer · 0 comments

niboer commented

2026-07-02 22:22:11 +00:00

Owner

Einordnung

Position: 1 (Phase A, parallel zu #196+#197)
Benötigt: — (keine)
Wird benötigt von: #193 (ActionMenu betrifft gleiche Datei, aber unabhaengig)

Beschreibung

In frontend/src/routes/app/events/[eventId]/+page.svelte:70 verursacht eine falsche $derived-Syntax einen Compiler-Fehler:

`$derived(...)` can only be used as a variable declaration initializer,
a class field declaration, or the first assignment to a class field
at the top level of the constructor.

Fehlerquelle:

let uninvitedPersonIds = $derived(() => {
    const guestIds = new Set(guests.map((g: Guest) => g.personId));
    return persons.filter((p: Person) => !guestIds.has(p.personId)).map((p: Person) => p.personId);
})();

Problem

$derived(expr) von Svelte 5 erwartet einen Ausdruck (expr), der automatisch reaktiv ist. Eine Pfeilfunktion () => { ... } wird als Funktionswert behandelt, nicht als deren Rueckgabewert.
Das sofortige Aufrufen $derived(...)() macht den Wert statisch — Aenderungen an guests oder persons loesen keine Neuberechnung aus.
Der Svelte 5 Compiler erkennt dies als state_invalid_placement und wirft einen Fehler.

Loesung

Ersetzen durch $derived.by() — den korrekten Svelte 5 Mechanismus fuer mehrzeilige derived-Ausdruecke:

let uninvitedPersonIds = $derived.by(() => {
    const guestIds = new Set(guests.map((g: Guest) => g.personId));
    return persons.filter((p: Person) => !guestIds.has(p.personId)).map((p: Person) => p.personId);
});

Korrekte Verwendung von `$derived` im Projekt (Referenz)

data-table.svelte verwendet $derived.by(() => { ... }) korrekt (Z. 39-49)
dashboard/+page.svelte verwendet einfaches $derived(expr) korrekt (Z. 15-19)

Auswirkungen

Dieser Bug blockiert das Oeffnen jedes Events im Frontend mit einem Internal Server Error. Kritisch.

Dateien

frontend/src/routes/app/events/[eventId]/+page.svelte:70-73

## Einordnung - **Position:** 1 (Phase A, parallel zu #196+#197) - **Benötigt:** — (keine) - **Wird benötigt von:** #193 (ActionMenu betrifft gleiche Datei, aber unabhaengig) ## Beschreibung In `frontend/src/routes/app/events/[eventId]/+page.svelte:70` verursacht eine falsche `$derived`-Syntax einen Compiler-Fehler: ``` `$derived(...)` can only be used as a variable declaration initializer, a class field declaration, or the first assignment to a class field at the top level of the constructor. ``` Fehlerquelle: ```typescript let uninvitedPersonIds = $derived(() => { const guestIds = new Set(guests.map((g: Guest) => g.personId)); return persons.filter((p: Person) => !guestIds.has(p.personId)).map((p: Person) => p.personId); })(); ``` ### Problem 1. `$derived(expr)` von Svelte 5 erwartet einen **Ausdruck** (`expr`), der automatisch reaktiv ist. Eine Pfeilfunktion `() => { ... }` wird als Funktionswert behandelt, nicht als deren Rueckgabewert. 2. Das sofortige Aufrufen `$derived(...)()` macht den Wert **statisch** — Aenderungen an `guests` oder `persons` loesen **keine Neuberechnung** aus. 3. Der Svelte 5 Compiler erkennt dies als `state_invalid_placement` und wirft einen Fehler. ### Loesung Ersetzen durch `$derived.by()` — den korrekten Svelte 5 Mechanismus fuer mehrzeilige derived-Ausdruecke: ```typescript let uninvitedPersonIds = $derived.by(() => { const guestIds = new Set(guests.map((g: Guest) => g.personId)); return persons.filter((p: Person) => !guestIds.has(p.personId)).map((p: Person) => p.personId); }); ``` ### Korrekte Verwendung von `$derived` im Projekt (Referenz) - `data-table.svelte` verwendet `$derived.by(() => { ... })` korrekt (Z. 39-49) - `dashboard/+page.svelte` verwendet einfaches `$derived(expr)` korrekt (Z. 15-19) ### Auswirkungen Dieser Bug blockiert das Oeffnen jedes Events im Frontend mit einem Internal Server Error. Kritisch. ## Dateien - `frontend/src/routes/app/events/[eventId]/+page.svelte:70-73`

niboer added this to the MS-REST: Restliche Aufgaben milestone

2026-07-02 22:22:11 +00:00

niboer added the

component/frontend

prio/high

type/bug

labels

2026-07-02 22:22:11 +00:00

niboer referenced this issue from a commit

2026-07-03 14:13:08 +00:00

fix(frontend): $derived-syntax korrigiert in events/[eventId]/+page.svelte

niboer closed this issue