Next.js 13 - appDir - Error: Unsupported Server Component type: undefined

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro for Workstations
Binaries:
  Node: 18.12.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.0.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 106.0.5249.119 / Firefox Developer Edition 107.0b5

How are you deploying your application? (if relevant)

next start, Vercel (https://test-next-13-appdir.vercel.app/)

Describe the Bug

This issue only appears in dev mode

When I import a client component (the file has “use client” directive) from its exact location (let’s say ./src/components/Foo/Bar.tsx) and then use it in appDir, everything works fine, the component loads and there’s no issue.

But when I reexport it in ./src/components/Foo/index.ts with export * from "./Bar" and then import it in appDir like this: import { Bar } from "@/components", suddenly appDir stops working and then Next shows an issue like this: Error: Unsupported Server Component type: undefined (https://ibb.co/y01RPBv). I tried console.logging the component and what was logged is just undefined. The production build doesn’t have anything of the sort though, everything works just fine.

Thank you 😃

Expected Behavior

Everything should work just fine, the component should display as normal.

Link to reproduction

https://github.com/DuCanhGH/next-13-server-component-undefined

To Reproduce

• Run pnpm i
• Run pnpm dev
• Go to http://localhost:3000 and it should fail to load the page. I find it to be reproducible on both Chrome and Firefox

[DuCanhGH]

@awareness481 it really did, doesn’t seem to be neat, but it works for now 😄

[awareness481]

This is “solved” if you add the "use client" directive to the top export (src/components/index.ts in this case).