[code-infra] Update package layout for better ESM support

[Janpot]

closes #44055

Add a new mode to the build:

• Removes nested package.json files
• Stores ESM files with .mjs extension
• Add exports field to package.json
• Leave icon package layout as is, but add exports field. Next time we generate it we'll have to update the exports field
• Use rollup instead of babel to compile the modules. this makes it fully specify imports (made this optional for now)

Notes:

• added ./esm/* export to icons for people who used the vite alias workaround
• mjs extension and package.json exports are supported from node 12.17 onward
• Our ESM bundles don't work in Next.js due to

  ../../packages/mui-system/build/Box/index.mjs
  Error: It's currently unsupported to use "export *" in a client boundary. Please use named exports instead.
      at Object.transformSource (/Users/janpotoms/Projects/material-ui/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]_@[email protected]_babel-plugin-_fn2ktr3o4nwwaygw7yjiv6t4d4/node_modules/next/dist/build/webpack/loaders/next-flight-loader/index.js:87:31)
  
  Import trace for requested module:
  ../../packages/mui-system/build/Box/index.mjs
  ../../packages/mui-system/build/index.mjs
  ../../packages/mui-material/build/styles/index.mjs
  ./src/app/layout.tsx
  

  https://github.com/mui/material-ui/actions/runs/10578363192/job/29308312240?pr=43264#step:7:1960
• Another issue that is likely caused by our abismal ESM support [RSC] The entire @mui/joy/node bundle is included in the client bundle when Joy UI component is being imported into a RSC #37934

To Do:

• bundle size increase - explanation below
• make sure babel helpers are a dependency everywhere [code-infra] Add missing @babel/runtime dependency to @mui/material-pigment-css #43473 (comment)
• figure out the export * usage in files that have a 'use client' pragma. Blocked on [core] Remove 'use client' from index files and useAutocomplete reexport #41956
• investigate why it's resolving to cjs @mui/material-pigment-css
• copy license
• export modern target
• merge exports fields instead of overwrite
  • update @mui/material-pigment-css and @mui/icons-material
• document
• Confirmed that it fixes [ESM] @mui/icons-material move to pure ESM #35233 (comment)
• remove esmExternals from the docs (investigate) [docs] Remove esmExternals from the docs #43068
• X remove nested imports to @mui/material - [ButtonBase] Export types used in ButtonBase props #43530

Bundle size increase

The bundle size increase can be fully attributed to the inclusion of the following ESM/CJS interop helper in the webpack output:

Code

/******/ 	/* webpack/runtime/create fake namespace object */
/******/ 	(() => {
/******/ 		var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__);
/******/ 		var leafPrototypes;
/******/ 		// create a fake namespace object
/******/ 		// mode & 1: value is a module id, require it
/******/ 		// mode & 2: merge all properties of value into the ns
/******/ 		// mode & 4: return value when already ns object
/******/ 		// mode & 16: return value when it's Promise-like
/******/ 		// mode & 8|1: behave like require
/******/ 		__webpack_require__.t = function(value, mode) {
/******/ 			if(mode & 1) value = this(value);
/******/ 			if(mode & 8) return value;
/******/ 			if(typeof value === 'object' && value) {
/******/ 				if((mode & 4) && value.__esModule) return value;
/******/ 				if((mode & 16) && typeof value.then === 'function') return value;
/******/ 			}
/******/ 			var ns = Object.create(null);
/******/ 			__webpack_require__.r(ns);
/******/ 			var def = {};
/******/ 			leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)];
/******/ 			for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) {
/******/ 				Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key])));
/******/ 			}
/******/ 			def['default'] = () => (value);
/******/ 			__webpack_require__.d(ns, def);
/******/ 			return ns;
/******/ 		};
/******/ 	})();

This is caused by the following import

material-ui/packages/mui-system/src/useMediaQuery/useMediaQuery.ts

Line 75 in eab1b9e

const maybeReactUseSyncExternalStore: undefined | any = (React as any)['useSyncExternalStore' + ''];

A potential switch to using use-sync-external-store has been explored in #43476 but ultimately it makes sense to keep it, it manifests in the webpack runtime.

[mui-bot]

Netlify deploy preview

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

Menu: parsed: +1.74% , gzip: +1.90%
Unstable_NumberInput: parsed: +4.98% , gzip: +5.77%
@material-ui/core/useMediaQuery: parsed: +5.13% , gzip: +4.61%
Option: parsed: +6.75% , gzip: +7.22%
MenuItem: parsed: +6.47% , gzip: +6.62%
Select: parsed: +1.45% , gzip: +1.55%
Tab: parsed: +7.22% , gzip: +7.37%
PigmentHidden: parsed: +1.10% , gzip: +1.02%
TabPanel: parsed: +12.28% , gzip: +11.45%
useAutocomplete: parsed: +5.06% , gzip: +5.46%
TablePagination: parsed: +7.54% , gzip: +8.23%
@material-ui/unstyled: parsed: +0.43% , gzip: +0.40%
@material-ui/system: parsed: +0.77% , gzip: +0.71%
Tooltip: parsed: +0.52% , gzip: +0.48%
@mui/joy/MenuList: parsed: +0.74% , gzip: +0.59%
@mui/joy/Tooltip: parsed: +0.61% , gzip: +0.54%
@mui/joy/Radio: parsed: +0.80% , gzip: +0.63%
@mui/joy/Menu: parsed: +0.48% , gzip: +0.50%
@mui/joy/Checkbox: parsed: +0.78% , gzip: +0.58%
@mui/joy/Drawer: parsed: +0.65% , gzip: +0.56%
and 24 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 32a2605

[Janpot]

Maintain backwards compatibility for users that have done

material-ui/apps/pigment-css-vite-app/vite.config.ts

Lines 48 to 55 in 8b8732e

	resolve: {
	alias: [
	{
	find: /^@mui\/icons-material\/(.*)/,
	replacement: '@mui/icons-material/esm/$1',
	},
	],
	},

[Janpot]

Maintain backwards compatibility for the legacy ./modern bundles. Just a re-export of the main exports, but with a ./modern prefix