diff --git a/package.json b/package.json
index 19a72d4d2fb63d..d3f1efddffcd3e 100644
--- a/package.json
+++ b/package.json
@@ -116,6 +116,7 @@
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
     "babel-loader": "^9.1.2",
+    "babel-plugin-add-import-extension": "^1.6.0",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-module-resolver": "^5.0.0",
diff --git a/scripts/build.mjs b/scripts/build.mjs
index cc7b843b9e1a07..8703df8a3c914c 100644
--- a/scripts/build.mjs
+++ b/scripts/build.mjs
@@ -79,6 +79,10 @@ async function run(argv) {
     '--ignore',
     // Need to put these patterns in quotes otherwise they might be evaluated by the used terminal.
     `"${ignore.join('","')}"`,
+    '--plugins',
+    // Make sure this plugin doesn't get picked up by the rollup build, rollup bundler would try to resolve
+    // non-existing javascript files.
+    'babel-plugin-add-import-extension',
   ];
   if (largeFiles) {
     babelArgs.push('--compact false');
diff --git a/scripts/copyFiles.mjs b/scripts/copyFiles.mjs
index 128ca8548bb070..30d3626560abb7 100644
--- a/scripts/copyFiles.mjs
+++ b/scripts/copyFiles.mjs
@@ -28,21 +28,32 @@ async function includeFileInBuild(file) {
 async function createModulePackages({ from, to }) {
   const directoryPackages = glob.sync('*/index.{js,ts,tsx}', { cwd: from }).map(path.dirname);
 
-  await Promise.all(
+  const modulePackages = await Promise.all(
     directoryPackages.map(async (directoryPackage) => {
       const packageJsonPath = path.join(to, directoryPackage, 'package.json');
+      const packageDir = path.dirname(packageJsonPath);
       const topLevelPathImportsAreCommonJSModules = await fse.pathExists(
-        path.resolve(path.dirname(packageJsonPath), '../esm'),
+        path.resolve(packageDir, '../esm'),
       );
 
+      const esm = topLevelPathImportsAreCommonJSModules
+        ? path.posix.join('../esm', directoryPackage, 'index.js')
+        : './index.js';
+
+      const cjs = topLevelPathImportsAreCommonJSModules
+        ? './index.js'
+        : path.posix.join('../node', directoryPackage, 'index.js');
+
       const packageJson = {
         sideEffects: false,
-        module: topLevelPathImportsAreCommonJSModules
-          ? path.posix.join('../esm', directoryPackage, 'index.js')
-          : './index.js',
-        main: topLevelPathImportsAreCommonJSModules
-          ? './index.js'
-          : path.posix.join('../node', directoryPackage, 'index.js'),
+        module: esm,
+        main: cjs,
+        type: 'module',
+        exports: {
+          '.': {
+            require: cjs,
+          },
+        },
         types: './index.d.ts',
       };
 
@@ -68,9 +79,16 @@ async function createModulePackages({ from, to }) {
         throw new Error(`${packageJsonPath}:\n${manifestErrorMessages.join('\n')}`);
       }
 
-      return packageJsonPath;
+      return {
+        [`./${path.basename(packageDir)}`]: {
+          import: `./${path.relative(to, path.resolve(packageDir, esm))}`,
+          require: `./${path.relative(to, path.resolve(packageDir, cjs))}`,
+        },
+      };
     }),
   );
+
+  return modulePackages;
 }
 
 async function typescriptCopy({ from, to }) {
@@ -84,24 +102,37 @@ async function typescriptCopy({ from, to }) {
   return Promise.all(cmds);
 }
 
-async function createPackageFile() {
+async function createPackageFile({ innerModules }) {
   const packageData = await fse.readFile(path.resolve(packagePath, './package.json'), 'utf8');
   const { nyc, scripts, devDependencies, workspaces, ...packageDataOther } =
     JSON.parse(packageData);
 
+  const cjs = fse.existsSync(path.resolve(buildPath, './node/index.js'))
+    ? './node/index.js'
+    : './index.js';
+
+  const esm = fse.existsSync(path.resolve(buildPath, './esm/index.js'))
+    ? './esm/index.js'
+    : './index.js';
+
   const newPackageData = {
     ...packageDataOther,
     private: false,
     ...(packageDataOther.main
       ? {
-          main: fse.existsSync(path.resolve(buildPath, './node/index.js'))
-            ? './node/index.js'
-            : './index.js',
-          module: fse.existsSync(path.resolve(buildPath, './esm/index.js'))
-            ? './esm/index.js'
-            : './index.js',
+          main: cjs,
+          module: esm,
         }
       : {}),
+    type: 'module',
+    exports: {
+      '.': {
+        import: esm,
+        require: cjs,
+      },
+      ...Object.assign({}, ...innerModules),
+    },
+    types: './index.d.ts',
   };
 
   const typeDefinitionsFilePath = path.resolve(buildPath, './index.d.ts');
@@ -158,7 +189,9 @@ async function run() {
     // TypeScript
     await typescriptCopy({ from: srcPath, to: buildPath });
 
-    const packageData = await createPackageFile();
+    const innerModules = await createModulePackages({ from: srcPath, to: buildPath });
+
+    const packageData = await createPackageFile({ innerModules });
 
     await Promise.all(
       [
@@ -170,8 +203,6 @@ async function run() {
     );
 
     await addLicense(packageData);
-
-    await createModulePackages({ from: srcPath, to: buildPath });
   } catch (err) {
     console.error(err);
     process.exit(1);
diff --git a/test/bundling/fixtures/node-esm/development.js b/test/bundling/fixtures/node-esm/development.js
deleted file mode 100644
index 3c51c76266bab2..00000000000000
--- a/test/bundling/fixtures/node-esm/development.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as ReactIs from 'react-is';
-import Accordion2 from '@mui/material/Accordion';
-
-// eslint-disable-next-line no-console
-console.assert(ReactIs.isValidElementType(Accordion2));
diff --git a/yarn.lock b/yarn.lock
index 904f31bf68f976..70c2d83d6d585d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4833,6 +4833,13 @@ babel-loader@^9.1.2:
     find-cache-dir "^3.3.2"
     schema-utils "^4.0.0"
 
+babel-plugin-add-import-extension@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-add-import-extension/-/babel-plugin-add-import-extension-1.6.0.tgz#807ce65b38d4763797c1616cb4e8372da167cdd1"
+  integrity sha512-JVSQPMzNzN/S4wPRoKQ7+u8PlkV//BPUMnfWVbr63zcE+6yHdU2Mblz10Vf7qe+6Rmu4svF5jG7JxdcPi9VvKg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 babel-plugin-istanbul@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"