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

[Janpot]

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/next@14.2.6_@babel+core@7.25.2_@opentelemetry+api@1.8.0_@playwright+test@1.46.1_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.79% , gzip: +1.95%
Unstable_NumberInput: parsed: +5.11% , gzip: +6.01%
@material-ui/core/useMediaQuery: parsed: +5.27% , gzip: +4.86%
Select: parsed: +1.49% , gzip: +1.66%
Option: parsed: +6.94% , gzip: +7.46%
MenuItem: parsed: +6.65% , gzip: +6.88%
PigmentHidden: parsed: +1.13% , gzip: +1.07%
TabPanel: parsed: +12.63% , gzip: +12.16%
Tab: parsed: +7.42% , gzip: +7.56%
useAutocomplete: parsed: +5.19% , gzip: +5.72%
TablePagination: parsed: +7.75% , gzip: +8.63%
@material-ui/system: parsed: +0.79% , gzip: +0.76%
@mui/joy/Tooltip: parsed: +0.63% , gzip: +0.57%
@mui/joy/MenuList: parsed: +0.76% , gzip: +0.62%
@mui/joy/Menu: parsed: +0.49% , gzip: +0.54%
@mui/joy/Radio: parsed: +0.83% , gzip: +0.66%
Tooltip: parsed: +0.54% , gzip: +0.46%
@mui/joy/Drawer: parsed: +0.67% , gzip: +0.60%
@mui/joy/Checkbox: parsed: +0.80% , gzip: +0.62%
@mui/joy/Select: parsed: +0.47% , gzip: +0.47%
and 25 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 029389f

[Janpot]

Maintain backwards compatibilty for https://github.com/mui/mui-x/blob/1a9426021bd72b5a1cc18e2c78a5a063d27be541/docs/data/data-grid/column-definition/RenderCellGrid.tsx#L4

[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