improves baseUrl resolution in typescript monorepos

Typescript configuration can inherit from files above cwd in the
filesystem. If a baseUrl was declared in such a file, it would not be
picked up by the webpack config. This would force users to use the
next-transpile-module and duplicate configuration with unintuitive path
relations (see #13197 for a detailed analysis)

If baseUrl is resolved it should be used instead of dir as the root
include for babel-resolve-loader.

Author: jeantil

packages/next/build/webpack-config.ts

@@ -52,6 +52,7 @@ import WebpackConformancePlugin, {
 } from './webpack/plugins/webpack-conformance-plugin'
 import { WellKnownErrorsPlugin } from './webpack/plugins/wellknown-errors-plugin'
 import { codeFrameColumns } from '@babel/code-frame'
+import { getTypeScriptConfiguration } from '../lib/typescript/getTypeScriptConfiguration'
 
 type ExcludesFalse = <T>(x: T | false) => x is T
 
@@ -250,7 +251,9 @@ export default async function getBaseWebpackConfig(
   let jsConfig
   // jsconfig is a subset of tsconfig
   if (useTypeScript) {
-    jsConfig = parseJsonFile(tsConfigPath)
+    const ts = (await import(typeScriptPath)) as typeof import('typescript')
+    const tsConfig = await getTypeScriptConfiguration(ts, tsConfigPath)
+    jsConfig = { compilerOptions: tsConfig.options }
   }
 
   const jsConfigPath = path.join(dir, 'jsconfig.json')
@@ -734,7 +737,9 @@ export default async function getBaseWebpackConfig(
       rules: [
         {
           test: /\.(tsx|ts|js|mjs|jsx)$/,
-          include: [dir, ...babelIncludeRegexes],
+          include: resolvedBaseUrl
+            ? [resolvedBaseUrl, dir, ...babelIncludeRegexes]
+            : [dir, ...babelIncludeRegexes],
           exclude: (excludePath: string) => {
             if (babelIncludeRegexes.some((r) => r.test(excludePath))) {
               return false

test/integration/typescript-workspaces-paths/packages/lib/a/api.ts

@@ -0,0 +1 @@
+export default () => 'Hello from a'

test/integration/typescript-workspaces-paths/packages/lib/b/api.ts

@@ -0,0 +1 @@
+export default () => 'Hello from b'

test/integration/typescript-workspaces-paths/packages/lib/b/b-only.ts

@@ -0,0 +1 @@
+export default () => 'Hello from only b'

test/integration/typescript-workspaces-paths/packages/www/components/alias-to-d-ts.d.ts

@@ -0,0 +1 @@
+export default () => any

test/integration/typescript-workspaces-paths/packages/www/components/alias-to-d-ts.tsx

@@ -0,0 +1,3 @@
+export default () => {
+  return <>Not aliased to d.ts file</>
+}

test/integration/typescript-workspaces-paths/packages/www/components/hello.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function Hello() {
+  return <>Hello</>
+}

test/integration/typescript-workspaces-paths/packages/www/components/world.tsx

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

test/integration/typescript-workspaces-paths/packages/www/next.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  webpack: function (config) {
+    return config
+  },
+  onDemandEntries: {
+    // Make sure entries are not getting disposed.
+    maxInactiveAge: 1000 * 60 * 60,
+  },
+}

test/integration/typescript-workspaces-paths/packages/www/pages/alias-to-d-ts.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import NotAliasedToDTS from 'd-ts-alias'
+
+export default function HelloPage(): JSX.Element {
+  return (
+    <div>
+      <NotAliasedToDTS />
+    </div>
+  )
+}