Use import to load page and layout

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')}
         }

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())

test/e2e/app-dir/app-alias/.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

test/e2e/app-dir/app-alias/next.config.js

@@ -1,6 +1,5 @@
-module.exports = {
+export default {
   experimental: {
     appDir: true,
-    transpileModules: ['ui'],
   },
 }

test/e2e/app-dir/app-alias/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}