-
-
Notifications
You must be signed in to change notification settings - Fork 32.3k
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
[core] Remove 'use client'
from index files and useAutocomplete reexport
#41956
[core] Remove 'use client'
from index files and useAutocomplete reexport
#41956
Conversation
Netlify deploy previewhttps://deploy-preview-41956--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
'use client'
from index files and useAutocomplete reexport
a032721
to
6486ba7
Compare
Nice, a continuation of #40663. I'm confused to why Next.js can't properly handle "use client" in barrel files, it sounds off. But in any cases, it makes sense to me to toggle between client and server bundles at the lowest possible level. I proposed the same change for Base UI: mui/base-ui#330 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@mj12albert was there a reason for adding the 'use client' directive in the index files in the first place. I am ok with the changes 👌
@DiegoAndai I'm adding the following to the {
message: "The 'use client' pragma can't be used with export * in the same module. This is not supported by Next.js.",
selector: 'ExpressionStatement[expression.value="use client"] ~ ExportAllDeclaration',
}, |
Co-authored-by: Olivier Tassinari <[email protected]> Signed-off-by: Jan Potoms <[email protected]>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This seems good from my POV
@DiegoAndai I merged master, added the lint rule and updated a few files that it caught
Thanks @Janpot 😊 |
@@ -27,6 +27,7 @@ const PROJECTS: Project[] = [ | |||
'packages/mui-material/src/PigmentContainer/PigmentContainer.tsx', // RSC compatible | |||
'packages/mui-material/src/PigmentGrid/PigmentGrid.tsx', // RSC compatible | |||
'packages/mui-material/src/PigmentStack/PigmentStack.tsx', // RSC compatible | |||
'packages/mui-material/src/useAutocomplete/useAutocomplete.js', // RSC compatible |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@DiegoAndai This file still has the "use client"
🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I agree, It makes sense to me to remove
'use client'; |
from all hooks. From a quick test that I could don't with Next.js. If we add the "use client" in any function, we get no clear error when used wrong. Next.js only gives you an empty import on the server bundle when trying to import from the client bundle.
If confirmed, we should update packages/rsc-builder/buildRsc.ts
to reflect this and have an eslint error that crash when we try.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
- Next.js only starts erroring on this once we add the
exports
field to package.json. I have the feeling it's not as strict with commonjs. That's why you currently can't reproduce. - We have a lint rule. It checks whether
'use client'
andexport *
are used in the same file. This is the pattern that Next.js doesn't like and thus we should avoid. The fact that we had a lot of those in index files is a coincidence. - imo buildRsc is not the optimal approach to this problem. We should just add
'use client'
where it's necessary. I think it would be better to write a test instead that imports all our components in an RSC so that we don't forget this. Just in general, our preference for solving these sorts of problems should be linting/testing first, before code generation.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My bad, my previous message don't holp up when looking at it in more depth: #43778. I only considered Next.js@latest but they had a regression in the DX, they will fix it.
TL;DR we should add "use client" in any file that relies on client-side React API.
Remove 'use client' from:
buildRsc
script.This is to avoid an issue with Next.js that surfaced in #41596:
Also suggested in #40358 (comment).
There's no use of
'use client'
in index files.