feat: allow module: Preserve tsconfig option

packages/next/src/lib/typescript/writeConfigurationDefaults.ts

@@ -40,14 +40,11 @@ function getDesiredCompilerOptions(
     // These values are required and cannot be changed by the user
     // Keep this in sync with the webpack config
     // 'parsedValue' matches the output value from ts.parseJsonConfigFileContent()
-    esModuleInterop: {
-      value: true,
-      reason: 'requirement for SWC / babel',
-    },
     module: {
       parsedValue: ts.ModuleKind.ESNext,
       // All of these values work:
       parsedValues: [
+        semver.gte(ts.version, '5.4.0') && (ts.ModuleKind as any).Preserve,
         ts.ModuleKind.ES2020,
         ts.ModuleKind.ESNext,
         ts.ModuleKind.CommonJS,
@@ -58,28 +55,47 @@ function getDesiredCompilerOptions(
       value: 'esnext',
       reason: 'for dynamic import() support',
     },
-    moduleResolution: {
-      // In TypeScript 5.0, `NodeJs` has renamed to `Node10`
-      parsedValue:
-        ts.ModuleResolutionKind.Bundler ??
-        ts.ModuleResolutionKind.NodeNext ??
-        (ts.ModuleResolutionKind as any).Node10 ??
-        ts.ModuleResolutionKind.NodeJs,
-      // All of these values work:
-      parsedValues: [
-        (ts.ModuleResolutionKind as any).Node10 ??
-          ts.ModuleResolutionKind.NodeJs,
-        // only newer TypeScript versions have this field, it
-        // will be filtered for new versions of TypeScript
-        (ts.ModuleResolutionKind as any).Node12,
-        ts.ModuleResolutionKind.Node16,
-        ts.ModuleResolutionKind.NodeNext,
-        ts.ModuleResolutionKind.Bundler,
-      ].filter((val) => typeof val !== 'undefined'),
-      value: 'node',
-      reason: 'to match webpack resolution',
-    },
-    resolveJsonModule: { value: true, reason: 'to match webpack resolution' },
+    // TODO: Semver check not needed once Next.js repo uses 5.4.
+    ...(semver.gte(ts.version, '5.4.0') &&
+    tsOptions?.module === (ts.ModuleKind as any).Preserve
+      ? {
+          // TypeScript 5.4 introduced `Preserve`. Using `Preserve` implies
+          // - `moduleResolution` is `Bundler`
+          // - `esModuleInterop` is `true`
+          // - `resolveJsonModule` is `true`
+          // This means that if the user is using Preserve, they don't need these options
+        }
+      : {
+          esModuleInterop: {
+            value: true,
+            reason: 'requirement for SWC / babel',
+          },
+          moduleResolution: {
+            // In TypeScript 5.0, `NodeJs` has renamed to `Node10`
+            parsedValue:
+              ts.ModuleResolutionKind.Bundler ??
+              ts.ModuleResolutionKind.NodeNext ??
+              (ts.ModuleResolutionKind as any).Node10 ??
+              ts.ModuleResolutionKind.NodeJs,
+            // All of these values work:
+            parsedValues: [
+              (ts.ModuleResolutionKind as any).Node10 ??
+                ts.ModuleResolutionKind.NodeJs,
+              // only newer TypeScript versions have this field, it
+              // will be filtered for new versions of TypeScript
+              (ts.ModuleResolutionKind as any).Node12,
+              ts.ModuleResolutionKind.Node16,
+              ts.ModuleResolutionKind.NodeNext,
+              ts.ModuleResolutionKind.Bundler,
+            ].filter((val) => typeof val !== 'undefined'),
+            value: 'node',
+            reason: 'to match webpack resolution',
+          },
+          resolveJsonModule: {
+            value: true,
+            reason: 'to match webpack resolution',
+          },
+        }),
     ...(tsOptions?.verbatimModuleSyntax === true
       ? undefined
       : {

test/e2e/tsconfig-module-preserve/index.test.ts

@@ -0,0 +1,65 @@
+import { nextTestSetup } from 'e2e-utils'
+import { retry } from 'next-test-utils'
+import stripAnsi from 'strip-ansi'
+
+describe('tsconfig module: preserve', () => {
+  const { next } = nextTestSetup({
+    files: {
+      'tsconfig.json': JSON.stringify({
+        compilerOptions: { module: 'preserve' },
+      }),
+      'pages/index.tsx': `
+        export default function Page() { 
+          return <p>hello world</p>
+        } 
+      `,
+    },
+    dependencies: {
+      typescript: '5.4.4',
+    },
+  })
+
+  it('allows you to skip moduleResolution, esModuleInterop and resolveJsonModule when using "module: preserve"', async () => {
+    let output = ''
+
+    await retry(() => {
+      output = stripAnsi(next.cliOutput)
+      expect(output).toContain(
+        'The following mandatory changes were made to your tsconfig.json'
+      )
+    })
+
+    expect(output).not.toContain('moduleResolution')
+    expect(output).not.toContain('esModuleInterop')
+    expect(output).not.toContain('resolveJsonModule')
+
+    expect(await next.readFile('tsconfig.json')).toMatchInlineSnapshot(`
+      "{
+        "compilerOptions": {
+          "module": "preserve",
+          "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+          ],
+          "allowJs": true,
+          "skipLibCheck": true,
+          "strict": false,
+          "noEmit": true,
+          "incremental": true,
+          "isolatedModules": true,
+          "jsx": "preserve"
+        },
+        "include": [
+          "next-env.d.ts",
+          "**/*.ts",
+          "**/*.tsx"
+        ],
+        "exclude": [
+          "node_modules"
+        ]
+      }
+      "
+    `)
+  })
+})

test/integration/tsconfig-verifier/test/index.test.js

@@ -37,8 +37,8 @@ import path from 'path'
           "strict": false,
           "noEmit": true,
           "incremental": true,
-          "esModuleInterop": true,
           "module": "esnext",
+          "esModuleInterop": true,
           "moduleResolution": "node",
           "resolveJsonModule": true,
           "isolatedModules": true,
@@ -91,8 +91,8 @@ import path from 'path'
           "strict": false,
           "noEmit": true,
           "incremental": true,
-          "esModuleInterop": true,
           "module": "esnext",
+          "esModuleInterop": true,
           "moduleResolution": "node",
           "resolveJsonModule": true,
           "isolatedModules": true,
@@ -430,8 +430,8 @@ import path from 'path'
           "strict": false,
           "noEmit": true,
           "incremental": true,
-          "esModuleInterop": true,
           "module": "esnext",
+          "esModuleInterop": true,
           "moduleResolution": "node",
           "resolveJsonModule": true,
           "isolatedModules": true,
@@ -541,8 +541,8 @@ import path from 'path'
           "strict": false,
           "noEmit": true,
           "incremental": true,
-          "esModuleInterop": true,
           "module": "esnext",
+          "esModuleInterop": true,
           "moduleResolution": "node",
           "resolveJsonModule": true,
           "jsx": "preserve",
@@ -598,8 +598,8 @@ import path from 'path'
             "strict": false,
             "noEmit": true,
             "incremental": true,
-            "esModuleInterop": true,
             "module": "esnext",
+            "esModuleInterop": true,
             "moduleResolution": "node",
             "resolveJsonModule": true,
             "jsx": "preserve",
@@ -753,5 +753,60 @@ import path from 'path'
       "
     `)
     })
+
+    // TODO: Enable this test when repo has upgraded to TypeScript 5.4. Currently tested as E2E: tsconfig-module-preserve
+    it.skip('allows you to skip moduleResolution, esModuleInterop and resolveJsonModule when using "module: preserve"', async () => {
+      expect(await exists(tsConfig)).toBe(false)
+
+      await writeFile(
+        tsConfig,
+        `{ "compilerOptions": { "module": "preserve" } }`
+      )
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      const { code, stderr, stdout } = await nextBuild(appDir, undefined, {
+        stderr: true,
+        stdout: true,
+      })
+      expect(stderr + stdout).not.toContain('moduleResolution')
+      expect(stderr + stdout).not.toContain('esModuleInterop')
+      expect(stderr + stdout).not.toContain('resolveJsonModule')
+      expect(code).toBe(0)
+
+      expect(await readFile(tsConfig, 'utf8')).toMatchInlineSnapshot(`
+      "{
+        "compilerOptions": {
+          "module": "preserve",
+          "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+          ],
+          "allowJs": true,
+          "skipLibCheck": true,
+          "strict": false,
+          "noEmit": true,
+          "incremental": true,
+          "isolatedModules": true,
+          "jsx": "preserve",
+          "plugins": [
+            {
+              "name": "next"
+            }
+          ],
+          "strictNullChecks": true
+        },
+        "include": [
+          "next-env.d.ts",
+          ".next/types/**/*.ts",
+          "**/*.ts",
+          "**/*.tsx"
+        ],
+        "exclude": [
+          "node_modules"
+        ]
+      }
+      "
+    `)
+    })
   }
 )