Nuxt Image (dependencies) causing hydration mismatch in production
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 1.5k
- Forks
- 331
- Avg merge
- 19h 52m
- Merged PRs (30d)
- 9
Description
Issue:
Only in production, a hydration mismatch is caused when calling an /api route. The image below shows the output in the console. See reproduction code for more details.
Stack:
Nuxt: 3.16
Node: 19.7.0 & 22.13.0
Code for reproduction:
https://stackblitz.com/edit/github-uqrob3fw
Steps:
- Nuxt Starter ^
npm i @nuxt/imagenpm upgrade<- This is the culprit.
Only after running npm upgrade does the issue begin. From this point on I don't know how to further diagnose this issue.
If its worth anything, @nuxt/fonts also caused this same issue before the release of 0.11.0.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction and the Nuxt Starter setup. Reproduce the production-only mismatch after installing @nuxt/image and running npm upgrade, then compare the dependency state before and after. Done means the dependency or update trigger is identified and the /api route no longer hydrates inconsistently.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- node.js, nuxt, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100