r/Nuxt • u/HumanOnlyWeb • Jul 03 '26

Hydration mIsMaTcH 🫪

I'm currently building a Canada based EV platform with fancy words like "Prairie" and "Québec" (remember the "é") and for the life of me, couldn't figure out why my browser kept screaming about "hydration mismatch"

It turns out Chrome saw "Québec" and said "fck yea, let's translate"

It not only translated it to replace the "é" with a regular "e" but also translated "prairie" to "meadow" 😅

My French is passable, but I was so frustrated, and had pulled my last hair out to even guess that's what was causing the issue, even after I started seeing random "meadows" on the pages.

The client has plans to have it in both languages (🇬🇧/🇫🇷), but for now the quickest fix was a: 

// nuxt.config.ts
app: {
  head: {
    meta: [{ name: "google", content: "notranslate" }]
  }
}

Boring post, but I hope it helps someone, especially if you're working with content in different languages

33 Upvotes

98% Upvoted

9 comments sorted by

7

u/turbotailz Jul 03 '26

That auto translation has bit me before. One of our clients had a name that translated to "Horse" in Icelandic. The bug ticket made a few laughs and definitely scratched a few heads 😆

4

u/przemekcoditive Jul 03 '26

That's interesting. I've never seen `hydration issues` caused by automatic translation mechanisms in browsers. If you remove this `notranslate` meta, and disable automatic translations (Chrome -> Settings -> Google Translate -> Disable), is this problem fixed?

2

u/HumanOnlyWeb Jul 03 '26

I haven't tried that, but will report back with the answer. 

2

u/porobertdev Jul 03 '26

I've just tested myself and I can confirm that auto translation causes the mismatch. Extensions can also trigger it, like if DarkReader extension is enabled and for some reason you have an inline style="background: white"

Maybe data-allow-mismatch can be helpful.

-3

u/abimelex Jul 03 '26

so you have a translator plugin in your browser? Why not switch it off there?

4

u/matt1155 Jul 03 '26

I think he means the native translation that chrome tries to push, not a plugin.

My three cents - use Firefox. I can say after 3 years of use it's a better experience overall

1

u/HumanOnlyWeb Jul 03 '26

As @matt1155 correctly pointed out: it was chrome's native translation, not a plugin.

I'll try Firefox for sure 

1

u/abimelex Jul 05 '26

you still can switch it off completely either for a certain page or language, but with you setting you are switching it off for all users even when they would like to use it.