Repository: next.js
Issue: Next does not understand composition pattern for client side components
Labels: bug

### Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/component-composition-bug-next-yjv4fr?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clqv74jcp00072v6hla4q83x2%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clqv74jco00022v6h42vvpz5e%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clqv74jco00042v6h9g643nbc%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clqv74jco00062v6hvkxpocbz%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clqv74jco00022v6h42vvpz5e%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clqv74jco00012v6h3igb8brf%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522clqv74jco00022v6h42vvpz5e%2522%252C%2522activeTabId%2522%253A%2522clqv74jco00012v6h3igb8brf%2522%257D%252C%2522clqv74jco00062v6hvkxpocbz%2522%253A%257B%2522id%2522%253A%2522clqv74jco00062v6hvkxpocbz%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A3000%252C%2522id%2522%253A%2522clqv7nz5x00e02v6hbn15m634%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clqv7nz5x00e02v6hbn15m634%2522%257D%252C%2522clqv74jco00042v6h9g643nbc%2522%253A%257B%2522id%2522%253A%2522clqv74jco00042v6h9g643nbc%2522%252C%2522activeTabId%2522%253A%2522clqv7lsuq00bb2v6hqj9amurw%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clqv7lsuq00bb2v6hqj9amurw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clqv7lt0100k9effmb9lm3eun%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

### To Reproduce

Create project using npx create-next-app@latest
Options used in the cli:
- Typescript: yes
- Eslint: yes
- Tailwind CSS: no
- `src/` directory: yes
- App Router: yes
- customize the default import alias (@/*): no

Reproduction is simple, build a composite component and transform it into client side
```tsx
"use client"
import { ReactNode } from "react";

function Root({ children }: { children: ReactNode }): JSX.Element {
  return <header>{children}</header>;
}

export const Header = {
  Root: Root,
};
```
call composite component on a page
```tsx
export default function Home() {
  return (
    <main>
      <Header.Root>
         <div><h1>Hello</h1></div>
      </Header.Root>
    </main>
  );
}
```
If observed, when the composite component is executed on the server side, next does not present an error, only when executed on the side client

### Current vs. Expected behavior

server side components written with a composition pattern due to the wide variety of styles when declared as client side are not found by next
```tsx
import { ReactNode } from "react";

function Root({ children }: { children: ReactNode }): JSX.Element {
  return <header>{children}</header>;
}

export const Header = {
  Root: Root,
};
```
add flag "use client"
![image](https://github.com/vercel/next.js/assets/86755966/5827e9f5-a555-4002-b51f-6ba27166f506)

Expected:
Next must be able to understand the composition pattern for the client side

### Verify canary release

- [X] I verified that the issue exists in the latest Next.js canary release

### Provide environment information

```bash
Operating System:
  Platform: linux
  Arch: x64
  Version: #40~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Nov 16 10:53:04 UTC 2
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.5-canary.33
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A
```


### Which area(s) are affected? (Select all that apply)

Not sure

### Additional context

_No response_