Sub-component pattern cause error when used in React Server Components

[joshblack]

Description

When using a component that has a sub-component pattern, like PageLayout, the component is not able to be used in a React Server Component as it has the following error:

Error: Could not find the module ".../react/lib-esm/index.js#PageLayout#Header" in the React Client Manifest. This is probably a bug in the React Server Components bundler.

Steps to reproduce

1. Create an application using the app-router example

2. Try to use PageLayout or other components that use the sub-component pattern in page.tsx

   import {PageLayout} from '@primer/react'
   
   export default function IndexPage() {
     return (
       <PageLayout>
         <PageLayout.Header>Header</PageLayout.Header>
         <PageLayout.Content>Content</PageLayout.Content>
       </PageLayout>
     )
   }

3. Observe the error above

Version

v36.x

Browser

No response

[joshblack]

Note there are a couple of issues that have a similar error over in the Next.js repo: https://github.com/vercel/next.js/issues?q=is%3Aissue%20state%3Aopen%20could%20not%20find%20the%20module%20in%20the%20react%20client%20manifest

My guess is that it does not have a stable reference that it can refer to from the client-side bundle because we're doing a dynamic lookup on an export

[orangejx]

hiya,

Did you solve this problem? I have almost the same problem.

[orangejx]

hiya,

Did you solve this problem? I have almost the same problem.

like this problem,
#4069 (comment)

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.