toLocaleString() inconsistent behavior is causing error #418 - hydration mismatch

[markoleavy]

On the company website I’m working on, we format product prices using toLocaleString() with the currency option.
We’ve noticed that the function behaves inconsistently depending on the environment when using the locale codes 'it-IT' or 'it'.
In local environments (dev, build or revalidation), and even on Vercel SSG builds, the number is formatted correctly - with a period used as the thousands separator (e.g. 1.000,00 €).
However, in cases where ISG or revalidation is used on Vercel, the period disappears from the rendered static HTML. This leads to a mismatch between the static HTML and the client-rendered version, resulting in a classic React hydration error.
As a temporary workaround, I’ve replaced 'it' with 'de', which formats the number in the same way but doesn't seem to cause this issue.
Has anyone experienced this before or found a more robust solution?

[icyJoseph]

I've experienced this with South African currency, nodejs/node#48120

Could this indicate that the environment running your revalidation, has a runtime with an issue, or not updated version?

Like, locally, I run node 22 with this:

Welcome to Node.js v22.14.0.
Type ".help" for more information.
> const number = 1000
undefined
> 
> // request a currency format
undefined
> console.log(
...   number.toLocaleString("it-IT", { style: "currency", currency: "EUR" }),
... );
1000,00 €

However, Node 20.11.1:

Welcome to Node.js v20.11.1.
Type ".help" for more information.
> const number = 1000
undefined
> 
> // request a currency format
undefined
> console.log(
...   number.toLocaleString("it-IT", { style: "currency", currency: "EUR" }),
... );
1.000,00 €
undefined
> 

Which is somewhat what you describe. I wonder if the revalidate environment is not running the proper Node.js version somehow.

Also Chrome does:

const number = 1000

// request a currency format
console.log(
  number.toLocaleString("it-IT", { style: "currency", currency: "EUR" }),
);
1.000,00 €

So is Node 22.14.x, somehow doing it wrong? 🤔 I'd say, check in other browsers and runtimes. Firefox, Safari and Bun gives me: 1000,00 € ~ for the versions I've got installed, but Chrome says 1.000,00 € ~ what a wonderful world.

[markoleavy]

You definitely got it right! I'm using Node 20.12.2 on my stack, and the same version is used when Vercel statically builds pages from the git repo.
But then runtime must be executed on some lambda/EC2 separated env, running Node 20.19.0 (you can chose the major version only on the setting page) .
Using version 20.19.0 on my local machine produces the exact same error.

I'm getting the numbers correctly displayed on both Chrome and Safari (17.3) where V8 and Nitro should take over, at least for client components.