Unable to use Nested Dropdown Components in React Server Components

[cwoolum]

Prerequisites

• I am using the correct version of React-Bootstrap for my version of Bootstrap
• I have searched for duplicate or closed issues
• I have read the contributing guidelines

Describe the bug

#6646 updated the components so they always compiled with use client. This works well for top level components but for the nested child , this seems to fail with the following error.

- error node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-server.edge.development.js (1684:8) @ attemptResolveElement
- error Error: Unsupported Server Component type: undefined
    at stringify (<anonymous>)

I am using a basic dropdown button inside of a server page.

 <DropdownButton
                  id="dropdown-item-button"
                  title="Dropdown button"
                >
   <Dropdown.ItemText>Dropdown item text</Dropdown.ItemText>
   <Dropdown.Item as="button">Action</Dropdown.Item>
   <Dropdown.Item as="button">Another action</Dropdown.Item>
   <Dropdown.Item as="button">Something else</Dropdown.Item>
</DropdownButton>

If I remove Dropdown.ItemText and Dropdown.Item, the component renders with no errors.

Expected behavior

I would expect the entire dropdown to render on the client side with no errors.

To Reproduce

1. Create a new NextJS app.
2. Add the following code to the main page.

 <DropdownButton
                  id="dropdown-item-button"
                  title="Dropdown button"
                >
   <Dropdown.ItemText>Dropdown item text</Dropdown.ItemText>
   <Dropdown.Item as="button">Action</Dropdown.Item>
   <Dropdown.Item as="button">Another action</Dropdown.Item>
   <Dropdown.Item as="button">Something else</Dropdown.Item>
</DropdownButton>

3. Attempt to load the page

Reproducible Example

https://codesandbox.io/p/sandbox/wonderful-thunder-np5s83

Screenshots

What operating system(s) are you seeing the problem on?

Windows, Linux

What browser(s) are you seeing the problem on?

Chrome

What version of React-Bootstrap are you using?

v2.9.0-beta.0

What version of Bootstrap are you using?

5.3.0

Additional context

No response

[kyletsang]

Upstream issue: vercel/next.js#51593