Skip to content

fix(avatar): mark Pharos as client-only via 'use client' banner#79

Merged
dgraciac merged 1 commit into
mainfrom
fix/avatar-use-client
May 12, 2026
Merged

fix(avatar): mark Pharos as client-only via 'use client' banner#79
dgraciac merged 1 commit into
mainfrom
fix/avatar-use-client

Conversation

@dgraciac
Copy link
Copy Markdown
Member

Summary

Avatar (D14) calls `createContext(...)` three times at module top level. Without a `"use client"` marker on the published bundle, Next.js evaluates the Pharos module during its RSC build-time analysis pass and crashes with:

```
TypeError: (0 , c.createContext) is not a function
at module evaluation
at instantiateModule (chunks/ssr/[turbopack]_runtime.js)
```

Observed in the first Alexandria adoption attempt of pharos-react 0.11.0 — page-data collection for `/[locale]/legal-and-privacy` (any route whose layout transitively imports an Avatar) fails the build.

Fix

Two coordinated changes:

  • `src/components/Avatar.tsx` carries `'use client';` at the top — visible intent in source. Vite / esbuild strip per-file directives during bundling, so this alone does not reach the published artifact, but it documents the requirement.
  • `vite.config.ts` emits `'use client';` as the bundle banner via `rollupOptions.output.banner`. This is what actually lands at the top of `dist/index.js` and stops Next.js from following the import into RSC analysis.

Trade-off

The whole library ships client-only, not just Avatar. Card / Separator (which have no hooks) lose server-render-ability as a side effect. Acceptable because:

  • Every React DS ships client-only today (MUI / Chakra / Radix / shadcn).
  • Nothing in pharos-react docs ever promised those atoms as server-safe.
  • Consumers were already using them inside client trees in Alexandria.

Quality

  • 136 tests pass (no behavioural change).
  • `pnpm typecheck`, `pnpm lint`, `pnpm format:check`, `pnpm build`, `pnpm verify:dist-types` all green.
  • Changeset added (`.changeset/avatar-use-client.md`) — patch bump → `0.11.1`.

Test plan

  • CI green.
  • After release: alexandria's Avatar adoption PR (in flight) bumps to `^0.11.1` and `next build` completes without the `createContext` crash.

🤖 Generated with Claude Code

`Avatar` (D14) calls `createContext(...)` three times at module top
level. Without a `"use client"` marker, Next.js evaluates the module
during its RSC build-time analysis pass and crashes with
`TypeError: (0 , c.createContext) is not a function` while collecting
page data — observed during the first Alexandria adoption attempt of
pharos-react `0.11.0`.

Two coordinated changes:

- `src/components/Avatar.tsx`: add `'use client';` at the top so the
  intent is visible in source. (Vite / esbuild strip per-file
  directives during bundling, so this alone does not reach the published
  artifact.)
- `vite.config.ts`: emit `'use client';` as the bundle banner via
  `rollupOptions.output.banner`. This is what actually lands at the top
  of `dist/index.js` and stops Next.js from following the import into
  RSC analysis.

The whole library shipping client-only matches what every React DS
does (MUI / Chakra / Radix / shadcn). Card / Separator lose
server-render-ability as a side effect — acceptable; nothing in the
docs ever promised them as server-safe.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@chromatic-com
Copy link
Copy Markdown

chromatic-com Bot commented May 12, 2026

Tip

All tests passed and all changes approved!

🟢 UI Tests: 67 tests unchanged
🟢 UI Review: 67 stories published -- no changes
Storybook icon Storybook Publish: 67 stories published

@dgraciac dgraciac merged commit f052ca8 into main May 12, 2026
10 checks passed
@dgraciac dgraciac deleted the fix/avatar-use-client branch May 12, 2026 01:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant