Exporting client components as an object throws an error.

[benton-droplab]

Verify canary release

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

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.2.0: Fri Nov 11 02:06:26 PST 2022; root:xnu-8792.61.2~4/RELEASE_ARM64_T8112
Binaries:
  Node: 18.12.1
  npm: 9.2.0
  Yarn: 1.22.19
  pnpm: N/A
Relevant packages:
  next: 13.1.1
  eslint-config-next: 13.1.1
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://github.com/benton-droplab/export-reproduction

To Reproduce

1. Create a client component exported as part of an object with the "use client" directive.
2. Import into a server component.\

Describe the Bug

Next throws the following error:

`Unhandled Runtime Error

Error: Unsupported Server Component type: undefined
Call Stack
attemptResolveElement
node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1387:8)
attemptResolveElement
node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1850:20)
resolveModelToJSON
node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1210:13)
stringify

stringify
node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (205:13)
processModelChunk
node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (2111:25)
retryTask
node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (2158:6)
performWork
node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1396:13)
callback
node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (67:2)
scheduleWork
node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1395:4)
pingTask
node_modules/next/dist/compiled/react-server-dom-webpack/server.browser.js (1409:13)
process.processTicksAndRejections
node:internal/process/task_queues (95:5)`

Expected Behavior

The component should import without throwing an error.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[AlejandroV01]

Same Error: Unsupported Server Component type: undefined When trying to import a third-party component, using the new app dir.

[AM-thedev]

See this thread: #41940
You could try creating a folder with an index.ts that exports all the third-party components you want to use and put "use client" at the top of the index.ts

A bit hacky but it might work.