[Jan0707]

The bug

/kommt-bald and /api/cocktails logged Hydration completed but contains mismatches. in production builds, identically on main. The server never rendered the JSON tree.

vue-json-pretty has no exports map, so Node resolves it to its UMD build (lib/), and Nitro left it external. In the production server, import VueJsonPretty from 'vue-json-pretty' then resolves to { default: Tree }: a wrapper with no render function. Vue renders that as an empty comment (<!---->). The client gets the real component from Vite, builds a div, and hydration fails. A dev build is clean because Vite handles the interop there.

How it was found

• The dev build logged nothing.
• A production build with __VUE_PROD_HYDRATION_MISMATCH_DETAILS__ temporarily defined named the node: rendered on server: comment, expected on client: div.
• The server HTML contained no vjs-tree at all.
• Rendering the library directly with vue/server-renderer worked. Importing it from inside .output/server showed the wrapper.

The fix

build.transpile: ['vue-json-pretty'] in nuxt.config.ts. Vite then bundles the library into the server build and unwraps the default export.

Verification

• Server HTML: now contains the tree (vjs-tree 6× on /kommt-bald, 74× on /api/cocktails).
• Hydration: the details flag reports no mismatch, and a normal production build logs nothing.
• Client tree: unchanged, at 38 and 1,699 characters of text as before.
• Gates:
  • prettier:check clean. lint 0 errors, 168 warnings (unchanged since Speaker Portal: Profil-Update bei bestehenden Speaker:innen anfragen #277).
  • test 335/335. Ratchet 226. build exit 0, no new warnings.
  • Smoke 18/18 in three consecutive runs. An earlier run failed on CMS 503/504 responses in the server log, unrelated to this change.

Plan updates

• Auth console.logs: this entry was already fixed in 1edd2f2 (2026-08-04) and never ticked off. Now ticked off.
• Fathom: the production check after Fathom: correct page attribution, track production only #279 is recorded as confirmed, with a note to hard-reload before checks like this.
• Hydration: this fix, plus a general warning that Vue component libraries resolving to CJS/UMD in Node can fail the same way while passing every gate.

🤖 Generated with Claude Code

https://claude.ai/code/session_01RE7Gq8fzzVAfBahzvcUqTP

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
programmierbar-website	Ready	Preview	Oct 20, 2026 3:26pm UTC

[chatgpt-codex-connector]

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-20T15:27:08.151386Z	2ee1f40	PR opened

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

[Copilot]

🟢 Approval recommended

The narrowly scoped fix matches the diagnosed import issue, with documented production-build verification and no identified blockers.

No open issues 🎉

What changed in this PR

Fixes PrettyJSON’s production hydration mismatch by bundling vue-json-pretty for server rendering.

Changes:

• Adds vue-json-pretty to Nuxt’s transpilation configuration.
• Documents the fix and closes stale auth-logging and Fathom verification entries.

File	Description
nuxt-app/​nuxt.config.ts	Bundles the JSON viewer to correct server-side import handling.
docs/​dependency-upgrade-plan.md	Records hydration diagnosis, verification, and completed backlog work.

_{Review effort: Balanced}