search

opral / inlang-paraglide-js

Tree-shakable i18n library build on the inlang ecosystem.
https://inlang.com/m/gerre34r/library-inlang-paraglideJs
48 stars 1 forks source link

next 14 app router hydration mismatch #195

Closed samuelstroschein closed 2 months ago

samuelstroschein commented 2 months ago

From discord

Hi guys, nice to meet you all. I need some help regarding paraglide next.js. Context: So I have a project with next 14 (app router) and I'm using paraglide. I've followed the tutorial on https://inlang.com/m/osslbuzt/paraglide-next-i18n/get-started and the translation is working properly. My source language is pt-br and I have the following supported languages: "pt-br", "en-US", "es-ES" Problem: when I load my localhost:3000, the page is in pt-br as expected, but when I navigate to localhost:3000/en-US or localhost:3000/es-ES I receive hydration errors (images). Also, I'm not using any browser extensions. I've searched a lot but couldn't figure out how to solve this =/ I'll be very glad if someone could help. Thanks

Repo: https://github.com/luizlevindiniz/lp-fixes-inlang (how to reproduce: yarn install and yarn run dev -> open localhost:3000 -> open browser console -> assure no errors are showing -> navigate to localhost:3000/en-US -> check the console again) (edited)

image.png

image.png

luizlevindiniz commented 2 months ago

Hi all, I'm the one who sent this issue. If someone could aid me I would be very very grateful.

samuelstroschein commented 2 months ago

Hi @luizlevindiniz, I am taking over paraglide js from loris this week.

Do you still face this issue?

luizlevindiniz commented 2 months ago

Hi Samuel, how are you? No, we manage to solve this issue. The problem was that we wore rendering a component via mapping. After change the map to a hard-coded constants the error vanished.