-
Notifications
You must be signed in to change notification settings - Fork 632
Description
Error: Objects are not valid as a React child (found: object with keys {code, message}).
If you meant to render a collection of children, use an array instead.
The Problem:
The error "Objects are not valid as a React child" was occurring because:
Inconsistent Error Format: The signUp and signIn actions in actions.ts were returning errors in two different formats:
Object format: { error: { code: "AUTH_ERROR", message: "..." } } (lines 23-27 and 62-66)
NextFaster/src/app/(login)/actions.ts
Lines 23 to 27 in 515a78e
| error: { | |
| code: "AUTH_ERROR", | |
| message: "Too many signups. Try again later", | |
| }, | |
| }; |
NextFaster/src/app/(login)/actions.ts
Lines 62 to 66 in 515a78e
| error: { | |
| code: "AUTH_ERROR", | |
| message: "Too many attempts. Try again later", | |
| }, | |
| }; |
String format: { error: "Invalid username or password..." } (other error cases)
React Rendering Issue: The LoginForm component in auth.client.tsx was trying to render state?.error directly as a React child (line 79), but when error was an object, React couldn't render it.
NextFaster/src/app/auth.client.tsx
Lines 78 to 79 in 515a78e
| {state?.error && ( | |
| <div className="text-sm text-red-500">{state.error}</div> |
