Some keys not translating in server render pass in a select few components, hydration error

[genox]

Hi all,

Most probably I am doing something wrong, but I can't figure it out. :-)

I have a working react router v7 project and translations work fine - only in some isolated places do I encounter a hydration error where on the server, only the translation key is rendered and the client replaces the key with it's value on load.

On client side navigation, everything works fine and there are no errors. Once I hard-reload the page, I get a bunch of hydration errors like so:

Warning: Text content did not match. Server: "route.routeA.name" Client: "Route A"

But only for keys in specific components.

In a few isolated components, the server side translation don't seem to run or be applied. What factors could cause this behaviour? The components are not deeply nested at all, neither are the keys.

Happy for any suggestions that could help track this down.

Thank you.

[sergiodxa]

Try to create a minimal reproduction repo, ensure that the namespaces are being correctly loaded server-side.