diff --git a/packages/next/build/webpack/loaders/next-app-loader.ts b/packages/next/build/webpack/loaders/next-app-loader.ts
index 0e428687b0b2b13..93cdca7abf19a52 100644
--- a/packages/next/build/webpack/loaders/next-app-loader.ts
+++ b/packages/next/build/webpack/loaders/next-app-loader.ts
@@ -69,7 +69,7 @@ async function createTreeCodeFromPath({
         // Use '' for segment as it's the page. There can't be a segment called '' so this is the safest way to add it.
         props[parallelKey] = `['', {}, {layoutOrPagePath: ${JSON.stringify(
           resolvedPagePath
-        )}, page: () => require(${JSON.stringify(resolvedPagePath)})}]`
+        )}, page: () => import(${JSON.stringify(resolvedPagePath)})}]`
         continue
       }
 
@@ -108,7 +108,7 @@ async function createTreeCodeFromPath({
                 file === FILE_TYPES.layout
                   ? `layoutOrPagePath: ${JSON.stringify(filePath)},`
                   : ''
-              }'${file}': () => require(${JSON.stringify(filePath)}),`
+              }'${file}': () => import(${JSON.stringify(filePath)}),`
             })
             .join('\n')}
         }
diff --git a/test/e2e/app-dir/app-alias.test.ts b/test/e2e/app-dir/app-alias.test.ts
index 6180195a2f464f7..3b8c434d05079e7 100644
--- a/test/e2e/app-dir/app-alias.test.ts
+++ b/test/e2e/app-dir/app-alias.test.ts
@@ -22,6 +22,9 @@ describe('app-dir alias handling', () => {
         '@types/react': 'latest',
         '@types/node': 'latest',
       },
+      packageJson: {
+        type: 'module',
+      },
     })
   })
   afterAll(() => next.destroy())
diff --git a/test/e2e/app-dir/app-alias/.vscode/settings.json b/test/e2e/app-dir/app-alias/.vscode/settings.json
new file mode 100644
index 000000000000000..ce508cddaca8981
--- /dev/null
+++ b/test/e2e/app-dir/app-alias/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}
diff --git a/test/e2e/app-dir/app-alias/next.config.js b/test/e2e/app-dir/app-alias/next.config.js
index e5b838697b38b05..3d6be3a00f6e38c 100644
--- a/test/e2e/app-dir/app-alias/next.config.js
+++ b/test/e2e/app-dir/app-alias/next.config.js
@@ -1,6 +1,5 @@
-module.exports = {
+export default {
   experimental: {
     appDir: true,
-    transpileModules: ['ui'],
   },
 }
diff --git a/test/e2e/app-dir/app-alias/package.json b/test/e2e/app-dir/app-alias/package.json
new file mode 100644
index 000000000000000..3dbc1ca591c0557
--- /dev/null
+++ b/test/e2e/app-dir/app-alias/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}