Translation is broken when using client component in root layout

[aszx87410]

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: 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:

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:

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]

+1 I have the same issue

[kristian240]

Any update on this one?

[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.