-
-
Notifications
You must be signed in to change notification settings - Fork 17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Translation is broken when using client component in root layout #69
Comments
aszx87410
changed the title
Translation config is null when using client component in root layout
Translation is broken when using client component in root layout
Sep 1, 2023
+1 I have the same issue |
Any update on this one? |
4 tasks
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. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What version of this package are you using?
2.5.3
What operating system, Node.js, and npm version?
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: aszx87410/next-translate-bug-demo@491580f
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:
npm i
npm run dev
http://localhost:3001/en
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
The text was updated successfully, but these errors were encountered: