search

aralroca / next-translate-plugin

Next-translate plugin for i18n in Next.js 🌍 - Load page translations and use them in an easy way!
MIT License
30 stars 17 forks source link

Translation is broken when using client component in root layout #69

Open aszx87410 opened 1 year ago

aszx87410 commented 1 year ago

What version of this package are you using?

2.5.3

What operating system, Node.js, and npm version?

  1. MacOS 13.2.1
  2. Node.js v20.0.0
  3. npm 9.6.4

What happened?

It's similar to the previous bug: Componet can't read translation context if use before children in layout.tsx - Next 13 app directory #7 but in the latest version of next-translate and next-translate-plugin

When I render a client component in the root layout(app/layout.tsx), the component is render without any language.

Here is the demo which I modified from the official example: https://github.com/aszx87410/next-translate-bug-demo You can see what's changed from this commit: https://github.com/aszx87410/next-translate-bug-demo/commit/491580f14e4a671eb96031d446755f1b96d3814c

Here is to video showing the error: https://www.youtube.com/watch?v=8oLWZTkCRZs&ab_channel=LiHu I am not sure why but it can only be reproduced when the DevTools is opened

I can reproduce in another private project without DevTools open, so I guess it shouldn't matter. Btw, my private project is using query string instead of Next.js built-in locale.

Reproduce steps:

  1. clone the project above
  2. npm i
  3. npm run dev
  4. open http://localhost:3001/en
  5. Hard refresh
  6. Open devtool
  7. Hard refresh again

The root cause is probably because some server component quirks which makes the component tree weird, here is the screenshot:

截圖 2023-09-01 上午8 50 57

Somehow there is no <AppDirI18nProvider> above <Heading> component, so the component can't get correct language and namespaces.

What did you expect to happen?

The page should render correct translation

Are you willing to submit a pull request to fix this bug?

Yes, if I know how to fix it

kkak10 commented 11 months ago

+1 I have the same issue

kristian240 commented 4 months ago

Any update on this one?

kristian240 commented 4 months ago

Hey @kkak10 @aszx87410 just to confirm my theory; what version of the TS are you using and do you have the following error while running build or dev commands?

Error: Debug Failure. Unhandled SyntaxKind: Unknown.