[core] Add exports field to packages

apps/pigment-css-vite-app/src/Slider/ZeroSlider.tsx

@@ -10,7 +10,7 @@ import {
 import { isHostComponent, useSlotProps } from '@mui/base/utils';
 import { styled } from '@pigment-css/react';
 import { capitalize } from '@mui/material/utils';
-import SliderValueLabel from '@mui/material/Slider/SliderValueLabel';
+import { SliderValueLabel } from '@mui/material/Slider';
 import { useSlider, valueToPercent } from '@mui/base/useSlider';
 import { alpha, lighten, darken } from '@mui/system/colorManipulator';
 import type { Theme } from '@mui/material/styles';

babel.config.js

@@ -103,6 +103,10 @@ module.exports = function getBabelConfig(api) {
     ]);
   }
 
+  if (process.env.MUI_ADD_IMPORT_EXTENSIONS === 'true') {
+    plugins.push(['babel-plugin-add-import-extension', { extension: useESModules ? 'mjs' : 'js' }]);
+  }
+
   return {
     assumptions: {
       noDocumentAll: true,

docs/data/material/customization/typography/ResponsiveFontSizesChart.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-// import of a small, pure module in a private demo
-// bundle size and module duplication is negligible
-/* eslint-disable-next-line no-restricted-imports */
-import { convertLength } from '@mui/material/styles/cssUtils';
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
+import {
+  createTheme,
+  responsiveFontSizes,
+  unstable_convertLength as convertLength,
+} from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import { LineChart } from '@mui/x-charts';
 

docs/data/material/migration/migration-v5/migration-v5.md

@@ -23,3 +23,42 @@
 This list is a work in progress.
 Expect updates as new breaking changes are introduced.
 :::
+
+### Added exports field to package.json
+
+The `exports` field has been added to the `@mui/material/package.json` file to improve the ESM and CJS builds split:
+
+```json title="@mui/material/package.json"
+// ...
+"exports": {
+    ".": {
+        "types": "./index.d.ts",
+        "import": "./index.mjs",
+        "default": "./node/index.js"
+    },
+    "./*": {
+        "types": "./*/index.d.ts",
+        "import": "./*/index.mjs",
+        "default": "./node/*/index.js"
+    }
+}
+// ...
+```
+
+This limits the exported modules to the root import and one level deep imports.
+If you were importing from deeper levels, you will need to update your imports:
+
+```diff title="index.mjs"
+- import buttonClasses from '@mui/material/Button/buttonClasses';
++ import { buttonClasses } from '@mui/material/Button';
+```
+
+```diff title="index.cjs"
+- const { default: Button } = require('@mui/material/node/Button');
++ const { default: Button } = require('@mui/material/Button');
+```
+
+If you were importing from `/node` as a workaround, this is no longer necessary as the `exports` field maps CJS to the correct files.
+You might have to update your bundler configuration to support the new structure.
+
+Read more about the `exports` field in the [Node.js documentation](https://nodejs.org/api/packages.html#exports).

docs/data/system/migration/migration-v5/migration-v5.md

@@ -24,16 +24,39 @@
 Expect updates as new breaking changes are introduced.
 :::
 
-### Root code is now ESM
+### Added exports field to package.json
 
-The ESM code, previously under the `esm/` build, has been moved to the root of the package.
-The CommonJS code, previously on the root, has been moved to the `node/` build.
+The `exports` field has been added to the `@mui/system/package.json` file to improve the ESM and CJS builds split:
 
-:::info
-This is an intermediate step to prepare for adding the `exports` field to the `package.json` file.
-If you have trouble using this new structure, please wait for the future update which adds the `exports` field.
-You can follow progress on https://github.com/mui/material-ui/issues/30671.
-:::
+```json title="@mui/system/package.json"
+// ...
+"exports": {
+    ".": {
+        "types": "./index.d.ts",
+        "import": "./index.mjs",
+        "default": "./node/index.js"
+    },
+    "./*": {
+        "types": "./*/index.d.ts",
+        "import": "./*/index.mjs",
+        "default": "./node/*/index.js"
+    }
+}
+// ...
+```
+
+This limits the exported modules to the root import and one level deep imports.
+If you were importing from deeper levels, you will need to update your imports:
+
+```diff
+- import styled from '@mui/system/esm/styled';
++ import styled from '@mui/system/styled';
+```
+
+If you were importing from `/esm` as a workaround, this is no longer necessary as the `exports` field maps ESM to the correct files.
+You might have to update your bundler configuration to support the new structure.
+
+Read more about the `exports` field in the [Node.js documentation](https://nodejs.org/api/packages.html#exports).
 
 ### GridProps type
 

package.json

@@ -84,8 +84,9 @@
   },
   "dependencies": {
     "@googleapis/sheets": "^5.0.5",
-    "@slack/bolt": "^3.17.1",
     "@netlify/functions": "^2.6.0",
+    "@slack/bolt": "^3.17.1",
+    "babel-plugin-add-import-extension": "^1.6.0",
     "execa": "^8.0.1",
     "google-auth-library": "^9.7.0"
   },
@@ -106,17 +107,17 @@
     "@babel/preset-typescript": "^7.23.3",
     "@babel/register": "^7.23.7",
     "@mnajdova/enzyme-adapter-react-18": "^0.2.0",
-    "@mui/internal-docs-utils": "workspace:^",
-    "@mui/internal-scripts": "workspace:^",
     "@mui-internal/api-docs-builder": "workspace:^",
     "@mui-internal/api-docs-builder-core": "workspace:^",
     "@mui-internal/test-utils": "workspace:^",
+    "@mui/internal-docs-utils": "workspace:^",
+    "@mui/internal-scripts": "workspace:^",
     "@mui/joy": "workspace:*",
     "@mui/material": "workspace:^",
     "@mui/utils": "workspace:^",
-    "@pigment-css/react": "workspace:^",
     "@next/eslint-plugin-next": "^14.1.3",
     "@octokit/rest": "^20.0.2",
+    "@pigment-css/react": "workspace:^",
     "@playwright/test": "1.42.1",
     "@types/enzyme": "^3.10.18",
     "@types/fs-extra": "^11.0.4",

packages/mui-core-downloads-tracker/package.json

@@ -21,7 +21,7 @@
   },
   "scripts": {
     "build": "mkdir build && pnpm build:copy-files",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --skipExportsField",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish"
   },

packages/mui-icons-material/package.json

@@ -35,7 +35,7 @@
     "build:modern": "echo 'Skip modern build'",
     "build:node": "node ../../scripts/build.mjs node --largeFiles --outDir lib",
     "build:stable": "node ../../scripts/build.mjs stable --largeFiles --outDir lib",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --skipExportsField",
     "build:typings": "node ./scripts/create-typings.mjs",
     "prebuild": "rimraf build",
     "release": "pnpm build && pnpm publish",

packages/mui-material/src/styles/index.d.ts

@@ -82,7 +82,11 @@ export { ComponentsProps, ComponentsPropsList } from './props';
 export { ComponentsVariants } from './variants';
 export { ComponentsOverrides, ComponentNameToClassKey } from './overrides';
 export { Components } from './components';
-export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
+export {
+  getUnit as unstable_getUnit,
+  toUnitless as unstable_toUnitless,
+  convertLength as unstable_convertLength,
+} from './cssUtils';
 
 export type ClassNameMap<ClassKey extends string = string> = Record<ClassKey, string>;
 
@@ -97,7 +101,11 @@ export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
-export * from './CssVarsProvider';
+export {
+  useColorScheme,
+  getInitColorSchemeScript,
+  Experimental_CssVarsProvider,
+} from './CssVarsProvider';
 
 export { default as experimental_extendTheme } from './experimental_extendTheme';
 export type {

packages/mui-material/src/styles/index.js

@@ -29,7 +29,11 @@ export function experimental_sx() {
 export { default as createTheme, createMuiTheme } from './createTheme';
 export { default as unstable_createMuiStrictModeTheme } from './createMuiStrictModeTheme';
 export { default as createStyles } from './createStyles';
-export { getUnit as unstable_getUnit, toUnitless as unstable_toUnitless } from './cssUtils';
+export {
+  getUnit as unstable_getUnit,
+  toUnitless as unstable_toUnitless,
+  convertLength as unstable_convertLength,
+} from './cssUtils';
 export { default as responsiveFontSizes } from './responsiveFontSizes';
 export { duration, easing } from './createTransitions';
 export { default as useTheme } from './useTheme';
@@ -44,7 +48,11 @@ export { default as makeStyles } from './makeStyles';
 export { default as withStyles } from './withStyles';
 export { default as withTheme } from './withTheme';
 
-export * from './CssVarsProvider';
+export {
+  useColorScheme,
+  getInitColorSchemeScript,
+  Experimental_CssVarsProvider,
+} from './CssVarsProvider';
 export { default as experimental_extendTheme } from './experimental_extendTheme';
 export { default as getOverlayAlpha } from './getOverlayAlpha';
 export { default as shouldSkipGeneratingVar } from './shouldSkipGeneratingVar';

packages/mui-types/package.json

@@ -49,5 +49,10 @@
     "@types/react": {
       "optional": true
     }
+  },
+  "exports": {
+    ".": {
+      "types": "./index.d.ts"
+    }
   }
 }

scripts/build.mjs

@@ -31,6 +31,7 @@ async function run(argv) {
     NODE_ENV: 'production',
     BABEL_ENV: bundle,
     MUI_BUILD_VERBOSE: verbose,
+    MUI_ADD_IMPORT_EXTENSIONS: true,
   };
   const babelConfigPath = path.resolve(getWorkspaceRoot(), 'babel.config.js');
   const srcDir = path.resolve('./src');
@@ -69,6 +70,8 @@ async function run(argv) {
     }[bundle],
   );
 
+  const outExtension = bundle === 'node' ? '.js' : '.mjs';
+
   const babelArgs = [
     '--config-file',
     babelConfigPath,
@@ -77,6 +80,8 @@ async function run(argv) {
     srcDir,
     '--out-dir',
     outDir,
+    '--out-file-extension',
+    outExtension,
     '--ignore',
     // Need to put these patterns in quotes otherwise they might be evaluated by the used terminal.
     `"${ignore.join('","')}"`,

scripts/copyFiles.mjs

@@ -1,5 +1,6 @@
 /* eslint-disable no-console */
 import path from 'path';
+import yargs from 'yargs';
 import {
   createModulePackages,
   createPackageFile,
@@ -23,9 +24,9 @@ async function addLicense(packageData) {
 `;
   await Promise.all(
     [
-      './index.js',
-      './legacy/index.js',
-      './modern/index.js',
+      './index.mjs',
+      './legacy/index.mjs',
+      './modern/index.mjs',
       './node/index.js',
       './umd/material-ui.development.js',
       './umd/material-ui.production.min.js',
@@ -43,13 +44,14 @@ async function addLicense(packageData) {
   );
 }
 
-async function run() {
-  const extraFiles = process.argv.slice(2);
+async function run(argv) {
+  const { extraFiles, skipExportsField } = argv;
+
   try {
     // TypeScript
     await typescriptCopy({ from: srcPath, to: buildPath });
 
-    const packageData = await createPackageFile();
+    const packageData = await createPackageFile(skipExportsField);
 
     await Promise.all(
       ['./README.md', '../../CHANGELOG.md', '../../LICENSE', ...extraFiles].map(async (file) => {
@@ -67,4 +69,26 @@ async function run() {
   }
 }
 
-run();
+yargs(process.argv.slice(2))
+  .command({
+    command: '$0 [extraFiles..]',
+    description: 'copy files',
+    builder: (command) => {
+      return command
+        .positional('extraFiles', {
+          type: 'array',
+          default: [],
+        })
+        .option('skipExportsField', {
+          type: 'boolean',
+          default: false,
+          describe:
+            'Set to `true` if you wish to skip adding the exports field. Adding the exports field is only supported for top level ESM packages.',
+        });
+    },
+    handler: run,
+  })
+  .help()
+  .strict(true)
+  .version(false)
+  .parse();