Skip to content
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.

Sign up for GitHub

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

Jump to bottom

"use client" not appearing in the ESM entry #182

Open
kentcdodds opened this issue Mar 25, 2024 · 5 comments · May be fixed by preconstruct/preconstruct#590
Open

"use client" not appearing in the ESM entry #182

kentcdodds opened this issue Mar 25, 2024 · 5 comments · May be fixed by preconstruct/preconstruct#590

Comments

@kentcdodds
Copy link
Collaborator

  • react-error-boundary version: 4.0.13 (latest)
  • node version: v20
  • npm version: v10

Relevant code or config

import { ErrorBoundary } from 'react-error-boundary'

What you did:

Using the node loader from react-server-dom-esm (https://github.com/facebook/react/blob/e373190faf3b994707f09488c1a7832f4a91e15a/packages/react-server-dom-esm/src/ReactFlightESMNodeLoader.js#L471-L481)

What happened:

react-error-boundary is not treated as a client component because the "use client" pragma doesn't appear in the ESM module (only the CJS module).

Problem description:

The problem is that node loaders can only transform native ESM modules. So the "use client" pragma needs to appear in the ESM module. Something in the build process doesn't make that work though.

Suggested solution:

My workaround is to create a separate module in my own codebase that adds the "use client" pragma and import that instead. I would love to not have to do that.
@bvaughn
Copy link
Owner

bvaughn commented Mar 25, 2024

PR welcome!

@kentcdodds
Copy link
Collaborator Author

I'm guessing the solution will be in the build tool: https://github.com/preconstruct/preconstruct

@bvaughn
Copy link
Owner

bvaughn commented Mar 25, 2024

I didn't see any issues referencing that in the preconstruct repo. I see a few mentions of "use client" in the CHANGELOG for versions 2.4-2.6, but this project is using v2.8 so it seems like those are unrelated. Maybe @Andarist knows of something?

@Andarist Andarist linked a pull request Mar 26, 2024 that will close this issue
Open
@Andarist
Copy link
Contributor

I opened a PR that might fix this here. It doesn't solve all the potential setups. I think that likely having the whole module marked with the 'use client' directive is common enough that maybe it's good enough of a change.

The problem is that node loaders can only transform native ESM modules.

Is this true? I'm not an expert on the subject but the code in this particular node loader indicates that it's just its decision to ignore everything that is not a module. So it doesn't look like an inherent limitation.

I recognize the issue here but to quote their README 😅 :

Experimental React Flight bindings for DOM using ESM.
Use it at your own risk.

In a way, the issue seems to be not in a way how this package is structured but in their decision to ignore CJS files. I don't recall any mentions of 'use client' being an ESM-only feature.

@bvaughn
Copy link
Owner

bvaughn commented Mar 26, 2024

Thanks a ton for taking a look, @Andarist. I’m also not sure of the right thing to do here, really. So much about server components feels half baked right now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add use client directives to the created mjs wrappers preconstruct/preconstruct
3 participants
@bvaughn @kentcdodds @Andarist