next-translate-plugin
next-translate-plugin copied to clipboard
Translation is broken when using client component in root layout
What version of this package are you using?
2.5.3
What operating system, Node.js, and npm version?
- MacOS 13.2.1
- Node.js v20.0.0
- 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:
- clone the project above
-
npm i
-
npm run dev
- open
http://localhost:3001/en
- Hard refresh
- Open devtool
- Hard refresh again
The root cause is probably because some server component quirks which makes the component tree weird, here is the screenshot:
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
+1 I have the same issue
Any update on this one?
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.