diff --git a/babel.config.js b/babel.config.js
index 9240d2d6f1597c..5a806f17656455 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -3,24 +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/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'),
-  '@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'] }],
 ];
@@ -88,7 +70,6 @@ module.exports = function getBabelConfig(api) {
     plugins.push([
       'babel-plugin-module-resolver',
       {
-        alias: defaultAlias,
         root: ['./'],
       },
     ]);
@@ -106,7 +87,6 @@ module.exports = function getBabelConfig(api) {
             'babel-plugin-module-resolver',
             {
               root: ['./'],
-              alias: defaultAlias,
             },
           ],
         ],
@@ -117,7 +97,6 @@ module.exports = function getBabelConfig(api) {
             'babel-plugin-module-resolver',
             {
               alias: {
-                ...defaultAlias,
                 modules: './modules',
                 'typescript-to-proptypes': './packages/typescript-to-proptypes/src',
               },
@@ -139,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/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..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,13 +2,6 @@ import { dirname } from 'path';
 import addImports from 'jscodeshift-add-imports';
 import getJSExports from '../util/getJSExports';
 
-// 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-codemod/src/v4.0.0/top-level-imports.js b/packages/material-ui-codemod/src/v4.0.0/top-level-imports.js
index cbaec0b52572d8..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,11 +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;
-
-  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-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",
diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
index 1d71141c16ad82..23babca81a0d3c 100644
--- a/packages/material-ui/package.json
+++ b/packages/material-ui/package.json
@@ -4,7 +4,11 @@
   "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": {
+    ".": "./src/index.js",
+    "./es/*": "./src/*/index.js",
+    "./*": "./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..c4ffc265de01d3 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,8 @@ 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 5b58a5ed29c470..9d8cea975a198e 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,8 @@ 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
           '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'),