next-translate-plugin icon indicating copy to clipboard operation
next-translate-plugin copied to clipboard

Translation is broken when using client component in root layout

Open aszx87410 opened this issue 1 year ago β€’ 3 comments

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

aszx87410 avatar Sep 01 '23 01:09 aszx87410

+1 I have the same issue

kkak10 avatar Oct 13 '23 10:10 kkak10

Any update on this one?

kristian240 avatar Apr 23 '24 11:04 kristian240

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.

kristian240 avatar Apr 29 '24 21:04 kristian240