diff --git a/test/e2e/app-dir/import.test.ts b/test/e2e/app-dir/import.test.ts
new file mode 100644
index 000000000000000..1a6844d32011874
--- /dev/null
+++ b/test/e2e/app-dir/import.test.ts
@@ -0,0 +1,38 @@
+import path from 'path'
+import cheerio from 'cheerio'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+import { renderViaHTTP } from 'next-test-utils'
+
+describe('app dir imports', () => {
+  if (process.env.NEXT_TEST_REACT_VERSION === '^17') {
+    it('should skip for react v17', () => {})
+    return
+  }
+  let next: NextInstance
+
+  function runTests() {
+    beforeAll(async () => {
+      next = await createNext({
+        files: new FileRef(path.join(__dirname, 'import')),
+        dependencies: {
+          react: 'experimental',
+          'react-dom': 'experimental',
+          typescript: 'latest',
+          '@types/react': 'latest',
+          '@types/node': 'latest',
+        },
+      })
+    })
+    afterAll(() => next.destroy())
+    ;['js', 'jsx', 'ts', 'tsx'].forEach((ext) => {
+      it(`we can import all components from .${ext}`, async () => {
+        const html = await renderViaHTTP(next.url, `/${ext}`)
+        const $ = cheerio.load(html)
+        expect($('#js').text()).toBe('CompJs')
+      })
+    })
+  }
+
+  runTests()
+})
diff --git a/test/e2e/app-dir/import/app/js/page.js b/test/e2e/app-dir/import/app/js/page.js
new file mode 100644
index 000000000000000..0e58a500feb7eeb
--- /dev/null
+++ b/test/e2e/app-dir/import/app/js/page.js
@@ -0,0 +1,15 @@
+import CompJs from '../../components/compJs'
+import CompJsx from '../../components/compJsx'
+import CompTs from '../../components/compTs'
+import CompTsx from '../../components/compTsx'
+
+export default function Page() {
+  return (
+    <>
+      <CompJs />
+      <CompJsx />
+      <CompTs />
+      <CompTsx />
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/import/app/jsx/page.jsx b/test/e2e/app-dir/import/app/jsx/page.jsx
new file mode 100644
index 000000000000000..0e58a500feb7eeb
--- /dev/null
+++ b/test/e2e/app-dir/import/app/jsx/page.jsx
@@ -0,0 +1,15 @@
+import CompJs from '../../components/compJs'
+import CompJsx from '../../components/compJsx'
+import CompTs from '../../components/compTs'
+import CompTsx from '../../components/compTsx'
+
+export default function Page() {
+  return (
+    <>
+      <CompJs />
+      <CompJsx />
+      <CompTs />
+      <CompTsx />
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/import/app/layout.tsx b/test/e2e/app-dir/import/app/layout.tsx
new file mode 100644
index 000000000000000..0cb5d990673d1ee
--- /dev/null
+++ b/test/e2e/app-dir/import/app/layout.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
diff --git a/test/e2e/app-dir/import/app/ts/page.ts b/test/e2e/app-dir/import/app/ts/page.ts
new file mode 100644
index 000000000000000..f09cfb158adebb2
--- /dev/null
+++ b/test/e2e/app-dir/import/app/ts/page.ts
@@ -0,0 +1,14 @@
+import React from 'react'
+import CompJs from '../../components/compJs'
+import CompJsx from '../../components/compJsx'
+import CompTs from '../../components/compTs'
+import CompTsx from '../../components/compTsx'
+
+export default function Page() {
+  return React.createElement(React.Fragment, null, [
+    React.createElement(CompJs, null),
+    React.createElement(CompJsx, null),
+    React.createElement(CompTs, null),
+    React.createElement(CompTsx, null),
+  ])
+}
diff --git a/test/e2e/app-dir/import/app/tsx/page.tsx b/test/e2e/app-dir/import/app/tsx/page.tsx
new file mode 100644
index 000000000000000..7c0ab4283db71f4
--- /dev/null
+++ b/test/e2e/app-dir/import/app/tsx/page.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+import CompJs from '../../components/compJs'
+import CompJsx from '../../components/compJsx'
+import CompTs from '../../components/compTs'
+import CompTsx from '../../components/compTsx'
+
+export default function Page() {
+  return (
+    <>
+      <CompJs />
+      <CompJsx />
+      <CompTs />
+      <CompTsx />
+    </>
+  )
+}
diff --git a/test/e2e/app-dir/import/components/compJs.js b/test/e2e/app-dir/import/components/compJs.js
new file mode 100644
index 000000000000000..710a4149bc3e9c2
--- /dev/null
+++ b/test/e2e/app-dir/import/components/compJs.js
@@ -0,0 +1,3 @@
+export default function CompJs() {
+  return <div id="js">CompJs</div>
+}
diff --git a/test/e2e/app-dir/import/components/compJsx.jsx b/test/e2e/app-dir/import/components/compJsx.jsx
new file mode 100644
index 000000000000000..889faddff420786
--- /dev/null
+++ b/test/e2e/app-dir/import/components/compJsx.jsx
@@ -0,0 +1,3 @@
+export default function CompJsx() {
+  return <div id="jsx">CompJsx</div>
+}
diff --git a/test/e2e/app-dir/import/components/compTs.tsx b/test/e2e/app-dir/import/components/compTs.tsx
new file mode 100644
index 000000000000000..26be518981e741a
--- /dev/null
+++ b/test/e2e/app-dir/import/components/compTs.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function CompTs() {
+  return React.createElement('div', { id: 'ts' }, 'CompTs')
+}
diff --git a/test/e2e/app-dir/import/components/compTsx.tsx b/test/e2e/app-dir/import/components/compTsx.tsx
new file mode 100644
index 000000000000000..1712022879c88f4
--- /dev/null
+++ b/test/e2e/app-dir/import/components/compTsx.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function CompTsx() {
+  return <div id="tsx">CompTsx</div>
+}
diff --git a/test/e2e/app-dir/import/next.config.js b/test/e2e/app-dir/import/next.config.js
new file mode 100644
index 000000000000000..e31d8c63a60d932
--- /dev/null
+++ b/test/e2e/app-dir/import/next.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  strictMode: true,
+  experimental: {
+    appDir: true,
+  },
+}