Unsupported Server Component type: undefined / next js 13

Question

I ran into some weird behavior in Next js 13 while trying to do a simple action. I have prepared the most simple example showing the problem. I hope you can help me figure out why this is happening.

There are 3 components.

page:

import {Container} from '../components/Container'
export default function index() {
  return (
    <Container>
        <Container.Window>
            <h1>12345</h1>
        </Container.Window>
    </Container>
  )
}

Container:

'use client';
import { Window } from './Window';

export const Container = ({ children }) => {
  return children;
};

Container.Window = Window;

Window:

"use client";
export const Window = ({children})=>{
  return children
}

Page server component. The Container and Window components are client-side. Container imports and exports Window.

I am getting this error:

"Unsupported Server Component type: undefined"

• Import the Window component separately.
  Works, no errors

• Make the Container component a server component.
  Works, no errors

• Make the page component client-side.
  Works, no errors

But I think the first option is the most convenient. Would love to make it work

https://stackblitz.com/edit/nextjs-fwuztm?file=app%2Fpage.js,components%2FContainer.js,components%2FWindow.js - example

Answer 1

I had the same issue. I was able to fix by changing the named export to a default export, and importing without the braces.

Try changing:

export const Window = ({children})=>{

to

const Window = ({children})=>{
...
}
export default Window;

Hopin that helps!

Answer 2

Update (for named imports)

As per Jason Frank's comments, you can keep the 'use client' at the component level without the need to mark all components as client side in the index.ts. This allows you to keep using named imports whilst keeping a folder of mixed server/client components.

// Client Side Component
'use client'

export default function ClientCard() {
  return <p>client side card here</p>
}

// Server Side Component
export default function ServerCard() {
  return <p>server side card here</p>
}

// index.ts
export { default as ClientCard } from './client-card';
export { default as ServerCard } from './server-card';

---

Not too sure if this is related but ran into a similar issue.

'use client'

export function Card() {
  return <p>card here</p>
}

// index.ts
export * from './card'

The above threw errors when attempting to import via import { Card } from './card.

Adding 'use client' to the index.ts seemed to fix the issue.

// index.ts - FIXED
'use client'

export * from './card'