Skip to content

[Feature Request]: Add "use client" directive to components that need it when rendered under RSC #3346

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.

Sign up for GitHub

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

Jump to bottom
Open
2 tasks done
TrevorBurnham opened this issue Mar 12, 2025 · 1 comment
Open
2 tasks done

[Feature Request]: Add "use client" directive to components that need it when rendered under RSC #3346

TrevorBurnham opened this issue Mar 12, 2025 · 1 comment
Assignees
@taheramr
Labels
enhancement New feature or request

Comments

@TrevorBurnham
Copy link

Description

I'd like to revive the discussion from #1106.

When that issue was created, React Server Components were an experimental technology. Today the situation is different. The official React docs on the "use client" directive states, under the heading "Using third-party libraries":

If these libraries have been updated to be compatible with React Server Components, then they will already include 'use client' markers of their own, allowing you to use them directly from your Server Components. If a library hasn’t been updated, or if a component needs props like event handlers that can only be specified on the client, you may need to add your own Client Component file in between the third-party Client Component and your Server Component where you’d like to use it.

Indeed, the Cloudscape docs seem to acknowledge the need for the 'use client' directive when consuming Cloudscape components, as you see in the App layout example.

I've spun up a CodeSandbox to demonstrate the issue: https://codesandbox.io/p/devbox/ckktyz I've created a new Next.js 14 app (not Next.js 15 because Cloudscape doesn't support React 19 yet) and dropped in the App layout example. It works fine (after adding a fix for the hydration error), but if you remove "use client" you'll get an error from trying to render the I18nProvider:

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component

It would be significantly more convenient for folks using Cloudscape with Next.js or other frameworks that support React Server Components if I18nProvider (and all other Cloudscape components that can't run as server components) had the "use client" directive themselves, allowing them to be used directly from server components. That way, devs could take full advantage of RSC without having to add an extra wrapper component between their page and Cloudscape:

// layout.tsx
export default function Layout({children}) {
  return <html>
    <body>
      <I18nProvider>{children}</I18nProvider>
     </body>
  </html>;
}

// page.tsx using RSC patterns
export default async function MyRSCPage() {
  const data = await fetchSomeData();
  return <AppLayout {/* props based on data... */ />;
}

The project eslint-plugin-react-server-components might be helpful for automating the task of adding "use client" to components that need it.

Code of Conduct
@TrevorBurnham TrevorBurnham added the enhancement New feature or request label Mar 12, 2025
@TrevorBurnham TrevorBurnham mentioned this issue Mar 12, 2025
Closed
2 tasks
@taheramr taheramr self-assigned this Mar 21, 2025
@johannes-weber
Copy link
Member

Hi @TrevorBurnham , thank's for reaching out! This feature is on our radar. We can't confirm a timeline yet, but will keep you updated when it's ready.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@taheramr taheramr

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@TrevorBurnham @johannes-weber @taheramr