search

aralroca / next-translate

Next.js plugin + i18n API for Next.js 🌍 - Load page translations and use them in an easy way!
MIT License
2.66k stars 206 forks source link

No formatter function `interpolation.format` client-side (with App Router) #1226

Open naesawork180 opened 1 month ago

naesawork180 commented 1 month ago

What version of this package are you using? 2.6.2

What operating system, Node.js, and npm version? MacOS Sonoma node 20.11.0 npm 10.2.4 next 14.2.7

What happened? Format function does not exist in the AppDirI18nProvider client-side (under config.interpolation.format), so no formatting occurs for client components. A hydration error also occurs because the formatter function exists and works when component is first server rendered, but then does not work when client rendered - which is the end result.

My specific example is a date formatter as seen in the screenshot below: image

When checking the AppDirI18nProvider in the dev console: image

What did you expect to happen? When using App Router, the interpolation.format function exists in the AppDirI18nProvider in the browser and format function works for client components.

The format function already exists when using page router (as seen in image below). We want the same function for app router. image

aralroca commented 1 month ago

mm, it looks like a serialization error since the functions are not serialized, just as I see that the loadLocaleFrom does not come out in the client either. In the case of the loadLocaleFrom it is well since it is loaded only in the server in the loader, but let's see how we solve the formatters issue. Thanks for reporting it.