[internal] Remove 'use client' from index files and useAutocomplete reexport

[DiegoAndai]

Remove 'use client' from:

• index files
• useAutocomplete material-ui reexport file. This required a minor modification of the buildRsc script.

This is to avoid an issue with Next.js that surfaced in #41596:

Error: It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.

Also suggested in #40358 (comment).
There's no use of 'use client' in index files.

[mui-bot]

Netlify deploy preview

https://deploy-preview-41956--material-ui.netlify.app/

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 32d0f0a

[oliviertassinari]

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

[mnajdova]

@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 👌

[Janpot]

@DiegoAndai I'm adding the following to the no-restricted-syntax rule in eslint to prevent the pattern from re-entering in the future:

{
  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',
},

[Janpot]

This seems good from my POV

@DiegoAndai I merged master, added the lint rule and updated a few files that it caught

[DiegoAndai]

Thanks @Janpot 😊

[alexfauquette]

@DiegoAndai This file still has the "use client" 🤔

[oliviertassinari]

I agree, It makes sense to me to remove

material-ui/packages/mui-material/src/useAutocomplete/useAutocomplete.js

Line 1 in c1c0d7c

'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.

[Janpot]

• 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' and export * 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.

[oliviertassinari]

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.