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, https://github.com/primer/react/issues/4069#issuecomment-2041177333