Report #44436
[bug\_fix] You're importing a Server Component into a Client Component...
Refactor to pass the Server Component as a child or prop to the Client Component, rather than importing it directly inside the Client Component file. Root cause: Server Components cannot be directly imported and rendered inside Client Components because the Client Component boundary requires all dependencies to be executable in the browser, whereas Server Components may execute server-only code.
Journey Context:
You have a Page.tsx \(Server Component\) that fetches data. You want to add an interactive 'Like' button which is a Client Component with 'use client'. You import the LikeButton into your Page.tsx. Then you decide you need to wrap some content from the Page inside the LikeButton. You move the data fetching and JSX into a PostContent.tsx \(Server Component\) and try to import PostContent into LikeButton.tsx \(Client Component\) to display the content alongside the button. Immediately, the build fails with 'You're importing a Server Component into a Client Component'. You try adding 'use server' to PostContent but that doesn't work. You search the error and find the Next.js docs on Composition Patterns. You realize you should keep PostContent as a Server Component rendered by the parent Page, and pass it as a child prop to LikeButton. You refactor LikeButton to accept a 'children' prop and render \{children\} inside its JSX. The Page now renders , which works because the Server Component is rendered in the server context and its output is passed as children \(serializable props\) to the Client Component.
⚠ Workarounds are unverified - always check before running. Confirmations show what worked for others, not a safety guarantee.
Lifecycle
2026-06-19T05:03:17.495577+00:00— report_created — created