From f0fad23730257eb4537a716d141223f664f6656d Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Fri, 16 Apr 2021 18:25:32 +0200
Subject: [PATCH 1/5] [core] Use `exports` instead of aliases where possible

---
 babel.config.js                                     |  1 -
 docs/babel.config.js                                |  1 +
 .../src/v4.0.0/optimal-imports.js                   |  1 +
 .../src/v4.0.0/top-level-imports.js                 |  1 +
 packages/material-ui/package.json                   |  5 ++++-
 scripts/copy-files.js                               | 13 ++++++++++---
 test/karma.conf.js                                  |  2 ++
 test/karma.conf.profile.js                          |  2 ++
 webpackBaseConfig.js                                |  2 ++
 9 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index 9240d2d6f1597c..c315ca859b925b 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -9,7 +9,6 @@ function resolveAliasPath(relativeToBabelConf) {
 }
 
 const defaultAlias = {
-  '@material-ui/core': resolveAliasPath('./packages/material-ui/src'),
   '@material-ui/docs': resolveAliasPath('./packages/material-ui-docs/src'),
   '@material-ui/icons': resolveAliasPath('./packages/material-ui-icons/src'),
   '@material-ui/lab': resolveAliasPath('./packages/material-ui-lab/src'),
diff --git a/docs/babel.config.js b/docs/babel.config.js
index 0ea562b4895c50..277542afefe3df 100644
--- a/docs/babel.config.js
+++ b/docs/babel.config.js
@@ -13,6 +13,7 @@ function resolvePath(sourcePath, currentFile, opts) {
   return bpmr.resolvePath(sourcePath, currentFile, opts);
 }
 
+// TODO: Can be dropped with webpack 5 which supports the `exports` field
 const alias = {
   '@material-ui/core': '../packages/material-ui/src',
   '@material-ui/docs': '../packages/material-ui-docs/src',
diff --git a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js
index 6c42998c254f72..0c7d54a4fb3439 100644
--- a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js
+++ b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js
@@ -2,6 +2,7 @@ import { dirname } from 'path';
 import addImports from 'jscodeshift-add-imports';
 import getJSExports from '../util/getJSExports';
 
+// TODO: do we still need this?
 // istanbul ignore next
 if (process.env.NODE_ENV === 'test') {
   const resolve = require.resolve;
diff --git a/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js b/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
index cbaec0b52572d8..ed65d58d7682e9 100644
--- a/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
+++ b/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
@@ -7,6 +7,7 @@ export default function transformer(fileInfo, api, options) {
 
   let requirePath = importModule;
 
+  // TODO: do we still need this?
   if (process.env.NODE_ENV === 'test') {
     requirePath = requirePath.replace(/^@material-ui\/core/, '../../../material-ui/src');
   }
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
index 1d71141c16ad82..73c9c9e284521b 100644
--- a/packages/material-ui/package.json
+++ b/packages/material-ui/package.json
@@ -4,7 +4,10 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
-  "main": "./src/index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./*": "./src/*/index.js"
+  },
   "keywords": [
     "react",
     "react-component",
diff --git a/scripts/copy-files.js b/scripts/copy-files.js
index 7d5ec0ed223218..c5eefbea572b52 100644
--- a/scripts/copy-files.js
+++ b/scripts/copy-files.js
@@ -66,9 +66,16 @@ async function typescriptCopy({ from, to }) {
 
 async function createPackageFile() {
   const packageData = await fse.readFile(path.resolve(packagePath, './package.json'), 'utf8');
-  const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } = JSON.parse(
-    packageData,
-  );
+  const {
+    nyc,
+    scripts,
+    devDependencies,
+    workspaces,
+    // Using native ES 6 modules internally only for now
+    exports,
+    type,
+    ...packageDataOther
+  } = JSON.parse(packageData);
 
   const newPackageData = {
     ...packageDataOther,
diff --git a/test/karma.conf.js b/test/karma.conf.js
index 1b92eeaaa82bb7..ab402ec17aa346 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -1,5 +1,6 @@
 const playwright = require('playwright');
 const webpack = require('webpack');
+const webpackBaseConfig = require('../webpackBaseConfig');
 
 const CI = Boolean(process.env.CI);
 
@@ -105,6 +106,7 @@ module.exports = function setKarmaConfig(config) {
         fs: 'empty',
       },
       resolve: {
+        alias: webpackBaseConfig.resolve.alias,
         extensions: ['.js', '.ts', '.tsx'],
       },
     },
diff --git a/test/karma.conf.profile.js b/test/karma.conf.profile.js
index 5b58a5ed29c470..d6d05a531abac0 100644
--- a/test/karma.conf.profile.js
+++ b/test/karma.conf.profile.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const { chromium } = require('playwright');
 const webpack = require('webpack');
+const webpackBaseConfig = require('../webpackBaseConfig');
 
 const workspaceRoot = path.resolve(__dirname, '../');
 
@@ -103,6 +104,7 @@ module.exports = function setKarmaConfig(config) {
       },
       resolve: {
         alias: {
+          ...webpackBaseConfig.resolve.alias,
           // "How to use profiling in production"
           // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#react-dom1660--scheduler0100
           'react-dom$': 'react-dom/profiling',
diff --git a/webpackBaseConfig.js b/webpackBaseConfig.js
index c5715bccedccad..addbbd0302fc16 100644
--- a/webpackBaseConfig.js
+++ b/webpackBaseConfig.js
@@ -8,6 +8,8 @@ module.exports = {
   context: path.resolve(__dirname),
   resolve: {
     modules: [__dirname, 'node_modules'],
+    // TODO: Can be dropped with webpack 5 which supports the `exports` field
+    // But might be required for eslint-plugin-import: https://github.com/benmosher/eslint-plugin-import/issues/1868
     alias: {
       '@material-ui/core': path.resolve(__dirname, './packages/material-ui/src'),
       '@material-ui/docs': path.resolve(__dirname, './packages/material-ui-docs/src'),

From 0c87291dea89cc4c0f9e7b51f905ee0e85e8efa0 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 17 Apr 2021 09:31:50 +0200
Subject: [PATCH 2/5] Leverage exports in top-level-imports test

---
 .../material-ui-codemod/src/v4.0.0/top-level-imports.js    | 7 +------
 packages/material-ui/package.json                          | 2 +-
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js b/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
index ed65d58d7682e9..535b67ef3d15e7 100644
--- a/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
+++ b/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
@@ -5,12 +5,7 @@ export default function transformer(fileInfo, api, options) {
   const importModule = options.importModule || '@material-ui/core';
   const targetModule = options.targetModule || '@material-ui/core';
 
-  let requirePath = importModule;
-
-  // TODO: do we still need this?
-  if (process.env.NODE_ENV === 'test') {
-    requirePath = requirePath.replace(/^@material-ui\/core/, '../../../material-ui/src');
-  }
+  const requirePath = importModule;
 
   // eslint-disable-next-line global-require, import/no-dynamic-require
   const whitelist = require(requirePath);
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
index 73c9c9e284521b..924d2aa4c6f7dc 100644
--- a/packages/material-ui/package.json
+++ b/packages/material-ui/package.json
@@ -5,7 +5,7 @@
   "author": "Material-UI Team",
   "description": "Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
   "exports": {
-    ".": "./index.ts",
+    ".": "./src/index.js",
     "./*": "./src/*/index.js"
   },
   "keywords": [

From 961bfa7488ba3ec19749706ebd83ef7f1a61cbf2 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 17 Apr 2021 09:33:18 +0200
Subject: [PATCH 3/5] Leverage exports in optimal-imports test

---
 .../material-ui-codemod/src/v4.0.0/optimal-imports.js     | 8 --------
 packages/material-ui/package.json                         | 1 +
 2 files changed, 1 insertion(+), 8 deletions(-)

diff --git a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js
index 0c7d54a4fb3439..512cc3fb18c15c 100644
--- a/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js
+++ b/packages/material-ui-codemod/src/v4.0.0/optimal-imports.js
@@ -2,14 +2,6 @@ import { dirname } from 'path';
 import addImports from 'jscodeshift-add-imports';
 import getJSExports from '../util/getJSExports';
 
-// TODO: do we still need this?
-// istanbul ignore next
-if (process.env.NODE_ENV === 'test') {
-  const resolve = require.resolve;
-  require.resolve = (source) =>
-    resolve(source.replace(/^@material-ui\/core\/es/, '../../../material-ui/src'));
-}
-
 export default function transformer(fileInfo, api, options) {
   const j = api.jscodeshift;
   const importModule = options.importModule || '@material-ui/core';
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
index 924d2aa4c6f7dc..23babca81a0d3c 100644
--- a/packages/material-ui/package.json
+++ b/packages/material-ui/package.json
@@ -6,6 +6,7 @@
   "description": "Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
   "exports": {
     ".": "./src/index.js",
+    "./es/*": "./src/*/index.js",
     "./*": "./src/*/index.js"
   },
   "keywords": [

From dab0b051e025b1fffafffb58655e6b0dc3480b01 Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 17 Apr 2021 09:34:30 +0200
Subject: [PATCH 4/5] add note about webpack 5 and exports vs alias

---
 test/karma.conf.js         | 1 +
 test/karma.conf.profile.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/test/karma.conf.js b/test/karma.conf.js
index ab402ec17aa346..c4ffc265de01d3 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -106,6 +106,7 @@ module.exports = function setKarmaConfig(config) {
         fs: 'empty',
       },
       resolve: {
+        // TODO: Can be dropped with webpack 5 which supports the `exports` field
         alias: webpackBaseConfig.resolve.alias,
         extensions: ['.js', '.ts', '.tsx'],
       },
diff --git a/test/karma.conf.profile.js b/test/karma.conf.profile.js
index d6d05a531abac0..9d8cea975a198e 100644
--- a/test/karma.conf.profile.js
+++ b/test/karma.conf.profile.js
@@ -104,6 +104,7 @@ module.exports = function setKarmaConfig(config) {
       },
       resolve: {
         alias: {
+          // TODO: Can be dropped with webpack 5 which supports the `exports` field
           ...webpackBaseConfig.resolve.alias,
           // "How to use profiling in production"
           // https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#react-dom1660--scheduler0100

From 7b5ca034f4f0fb1c4a8a5a3d414242aac594e0ec Mon Sep 17 00:00:00 2001
From: eps1lon <silbermann.sebastian@gmail.com>
Date: Sat, 17 Apr 2021 09:58:37 +0200
Subject: [PATCH 5/5] Apply to all packages

---
 babel.config.js                               | 31 +------------------
 packages/material-ui-docs/package.json        |  5 ++-
 packages/material-ui-icons/package.json       |  5 ++-
 packages/material-ui-lab/package.json         |  6 +++-
 .../material-ui-styled-engine-sc/package.json |  6 +++-
 .../material-ui-styled-engine/package.json    |  6 +++-
 packages/material-ui-styles/package.json      |  6 +++-
 packages/material-ui-system/package.json      |  6 +++-
 packages/material-ui-unstyled/package.json    |  6 +++-
 packages/material-ui-utils/package.json       |  5 ++-
 10 files changed, 43 insertions(+), 39 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index c315ca859b925b..5a806f17656455 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -3,23 +3,6 @@ const path = require('path');
 const errorCodesPath = path.resolve(__dirname, './docs/public/static/error-codes.json');
 const missingError = process.env.MUI_EXTRACT_ERROR_CODES === 'true' ? 'write' : 'annotate';
 
-function resolveAliasPath(relativeToBabelConf) {
-  const resolvedPath = path.relative(process.cwd(), path.resolve(__dirname, relativeToBabelConf));
-  return `./${resolvedPath.replace('\\', '/')}`;
-}
-
-const defaultAlias = {
-  '@material-ui/docs': resolveAliasPath('./packages/material-ui-docs/src'),
-  '@material-ui/icons': resolveAliasPath('./packages/material-ui-icons/src'),
-  '@material-ui/lab': resolveAliasPath('./packages/material-ui-lab/src'),
-  '@material-ui/styled-engine': resolveAliasPath('./packages/material-ui-styled-engine/src'),
-  '@material-ui/styled-engine-sc': resolveAliasPath('./packages/material-ui-styled-engine-sc/src'),
-  '@material-ui/styles': resolveAliasPath('./packages/material-ui-styles/src'),
-  '@material-ui/system': resolveAliasPath('./packages/material-ui-system/src'),
-  '@material-ui/unstyled': resolveAliasPath('./packages/material-ui-unstyled/src'),
-  '@material-ui/utils': resolveAliasPath('./packages/material-ui-utils/src'),
-};
-
 const productionPlugins = [
   ['babel-plugin-react-remove-properties', { properties: ['data-mui-test'] }],
 ];
@@ -87,7 +70,6 @@ module.exports = function getBabelConfig(api) {
     plugins.push([
       'babel-plugin-module-resolver',
       {
-        alias: defaultAlias,
         root: ['./'],
       },
     ]);
@@ -105,7 +87,6 @@ module.exports = function getBabelConfig(api) {
             'babel-plugin-module-resolver',
             {
               root: ['./'],
-              alias: defaultAlias,
             },
           ],
         ],
@@ -116,7 +97,6 @@ module.exports = function getBabelConfig(api) {
             'babel-plugin-module-resolver',
             {
               alias: {
-                ...defaultAlias,
                 modules: './modules',
                 'typescript-to-proptypes': './packages/typescript-to-proptypes/src',
               },
@@ -138,21 +118,12 @@ module.exports = function getBabelConfig(api) {
             'babel-plugin-module-resolver',
             {
               root: ['./'],
-              alias: defaultAlias,
             },
           ],
         ],
       },
       benchmark: {
-        plugins: [
-          ...productionPlugins,
-          [
-            'babel-plugin-module-resolver',
-            {
-              alias: defaultAlias,
-            },
-          ],
-        ],
+        plugins: productionPlugins,
       },
     },
   };
diff --git a/packages/material-ui-docs/package.json b/packages/material-ui-docs/package.json
index 9ad55889c4809f..793acfa759433f 100644
--- a/packages/material-ui-docs/package.json
+++ b/packages/material-ui-docs/package.json
@@ -4,7 +4,10 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Docs - Documentation building blocks.",
-  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./*": "./src/*/index.js"
+  },
   "keywords": [
     "react",
     "react-component",
diff --git a/packages/material-ui-icons/package.json b/packages/material-ui-icons/package.json
index dfb9935b985f80..1fa586c3c861c4 100644
--- a/packages/material-ui-icons/package.json
+++ b/packages/material-ui-icons/package.json
@@ -4,7 +4,10 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "Material Design icons distributed as SVG React components.",
-  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./*": "./src/*/index.js"
+  },
   "keywords": [
     "react",
     "react-component",
diff --git a/packages/material-ui-lab/package.json b/packages/material-ui-lab/package.json
index 248a5bc4c6edc0..a025dbeb2d2772 100644
--- a/packages/material-ui-lab/package.json
+++ b/packages/material-ui-lab/package.json
@@ -4,7 +4,11 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "Laboratory for new Material-UI modules.",
-  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./es/*": "./src/*/index.js",
+    "./*": "./src/*/index.js"
+  },
   "keywords": [
     "react",
     "react-component",
diff --git a/packages/material-ui-styled-engine-sc/package.json b/packages/material-ui-styled-engine-sc/package.json
index c27c0ef67fff15..e7ea3422a43358 100644
--- a/packages/material-ui-styled-engine-sc/package.json
+++ b/packages/material-ui-styled-engine-sc/package.json
@@ -4,7 +4,11 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "styled() API wrapper package for styled-components.",
-  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./es/*": "./src/*/index.js",
+    "./*": "./src/*/index.js"
+  },
   "keywords": [
     "react",
     "react-component",
diff --git a/packages/material-ui-styled-engine/package.json b/packages/material-ui-styled-engine/package.json
index 0eb074a2d7e2a5..c6d9bdfad839c0 100644
--- a/packages/material-ui-styled-engine/package.json
+++ b/packages/material-ui-styled-engine/package.json
@@ -4,7 +4,11 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "styled() API wrapper package for emotion.",
-  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./es/*": "./src/*/index.js",
+    "./*": "./src/*/index.js"
+  },
   "keywords": [
     "react",
     "react-component",
diff --git a/packages/material-ui-styles/package.json b/packages/material-ui-styles/package.json
index 1a1064e9206891..be70400659f7b7 100644
--- a/packages/material-ui-styles/package.json
+++ b/packages/material-ui-styles/package.json
@@ -4,7 +4,11 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "Material-UI Styles - The styling solution of Material-UI.",
-  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./es/*": "./src/*/index.js",
+    "./*": "./src/*/index.js"
+  },
   "keywords": [
     "react",
     "react-component",
diff --git a/packages/material-ui-system/package.json b/packages/material-ui-system/package.json
index 34c4ed62a87a1b..2b10e060738cbb 100644
--- a/packages/material-ui-system/package.json
+++ b/packages/material-ui-system/package.json
@@ -4,7 +4,11 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "CSS utilities for rapidly laying out custom designs.",
-  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./es/*": "./src/*/index.js",
+    "./*": "./src/*/index.js"
+  },
   "keywords": [
     "react",
     "react-component",
diff --git a/packages/material-ui-unstyled/package.json b/packages/material-ui-unstyled/package.json
index 7f9f53705a5dc3..ac5e67795a2701 100644
--- a/packages/material-ui-unstyled/package.json
+++ b/packages/material-ui-unstyled/package.json
@@ -4,7 +4,11 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "Unstyled React components with which to implement custom design systems.",
-  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./es/*": "./src/*/index.js",
+    "./*": "./src/*/index.js"
+  },
   "keywords": [
     "react",
     "react-component",
diff --git a/packages/material-ui-utils/package.json b/packages/material-ui-utils/package.json
index fe86107023ab5b..aa9fd9d5171418 100644
--- a/packages/material-ui-utils/package.json
+++ b/packages/material-ui-utils/package.json
@@ -4,7 +4,10 @@
   "private": false,
   "author": "Material-UI Team",
   "description": "Utility functions for React components.",
-  "main": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./es": "./src/index.ts"
+  },
   "keywords": [
     "react",
     "react-component",