Error on /design page

[pohlipit23]

Here is the error output from the /design page.

Unexpected Application Error!
Objects are not valid as a React child (found: object with keys {fontFamily, weights, source}). If you meant to render a collection of children, use an array instead.
Error: Objects are not valid as a React child (found: object with keys {fontFamily, weights, source}). If you meant to render a collection of children, use an array instead.
at throwOnInvalidObjectTypeImpl (http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=7ef36862:4598:15)
at throwOnInvalidObjectType (http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=7ef36862:4606:13)
at reconcileChildFibersImpl (http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=7ef36862:5217:13)
at http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=7ef36862:5237:35
at reconcileChildren (http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=7ef36862:7182:53)
at beginWork (http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=7ef36862:8701:104)
at runWithFiberInDEV (http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=7ef36862:997:72)
at performUnitOfWork (http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=7ef36862:12561:98)
at workLoopSync (http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=7ef36862:12424:43)
at renderRootSync (http://localhost:3000/node_modules/.vite/deps/react-dom_client.js?v=7ef36862:12408:13)
💿 Hey developer 👋

You can provide a way better UX than this when your app throws errors by providing your own ErrorBoundary or errorElement prop on your route.

[CasJam]

I haven't been able to replicate this.

What steps did you take before running into this on the /design page?

[pohlipit23]

Github Copilot fixed this for me. Below is what it found:

Progress: I updated DesignPage.tsx to avoid rendering objects as React children for both colors and typography, and restarted the dev server.

What I changed:

DesignPage.tsx:
Convert color entries that are objects to strings (prefer value or 500 scale) before passing to ColorSwatch.
ColorSwatch accepts #hex or named keys.
Added renderTypographyValue() and use it for heading, body, and mono so fontFamily objects aren't rendered directly.
Verify locally: