fix(immich): pass icon as ReactNode, not a component function (fixes startup error on Immich pages) #41
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "fix/immich-sync-button-icon-prop"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Symptom: the Immich pages (
/immich/personen,/immich/dubbelen) show the generic “Startup fout / App kon niet starten” screen. That screen points at/api/ready, but/api/readyreturns 200 (DB is fine) — a red herring.Cause: both pages are Server Components and passed
icon={RefreshCw}— a lucide component function — to the client componentImmichSyncButton. Passing a function across the Server→Client boundary throws at render: “Functions cannot be passed directly to Client Components” (digest 1109689143), which surfaces as the startup-error fallback.Fix: change
ImmichSyncButton'siconprop fromLucideIcontoReactNodeand render the passed element; call sites now passicon={<RefreshCw />}(a serializable element). Behaviour is unchanged — the pending state still swaps to a spinner.Verified: lint clean (0 errors);
npm run buildcompiles successfully; the button's own test passes; full suite is 112 pass / 36 fail identical tomain(pre-existing stale-scanner / DB-dependent test failures, unrelated to this change).Note for later (separate): the test suite is substantially red on
main(36/148) — mostly leftover scanner tests that the library rebuild should have removed, plus tests needing a live DB.The Immich personen/dubbelen pages (Server Components) passed icon={RefreshCw} — a lucide component *function* — to the client component ImmichSyncButton. Passing a function across the RSC boundary throws at render: 'Functions cannot be passed directly to Client Components' (digest 1109689143), so the Immich pages showed the generic startup-error screen (/api/ready was 200 — not a DB issue). Change ImmichSyncButton's icon prop to ReactNode and render the passed element; call sites now pass icon={<RefreshCw />} (a serializable element). Behaviour unchanged; pending state still swaps to a spinner.