[code-infra] Fully resolve imports in ESM target (#14234)

babel.config.js

@@ -1,6 +1,16 @@
+// @ts-check
 const path = require('path');
 const generateReleaseInfo = require('./packages/x-license/generateReleaseInfo');
 
+/**
+ * @typedef {import('@babel/core')} babel
+ */
+
+/**
+ *
+ * @param {string} relativeToBabelConf
+ * @returns {string}
+ */
 function resolveAliasPath(relativeToBabelConf) {
   const resolvedPath = path.relative(process.cwd(), path.resolve(__dirname, relativeToBabelConf));
   return `./${resolvedPath.replace('\\', '/')}`;
@@ -33,6 +43,7 @@ const productionPlugins = [
   ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
 ];
 
+/** @type {babel.ConfigFunction} */
 module.exports = function getBabelConfig(api) {
   const useESModules = api.env(['modern', 'stable', 'rollup']);
 
@@ -56,6 +67,16 @@ module.exports = function getBabelConfig(api) {
     '@babel/preset-typescript',
   ];
 
+  const usesAliases =
+    // in this config:
+    api.env(['coverage', 'development', 'test', 'benchmark']) ||
+    process.env.NODE_ENV === 'test' ||
+    // in webpack config:
+    api.env(['regressions']);
+
+  const outFileExtension = '.js';
+
+  /** @type {babel.PluginItem[]} */
   const plugins = [
     'babel-plugin-optimize-clsx',
     // Need the following 3 transforms for all targets in .browserslistrc.
@@ -125,6 +146,17 @@ module.exports = function getBabelConfig(api) {
     }
   }
 
+  if (useESModules) {
+    plugins.push([
+      '@mui/internal-babel-plugin-resolve-imports',
+      {
+        // Don't replace the extension when we're using aliases.
+        // Essentially only replace in production builds.
+        outExtension: usesAliases ? null : outFileExtension,
+      },
+    ]);
+  }
+
   return {
     assumptions: {
       noDocumentAll: true,

package.json

@@ -89,6 +89,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@mui/internal-babel-plugin-resolve-imports": "1.0.16-dev.20240822-123416-f4a704707a",
     "@mui/icons-material": "^5.16.7",
     "@mui/internal-markdown": "^1.0.11",
     "@mui/internal-test-utils": "^1.0.10",

packages/x-charts-pro/src/themeAugmentation/index.ts

@@ -1,4 +1,4 @@
-export * from '@mui/x-charts/themeAugmentation';
-export * from './overrides';
-export * from './props';
-export * from './components';
+export type * from '@mui/x-charts/themeAugmentation';
+export type * from './overrides';
+export type * from './props';
+export type * from './components';

packages/x-charts/src/themeAugmentation/index.ts

@@ -1,3 +1,3 @@
-export * from './overrides';
-export * from './props';
-export * from './components';
+export type * from './overrides';
+export type * from './props';
+export type * from './components';

packages/x-date-pickers-pro/src/themeAugmentation/index.ts

@@ -1,4 +1,4 @@
 export * from '@mui/x-date-pickers/themeAugmentation';
-export * from './overrides';
-export * from './props';
-export * from './components';
+export type * from './overrides';
+export type * from './props';
+export type * from './components';

packages/x-date-pickers/src/themeAugmentation/index.ts

@@ -1,3 +1,3 @@
-export * from './overrides';
-export * from './props';
-export * from './components';
+export type * from './overrides';
+export type * from './props';
+export type * from './components';

packages/x-tree-view-pro/src/themeAugmentation/index.ts

@@ -1,3 +1,3 @@
-export * from './overrides';
-export * from './props';
-export * from './components';
+export type * from './overrides';
+export type * from './props';
+export type * from './components';

packages/x-tree-view/src/themeAugmentation/index.ts

@@ -1,3 +1,3 @@
-export * from './overrides';
-export * from './props';
-export * from './components';
+export type * from './overrides';
+export type * from './props';
+export type * from './components';