image icon indicating copy to clipboard operation
image copied to clipboard

Nuxt Image (dependencies) causing hydration mismatch in production

Open nddr opened this issue 9 months ago • 1 comments

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.

Image

Stack: Nuxt: 3.16 Node: 19.7.0 & 22.13.0

Code for reproduction: https://stackblitz.com/edit/github-uqrob3fw

Steps:

  1. Nuxt Starter ^
  2. npm i @nuxt/image
  3. npm 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.

nddr avatar Mar 09 '25 19:03 nddr

I found this exact issue. Is there any way you found to fix it?

paper-krane avatar Mar 12 '25 15:03 paper-krane