react-intl with server side rendering

Question

Problem

Next js SSR environment is failing to detect the locale for some languages like "gr" and "rs" or "es". I'm using react-intl https://github.com/formatjs/formatjs

This is causing my browser to show this error on page load.

utils.js:19 Error: [@formatjs/intl Error MISSING_DATA] Missing locale data for locale: "sp" in Intl.NumberFormat. Using default locale: "en" as fallback

Muting the error

I managed to suppress the error by setting a default locale and handling with onError like so

function onError(e) {
    if (e.code = ReactIntlErrorCode.MISSING_DATA) {
    return
    }
}

<IntlProvider key={locale} locale={locale} messages={res[locale]} defaultLocale="en" onError={onIntlError}>

However this is not really a fix since now the server side render would be different than the actual requested page (which is baked in to the url). http://localhost/rs/page

---

Line in the library that fails

Specifically the line that fails in the library in SSR is this one as the locale returns an empty array.

else if (!Intl.NumberFormat.supportedLocalesOf(locale).length && onError) {

---

Hydrate error

Also if I use my onError trick above I naturally get a SSR hydrate error since it rendered in a different language on the server

"Warning: Text content did not match. Server: "Notifications" Client:
"Notificaciones"

---

How to I make nextjs ssr understand the locale?

Answer 1

You need Node 14+. Node 12- does not have all the locale data.