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

Janpot · 2024-08-11T12:44:54Z

addresses #44055
addresses #43980
addresses #44265
addresses #44180
addresses #44993
addresses #45018

Might close:

Add a new mode to the build:

Removes nested package.json files
Stores ESM files in esm subfolder with type:'module' in a package.json
Add exports field to package.json
Modern builds go in modern subfolder

Notes:

type:module 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 lack of 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

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.

Resolutions

To try out the changes use following resolutions:

"resolutions": {
    "@mui/internal-markdown": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/internal-markdown",
    "@mui/base": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/base",
    "@mui/codemod": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/codemod",
    "@mui/core-downloads-tracker": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/core-downloads-tracker",
    "@mui/docs": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/docs",
    "@mui/icons-material": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/icons-material",
    "@mui/lab": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/lab",
    "@mui/material-nextjs": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/material-nextjs",
    "@mui/material": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/material",
    "@mui/material-pigment-css": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/material-pigment-css",
    "@mui/private-theming": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/private-theming",
    "@mui/styled-engine-sc": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/styled-engine-sc",
    "@mui/styled-engine": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/styled-engine",
    "@mui/styles": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/styles",
    "@mui/system": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/system",
    "@mui/types": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/types",
    "@mui/utils": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/utils",
    "@mui/internal-babel-plugin-resolve-imports": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/internal-babel-plugin-resolve-imports",
    "@mui/internal-docs-utils": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/internal-docs-utils",
    "@mui/internal-scripts": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/internal-scripts",
    "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/56c2982a/@mui/internal-test-utils",
    "@mui/x-license": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-license",
    "@mui/x-data-grid": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-data-grid",
    "@mui/x-data-grid-pro": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-data-grid-pro",
    "@mui/x-data-grid-premium": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-data-grid-premium",
    "@mui/x-data-grid-generator": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-data-grid-generator",
    "@mui/x-date-pickers": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-date-pickers",
    "@mui/x-date-pickers-pro": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-date-pickers-pro",
    "@mui/x-charts": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-charts",
    "@mui/x-charts-pro": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-charts-pro",
    "@mui/x-charts-vendor": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-charts-vendor",
    "@mui/x-tree-view": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-tree-view",
    "@mui/x-tree-view-pro": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-tree-view-pro",
    "@mui/x-internals": "https://pkg.csb.dev/mui/mui-x/commit/ffb75046/@mui/x-internals"
  },

mui-bot · 2024-08-11T12:47:28Z

Netlify deploy preview

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

Menu: parsed: +3.73% , gzip: +3.83%
@material-ui/unstyled: parsed: +0.92% , gzip: +1.01%
Select: parsed: +3.16% , gzip: +3.17%
Unstable_Popup: parsed: +3.05% , gzip: +2.63%
Unstable_NumberInput: parsed: +5.11% , gzip: +5.90%
@material-ui/core/useMediaQuery: parsed: +5.09% , gzip: +4.53%
MenuItem: parsed: +6.67% , gzip: +6.83%
Option: parsed: +6.97% , gzip: +7.37%
Tab: parsed: +7.47% , gzip: +7.53%
TabPanel: parsed: +12.28% , gzip: +11.45%
useAutocomplete: parsed: +5.06% , gzip: +5.47%
TablePagination: parsed: +7.54% , gzip: +8.23%
Tooltip: parsed: +0.44% , gzip: +0.48%
SpeedDialAction: parsed: +0.37% , gzip: +0.40%
@mui/joy/Menu: parsed: +0.41% , gzip: +0.50%
TextField: parsed: +0.34% , gzip: +0.31%
@mui/joy/Tooltip: parsed: +0.52% , gzip: +0.51%
RadioGroup: parsed: +0.68% , gzip: +0.73%
@mui/joy/ListSubheader: parsed: +0.77% , gzip: +0.72%
LoadingButton: parsed: +0.51% , gzip: +0.49%
and 27 more changes

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against ab5dcce

This reverts commit 6e2bbcc.

Janpot · 2025-02-04T09:41:20Z

The pigment app has been very useful as an integration test, so I don't want to just rip it out. I'm adding a version of it with pigment removed which can serve as the integration test for now. We can remove once the issues are resolved. wdyt?

brijeshb42 · 2025-02-04T09:51:36Z

Yeah. That works as well.

DiegoAndai

LGTM 👍🏼

I left two nit comments.

@Janpot may I ask you to create an issue so we can track the debugging of the Pigment Next App issue? That way, we could add it to the backlog to avoid forgetting about it.

scripts/build.mjs

package.json

Janpot · 2025-02-05T09:04:06Z

@Janpot may I ask you to create an issue so we can track the debugging of the Pigment Next App issue? That way, we could add it to the backlog to avoid forgetting about it.

Added in the pigment css repo: mui/pigment-css#376

This reverts commit 7664185.

Janpot added 4 commits August 11, 2024 13:53

WIP

0c2d530

exclude icons

f0cc38e

MUI_PACKAGE_EXPORTS

3955055

more

33c43c1

Janpot added the scope: code-infra Specific to the core-infra product label Aug 11, 2024

Janpot changed the title ~~[core] Try new build mode that creates package exports~~ [core] Update package layout for better ESM support Aug 11, 2024

Janpot added 2 commits August 11, 2024 15:17

Update copyFilesUtils.mjs

5888018

remove deep export

642fdcd

Janpot changed the title ~~[core] Update package layout for better ESM support~~ [code-infra] Update package layout for better ESM support Aug 12, 2024

Janpot added 3 commits August 12, 2024 09:15

bring back flag

868a81d

Update ci.yml

e03039f

WIP

f5bb040

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 12, 2024

Janpot mentioned this pull request Aug 14, 2024

[code-infra] Babel plugin to fully resolve imported paths #43294

Merged

Janpot added 2 commits August 23, 2024 17:32

Merge branch 'next' into esm-exports

da26652

Update build.mjs

4229626

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 23, 2024

Janpot added 8 commits August 25, 2024 08:32

remove this

c11b8e5

fix snapshot

a98520b

vite icons alias

60e04ca

remove 'use client' from index.* fles

6e2bbcc

Update package.json

9348956

Update package.json

860a36e

Update package.json

904f65b

Revert "remove 'use client' from index.* fles"

0de01ee

This reverts commit 6e2bbcc.

This was referenced Aug 26, 2024

[system] createTheme() shouldn't have "use client" #42750

Open

[code-infra] Build size snapshots from installed packages #43452

Merged

Janpot added 2 commits August 27, 2024 11:03

bring changes to snashots

5172a89

Update webpack.config.js

9eaa517

Merge remote-tracking branch 'upstream/master' into esm-exports

f22709c

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 4, 2025

Update README.md

562c0fa

Add link to relevant PR

63c8afd

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 4, 2025

Janpot added 2 commits February 4, 2025 11:29

vale

bb06271

Merge remote-tracking branch 'upstream/master' into esm-exports

e21c4ea

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 4, 2025

Update README.md

e1ab368

Janpot requested a review from DiegoAndai February 4, 2025 11:02

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 4, 2025

DiegoAndai approved these changes Feb 4, 2025

View reviewed changes

scripts/build.mjs Outdated Show resolved Hide resolved

package.json Outdated Show resolved Hide resolved

Janpot added 3 commits February 4, 2025 14:15

typo

c6787ba

rename apps

c890d95

Merge remote-tracking branch 'upstream/master' into esm-exports

0c5f35f

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Feb 4, 2025

Merge remote-tracking branch 'upstream/master' into esm-exports

8554cc5

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 5, 2025

Janpot mentioned this pull request Feb 5, 2025

Performance degradation on Next.js + ESM + GitHub actions + MacOs mui/pigment-css#376

Open

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 5, 2025

Merge remote-tracking branch 'upstream/master' into esm-exports

dbf98ef

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Feb 5, 2025

Janpot added 2 commits February 5, 2025 12:31

Remove babel-plugin-react-remove-properties

7664185

Revert "Remove babel-plugin-react-remove-properties"

ab5dcce

This reverts commit 7664185.

Janpot merged commit ec7db42 into mui:master Feb 5, 2025
19 checks passed

Janpot mentioned this pull request Feb 5, 2025

[docs] Add migration guide for package layout changes #45222

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Janpot commented Aug 11, 2024 •

edited by DiegoAndai

Loading

mui-bot commented Aug 11, 2024 •

edited

Loading

Janpot commented Feb 4, 2025

brijeshb42 commented Feb 4, 2025

DiegoAndai left a comment

Janpot commented Feb 5, 2025

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

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

Conversation

Janpot commented Aug 11, 2024 • edited by DiegoAndai Loading

Bundle size increase

Resolutions

mui-bot commented Aug 11, 2024 • edited Loading

Netlify deploy preview

Bundle size report

Janpot commented Feb 4, 2025

brijeshb42 commented Feb 4, 2025

DiegoAndai left a comment

Choose a reason for hiding this comment

Janpot commented Feb 5, 2025

Janpot commented Aug 11, 2024 •

edited by DiegoAndai

Loading

mui-bot commented Aug 11, 2024 •

edited

Loading