[code-infra] Add "use client" directive to files with React APIs

[Janpot]

This otherwise breaks react server components in Next.js when moving to full ESM.

copilot wrote me a eslint plugin that detects those and autofixes. we can't add them to index files

For reference: vercel/next.js#75128

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 30b6c8f

[DiegoAndai]

Hey @Janpot,

What do you mean with:

we can't add them to index files

[DiegoAndai]

Should we exclude test files?

[Janpot]

Hey @Janpot,

What do you mean with:

we can't add them to index files

Didn't we uncover that in #41956?

[DiegoAndai]

Didn't we uncover that in #41956?

I didn't know if you were referring to that or the eslint plugin.

The reason is to avoid 'use client' and export * in the same file, which causes the error described in #41956. Could we add another eslint plugin to cover this? Let me know if it's out of scope, and we can tackle it in a separate PR.

[Janpot]

Could we add another eslint plugin to cover this?

🙂 It's already covered with the no-restricted-syntax. It seemed the use-case of this PR is a little too complex for this rule. I couldn't make it work.

material-ui/.eslintrc.js

Lines 254 to 258 in 820a76c

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