move to internal package

babel.config.js

@@ -22,8 +22,6 @@ const productionPlugins = [
   ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
 ];
 
-const importResolverPlugin = path.resolve(__dirname, './scripts/babelPluginResolveRelativeImports');
-
 /** @type {babel.ConfigFunction} */
 module.exports = function getBabelConfig(api) {
   const useESModules = api.env(['regressions', 'modern', 'stable']);
@@ -120,7 +118,7 @@ module.exports = function getBabelConfig(api) {
     ...(useESModules
       ? [
           [
-            importResolverPlugin,
+            '@mui/internal-babel-plugin-resolve-imports',
             {
               // Don't replace the extension when we're using aliases.
               // Essentially only replace in production builds.
@@ -158,7 +156,7 @@ module.exports = function getBabelConfig(api) {
       },
       {
         test: /(\.test\.[^.]+$|\.test\/)/,
-        plugins: [[importResolverPlugin, false]],
+        plugins: [['@mui/internal-babel-plugin-resolve-imports', false]],
       },
     ],
     env: {

package.json

@@ -127,7 +127,6 @@
     "@types/mocha": "^10.0.7",
     "@types/node": "^18.19.44",
     "@types/react": "^18.3.3",
-    "@types/resolve": "^1.20.6",
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
@@ -181,7 +180,6 @@
     "prettier": "^3.3.3",
     "pretty-quick": "^4.0.0",
     "process": "^0.11.10",
-    "resolve": "^1.22.8",
     "rimraf": "^5.0.10",
     "serve": "^14.2.3",
     "stylelint": "^15.11.0",

packages-internal/babel-plugin-resolve-imports/README.md

@@ -0,0 +1,33 @@
+# @mui/internal-babel-plugin-resolve-imports
+
+A babel plugin that resolves import specifiers that are created under the Node.js resolution algorithm to specifiers that adhere to ESM resolution algorithm.
+
+See https://nodejs.org/docs/v20.16.0/api/esm.html#mandatory-file-extensions
+
+> A file extension must be provided when using the import keyword to resolve relative or absolute specifiers. Directory indexes (e.g. './startup/index.js') must also be fully specified.
+>
+> This behavior matches how import behaves in browser environments, assuming a typically configured server.
+
+This changes imports in the build output from
+
+```tsx
+// packages/mui-material/build/index.js
+export * from './Accordion';
+
+// packages/mui-material/build/Breadcrumbs/BreadcrumbCollapsed.js
+import MoreHorizIcon from '../internal/svg-icons/MoreHoriz';
+```
+
+to
+
+```tsx
+// packages/mui-material/build/index.js
+export * from './Accordion/index.js';
+
+// packages/mui-material/build/Breadcrumbs/BreadcrumbCollapsed.js
+import MoreHorizIcon from '../internal/svg-icons/MoreHoriz.js';
+```
+
+## options
+
+- `outExtension`: The extension to use when writing the output. Careful: if not specified, this plugin does not replace extensions at all, your bundles will likely be broken. We left this optional to allow for using this plugin together with the aliasing to source that we do everywhere. That way we can keep it in the pipeline even when not strictly necessary.

packages-internal/babel-plugin-resolve-imports/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@mui/internal-babel-plugin-resolve-imports",
+  "version": "1.0.16",
+  "author": "MUI Team",
+  "description": "babel plugin that resolves import specifiers to their actual output file.",
+  "main": "./index.js",
+  "exports": {
+    ".": "./index.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mui/material-ui.git",
+    "directory": "packages-internal/babel-plugin-resolve-imports"
+  },
+  "license": "MIT",
+  "scripts": {},
+  "dependencies": {
+    "resolve": "^1.22.8"
+  },
+  "devDependencies": {
+    "@types/resolve": "^1.20.6",
+    "@types/babel__core": "^7.20.5"
+  },
+  "peerDependencies": {
+    "@babel/core": "7"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}