Exporting client components as an object throws an error.

[benton-droplab]

Verify canary release

• [X] 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: https://github.com/vercel/next.js/issues/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.