Experimental feature for allowing importing Typescript files outside of the root directory

packages/next/build/webpack-config.ts

@@ -924,7 +924,10 @@ export default async function getBaseWebpackConfig(
           : []),
         {
           test: /\.(tsx|ts|js|mjs|jsx)$/,
-          include: [dir, ...babelIncludeRegexes],
+          ...(config.experimental.externalDir
+            ? // Allowing importing TS/TSX files from outside of the root dir.
+              {}
+            : { include: [dir, ...babelIncludeRegexes] }),
           exclude: (excludePath: string) => {
             if (babelIncludeRegexes.some((r) => r.test(excludePath))) {
               return false

packages/next/next-server/server/config-shared.ts

@@ -79,6 +79,7 @@ export const defaultConfig: NextConfig = {
     scrollRestoration: false,
     scriptLoader: false,
     stats: false,
+    externalDir: false,
   },
   future: {
     strictPostcssConfiguration: false,

test/integration/typescript-external-dir/project/components/world.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function World(): JSX.Element {
+  return <>World</>
+}

test/integration/typescript-external-dir/project/next.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  onDemandEntries: {
+    // Make sure entries are not getting disposed.
+    maxInactiveAge: 1000 * 60 * 60,
+  },
+  experimental: {
+    externalDir: true,
+  },
+}

test/integration/typescript-external-dir/project/pages/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { World } from 'components/world'
+
+// External
+import { Counter } from '../../shared/components/counter'
+
+export default function HelloPage(): JSX.Element {
+  return (
+    <div>
+      Hello <World />!
+      <br />
+      <Counter />
+    </div>
+  )
+}

test/integration/typescript-external-dir/project/test/index.test.js

@@ -0,0 +1,31 @@
+/* eslint-env jest */
+
+import { join } from 'path'
+import cheerio from 'cheerio'
+import { renderViaHTTP, findPort, launchApp, killApp } from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '..')
+let appPort
+let app
+
+async function get$(path, query) {
+  const html = await renderViaHTTP(appPort, path, query)
+  return cheerio.load(html)
+}
+
+describe('TypeScript Features', () => {
+  describe('default behavior', () => {
+    beforeAll(async () => {
+      appPort = await findPort()
+      app = await launchApp(appDir, appPort, {})
+    })
+    afterAll(() => killApp(app))
+
+    it('should render the page with external TS/TSX dependencies', async () => {
+      const $ = await get$('/')
+      expect($('body').text()).toMatch(/Hello World!Counter: 0/)
+    })
+  })
+})

test/integration/typescript-external-dir/project/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "esModuleInterop": true,
+    "module": "esnext",
+    "jsx": "preserve",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", "components", "pages"]
+}

test/integration/typescript-external-dir/shared/components/counter.tsx

@@ -0,0 +1,12 @@
+import React, { useState } from 'react'
+
+import inc from '../libs/inc'
+
+export function Counter(): JSX.Element {
+  const [x, setX] = useState(0)
+  return (
+    <button id="counter" onClick={() => setX(inc(x))}>
+      Counter: {x}
+    </button>
+  )
+}

test/integration/typescript-external-dir/shared/libs/inc.ts

@@ -0,0 +1,3 @@
+export default function inc(x: number) {
+  return x + 1
+}

test/integration/typescript-external-dir/shared/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "esnext",
+    "jsx": "preserve",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["components", "libs"]
+}