[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/guides/minimizing-bundle-size/minimizing-bundle-size.md

@@ -214,50 +214,25 @@ It will perform the following diffs:
 
 The packages published on npm are **transpiled** with [Babel](https://github.com/babel/babel), optimized for performance with the [supported platforms](/material-ui/getting-started/supported-platforms/).
 
-A [modern bundle](#modern-bundle) is also available.
-
-### How to use custom bundles?
-
-:::error
-You are strongly discouraged to:
-
-- Import from any of the custom bundles directly. Do not do this:
-
-  ```js
-  import { Button } from '@mui/material/legacy';
-  ```
-
-  You have no guarantee that the dependencies also use legacy or modern bundles, leading to module duplication in your JavaScript files.
-
-- Import from any of the undocumented files or folders. Do not do this:
-
-  ```js
-  import { Button } from '@mui/material/esm';
-  ```
-
-  You have no guarantee that these imports will continue to work from one version to the next.
+### Modern bundle
 
-  :::
+The modern bundle targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge).
+This can be used to make separate bundles targeting different browsers.
 
-A great way to use these bundles is to configure bundler aliases, for example with [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias):
+To use it, configure your bundler's resolve condition names.
+For example, with [Webpack's `resolve.conditionNames`](https://webpack.js.org/configuration/resolve/#resolveconditionnames):
 
-```js
+```js title="webpack.config.js"
 {
+  // ...
   resolve: {
-    alias: {
-      '@mui/material': '@mui/material/legacy',
-      '@mui/styled-engine': '@mui/styled-engine/legacy',
-      '@mui/system': '@mui/system/legacy',
-      '@mui/base': '@mui/base/legacy',
-      '@mui/utils': '@mui/utils/legacy',
-      '@mui/lab': '@mui/lab/legacy',
-    }
+    conditionNames: ['mui-modern', 'import', 'default'];
   }
 }
 ```
 
-### Modern bundle
+Here's the documentation for common bundlers:
 
-The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/).
-It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge).
-This can be used to make separate bundles targeting different browsers.
+- [Webpack](https://webpack.js.org/configuration/resolve/#resolveconditionnames)
+- [Vite](https://vitejs.dev/config/shared-options.html#resolve-conditions)
+- [ESBuild](https://esbuild.github.io/api/#conditions)

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

@@ -23,3 +23,73 @@ The steps you need to take to migrate from Material UI v5 to v6 are described
 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",
+        "mui-modern": "./modern/index.mjs",
+        "import": "./index.mjs",
+        "default": "./node/index.js"
+    },
+    "./*": {
+        "types": "./*/index.d.ts",
+        "mui-modern": "./modern/index.mjs",
+        "import": "./*/index.mjs",
+        "default": "./node/*/index.js"
+    }
+}
+// ...
+```
+
+Read more about the `exports` field in the [Node.js documentation](https://nodejs.org/api/packages.html#exports).
+
+This change 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');
+```
+
+You might have to update your bundler configuration to support the new structure.
+Following are some common use cases that require changes:
+
+#### Importing CJS
+
+If you were importing from `/node` as a workaround, this is no longer necessary as the `exports` field maps CJS to the correct files.
+
+#### Using the modern bundle
+
+The way the modern bundle should be imported has changed.
+Previously, you would alias `@mui/material` to `@mui/material/modern` in your bundler configuration.
+Now, you should configure your bundler's resolve conditions to use the `"mui-modern"` condition name.
+Here's the updated Webpack example that was previously documented:
+
+```diff title="webpack.config.js"
+ module.exports = {
+   //...
+   resolve: {
+-    alias: {
+-      '@mui/material': '@mui/material/modern',
+-    }
++    conditionNames: ['mui-modern', 'import', 'default'],
+   },
+ };
+```
+
+Documentation: [resolve.conditionNames](https://webpack.js.org/configuration/resolve/#resolveconditionnames)
+
+:::info
+For guidance on other bundlers, refer to the [Modern bundle documentation](/material-ui/guides/minimizing-bundle-size/#modern-bundle).
+:::

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

@@ -24,16 +24,45 @@ This list is a work in progress.
 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",
+        "mui-modern": "./modern/index.mjs",
+        "import": "./index.mjs",
+        "default": "./node/index.js"
+    },
+    "./*": {
+        "types": "./*/index.d.ts",
+        "mui-modern": "./modern/index.mjs",
+        "import": "./*/index.mjs",
+        "default": "./node/*/index.js"
+    }
+}
+// ...
+```
+
+Read more about the `exports` field in the [Node.js documentation](https://nodejs.org/api/packages.html#exports).
+
+This change 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';
+```
+
+You might have to update your bundler configuration to support the new structure.
+Following are some common use cases that require changes:
+
+#### Importing ESM
+
+If you were importing from `/esm` as a workaround, this is no longer necessary as the `exports` field maps ESM to the correct files.
 
 ### 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"
   },
@@ -105,11 +106,11 @@
     "@babel/preset-typescript": "^7.24.1",
     "@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:^",

packages/mui-base/package.json

@@ -28,10 +28,10 @@
   },
   "scripts": {
     "build": "pnpm build:modern && pnpm build:node && pnpm build:stable && pnpm build:types && pnpm build:copy-files",
-    "build:modern": "node ../../scripts/build.mjs modern",
-    "build:node": "node ../../scripts/build.mjs node",
-    "build:stable": "node ../../scripts/build.mjs stable",
-    "build:copy-files": "node ../../scripts/copyFiles.mjs",
+    "build:modern": "node ../../scripts/build.mjs modern --exportFormat exports",
+    "build:node": "node ../../scripts/build.mjs node --exportFormat exports",
+    "build:stable": "node ../../scripts/build.mjs stable --exportFormat exports",
+    "build:copy-files": "node ../../scripts/copyFiles.mjs --exportFormat exports",
     "build:types": "node ../../scripts/buildTypes.mjs",
     "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
     "release": "pnpm build && pnpm publish",

packages/mui-base/src/Badge/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Badge } from './Badge';
 export * from './Badge.types';
 export * from './badgeClasses';

packages/mui-base/src/Button/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Button } from './Button';
 
 export * from './buttonClasses';

packages/mui-base/src/Input/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Input } from './Input';
 
 export * from './Input.types';

packages/mui-base/src/MenuButton/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { MenuButton } from './MenuButton';
 export * from './MenuButton.types';
 

packages/mui-base/src/MenuItem/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export * from './MenuItem';
 export * from './MenuItem.types';
 export * from './menuItemClasses';

packages/mui-base/src/MultiSelect/index.ts

@@ -1,2 +1 @@
-'use client';
 export { MultiSelect } from './MultiSelect';

packages/mui-base/src/NoSsr/index.ts

@@ -1,3 +1,2 @@
-'use client';
 export { NoSsr } from './NoSsr';
 export * from './NoSsr.types';

packages/mui-base/src/Option/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export * from './Option';
 export * from './Option.types';
 export * from './optionClasses';

packages/mui-base/src/OptionGroup/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { OptionGroup } from './OptionGroup';
 
 export * from './OptionGroup.types';

packages/mui-base/src/Popper/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Popper } from './Popper';
 export type {
   PopperPlacementType,

packages/mui-base/src/Portal/index.ts

@@ -1,3 +1,2 @@
-'use client';
 export { Portal } from './Portal';
 export * from './Portal.types';

packages/mui-base/src/Select/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Select } from './Select';
 
 export * from './selectClasses';

packages/mui-base/src/Slider/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Slider } from './Slider';
 export * from './Slider.types';
 export * from './sliderClasses';

packages/mui-base/src/Snackbar/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Snackbar } from './Snackbar';
 
 export * from './Snackbar.types';

packages/mui-base/src/Switch/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Switch } from './Switch';
 export * from './Switch.types';
 

packages/mui-base/src/Tab/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Tab } from './Tab';
 export * from './Tab.types';
 

packages/mui-base/src/TabPanel/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { TabPanel } from './TabPanel';
 export * from './TabPanel.types';
 

packages/mui-base/src/TablePagination/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { TablePagination } from './TablePagination';
 export * from './TablePagination.types';
 

packages/mui-base/src/Tabs/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Tabs } from './Tabs';
 export * from './TabsContext';
 export * from './tabsClasses';

packages/mui-base/src/TabsList/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { TabsList } from './TabsList';
 export * from './TabsList.types';
 

packages/mui-base/src/TextareaAutosize/index.ts

@@ -1,3 +1,2 @@
-'use client';
 export { TextareaAutosize } from './TextareaAutosize';
 export * from './TextareaAutosize.types';

packages/mui-base/src/Unstable_NumberInput/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { NumberInput as Unstable_NumberInput } from './NumberInput';
 export * from './numberInputClasses';
 export * from './NumberInput.types';

packages/mui-base/src/Unstable_Popup/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { Popup as Unstable_Popup } from './Popup';
 export * from './Popup.types';
 export * from './popupClasses';

packages/mui-base/src/unstable_useModal/index.ts

@@ -1,4 +1,3 @@
-'use client';
 export { useModal as unstable_useModal } from './useModal';
 export * from './useModal.types';
 export * from './ModalManager';

packages/mui-base/src/unstable_useNumberInput/index.ts

@@ -1,3 +1,2 @@
-'use client';
 export { useNumberInput as unstable_useNumberInput } from './useNumberInput';
 export * from './useNumberInput.types';

packages/mui-base/src/useBadge/index.ts

@@ -1,3 +1,2 @@
-'use client';
 export { useBadge } from './useBadge';
 export * from './useBadge.types';

packages/mui-base/src/useButton/index.ts

@@ -1,3 +1,2 @@
-'use client';
 export { useButton } from './useButton';
 export * from './useButton.types';

packages/mui-base/src/useCompound/index.ts

@@ -1,3 +1,2 @@
-'use client';
 export * from './useCompoundParent';
 export * from './useCompoundItem';