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?
