Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Error when using namespace/compound components in React Server Component #75192

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
DanielGiljam opened this issue Jan 22, 2025 · 3 comments
Open
Labels
linear: next Confirmed issue that is tracked by the Next.js team. Module Resolution Module resolution (CJS / ESM, module resolving).

Comments

@DanielGiljam
Copy link

DanielGiljam commented Jan 22, 2025

Link to the code that reproduces this issue

https://github.com/DanielGiljam/nextjs-rsc-jsx-issue

To Reproduce

  1. Start the application in development (next dev)

  2. See the error

    React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
    

Current vs. Expected behavior

Current behavior: you get the error described above.

Expected behavior: namespace/compound components would work like they do in client components.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:15 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 23.3.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.14.2
Relevant Packages:
  next: 15.2.0-canary.19 // Latest available version is detected (15.2.0-canary.19).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: N/A

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

Module Resolution, Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

No response

@github-actions github-actions bot added the Module Resolution Module resolution (CJS / ESM, module resolving). label Jan 22, 2025
@samcx samcx added the linear: next Confirmed issue that is tracked by the Next.js team. label Jan 28, 2025
@samcx
Copy link
Member

samcx commented Jan 29, 2025

@DanielGiljam Thank you for submitting an issue!

Related: https://ivicabatinic.from.hr/posts/multipart-namespace-components-addressing-rsc-and-dot-notation-issues

@ztanner
Copy link
Member

ztanner commented Feb 1, 2025

Thank you for the report!

To explain why this is the case: when a server component imports a client component, it receives a special client reference that the RSC runtime knows how to send to the browser. In other words, you aren't receiving the underlying export, it's only used to be passed to the client.

This is described a bit here: https://react.dev/reference/rsc/use-client:

When a server evaluated module imports values from a 'use client' module, the values must either be a React component or supported serializable prop values to be passed to a Client Component. Any other use case will throw an exception

However, I think the error itself can be improved here. React actually has a special message for this case which should read something like:

Error: Cannot access on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

We will investigate why it's not being shown in this particular case.

@codenomnom
Copy link

As mentioned in #76000, there are numerous issues on the topic, and yet, we keep spending hours figuring out this ambiguous error. It's been like ages, and it really is disappointing. @ztanner

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
linear: next Confirmed issue that is tracked by the Next.js team. Module Resolution Module resolution (CJS / ESM, module resolving).
Projects
None yet
Development

No branches or pull requests

4 participants