lingodotdev
Next.js compiler does not read `use client` directive from parent components
What's happening?
It's not possible to render a component without a use client directive is rendered inside a client component. a workaround is to add the directive to all components in tthe tree. However this is a bug in Lingo, as the Next.js documentation states the following:
You do not need to add the 'use client' directive to every file that contains Client Components. You only need to add it to the files whose components you want to render directly within Server Components.
Exact Reproduction Steps
- clone repo
- run app
- open browser console
Expected
No errors
Actual
A component was suspended by an uncached promise. Creating promises inside a Client Component or hook is not yet supported, except via a Suspense-compatible library or framework.
Screenshots/Videos
Thanks for reporting this. The behavior definitely seems inconsistent with the official Next.js docs — the use client directive shouldn’t need to be added to every nested component. This looks like a legitimate issue worth fixing.
Hi 👋 I'd like to work on this issue. From my investigation, the problems are:
core/component.tsx and core/attribute-component.tsx lack "use client" directives, but they're imported by client components and use React hooks (useMemo), causing Next.js to treat them as Server Components.
provider.tsx creates uncached promises in client components using the throw-promise pattern, which Next.js doesn’t allow.
My plan to fix this:
Add "use client" directives to core/component.tsx and core/attribute-component.tsx.
Refactor provider.tsx to use React 19's use hook instead of the throw-promise pattern.
Implement promise caching to ensure the same promise reference is reused for the same locale.
This should fix both the client/server component mismatch and the uncached promise Suspense errors while maintaining the same public API.
If my proposed approach looks good, could you please assign this issue to me? CC: @AleksandrSl, @gagan052
