fix: verbatimModuleSyntax: true support in tsconfig.json (#48018)

### What? When `verbatimModuleSyntax: true` is set, `isolatedModules: true` are not allowed by TS ### Why? Next always adds `isolatedModules: true` which causes TS error. ### How? - Fixes #46509 fix NEXT-689 Co-authored-by: Steven <229881+styfle@users.noreply.github.com>
vercel · Jun 9, 2023 · be960cc · be960cc
1 parent 558632b
commit be960cc
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 6 deletions.
diff --git a/packages/next/src/lib/typescript/writeConfigurationDefaults.ts b/packages/next/src/lib/typescript/writeConfigurationDefaults.ts
@@ -18,7 +18,8 @@ type DesiredCompilerOptionsShape = {
 }
 
 function getDesiredCompilerOptions(
-  ts: typeof import('typescript')
+  ts: typeof import('typescript'),
+  userTsConfig?: { compilerOptions?: CompilerOptions }
 ): DesiredCompilerOptionsShape {
   const o: DesiredCompilerOptionsShape = {
     // These are suggested values and will be set when not present in the
@@ -73,10 +74,14 @@ function getDesiredCompilerOptions(
       reason: 'to match webpack resolution',
     },
     resolveJsonModule: { value: true, reason: 'to match webpack resolution' },
-    isolatedModules: {
-      value: true,
-      reason: 'requirement for SWC / Babel',
-    },
+    ...(userTsConfig?.compilerOptions?.verbatimModuleSyntax === true
+      ? undefined
+      : {
+          isolatedModules: {
+            value: true,
+            reason: 'requirement for SWC / Babel',
+          },
+        }),
     jsx: {
       parsedValue: ts.JsxEmit.Preserve,
       value: 'preserve',
@@ -116,7 +121,6 @@ export async function writeConfigurationDefaults(
     await fs.writeFile(tsConfigPath, '{}' + os.EOL)
   }
 
-  const desiredCompilerOptions = getDesiredCompilerOptions(ts)
   const { options: tsOptions, raw: rawConfig } =
     await getTypeScriptConfiguration(ts, tsConfigPath, true)
 
@@ -129,6 +133,8 @@ export async function writeConfigurationDefaults(
     isFirstTimeSetup = true
   }
 
+  const desiredCompilerOptions = getDesiredCompilerOptions(ts, userTsConfig)
+
   const suggestedActions: string[] = []
   const requiredActions: string[] = []
   for (const optionKey of Object.keys(desiredCompilerOptions)) {

diff --git a/test/integration/tsconfig-verifier/test/index.test.js b/test/integration/tsconfig-verifier/test/index.test.js
@@ -470,6 +470,62 @@ describe('tsconfig.json verifier', () => {
     `)
   })
 
+  it('allows you to set verbatimModuleSyntax true without adding isolatedModules', async () => {
+    expect(await exists(tsConfig)).toBe(false)
+
+    await writeFile(
+      tsConfig,
+      `{ "compilerOptions": { "verbatimModuleSyntax": true } }`
+    )
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    const { code, stderr, stdout } = await nextBuild(appDir, undefined, {
+      stderr: true,
+      stdout: true,
+    })
+    expect(stderr + stdout).not.toContain('isolatedModules')
+    expect(code).toBe(0)
+
+    expect(await readFile(tsConfig, 'utf8')).toMatchInlineSnapshot(`
+      "{
+        \\"compilerOptions\\": {
+          \\"verbatimModuleSyntax\\": true,
+          \\"lib\\": [
+            \\"dom\\",
+            \\"dom.iterable\\",
+            \\"esnext\\"
+          ],
+          \\"allowJs\\": true,
+          \\"skipLibCheck\\": true,
+          \\"strict\\": false,
+          \\"forceConsistentCasingInFileNames\\": true,
+          \\"noEmit\\": true,
+          \\"incremental\\": true,
+          \\"esModuleInterop\\": true,
+          \\"module\\": \\"esnext\\",
+          \\"moduleResolution\\": \\"node\\",
+          \\"resolveJsonModule\\": true,
+          \\"jsx\\": \\"preserve\\",
+          \\"plugins\\": [
+            {
+              \\"name\\": \\"next\\"
+            }
+          ],
+          \\"strictNullChecks\\": true
+        },
+        \\"include\\": [
+          \\"next-env.d.ts\\",
+          \\".next/types/**/*.ts\\",
+          \\"**/*.ts\\",
+          \\"**/*.tsx\\"
+        ],
+        \\"exclude\\": [
+          \\"node_modules\\"
+        ]
+      }
+      "
+    `)
+  })
+
   it('allows you to extend another configuration file', async () => {
     expect(await exists(tsConfig)).toBe(false)
     expect(await exists(tsConfigBase)).toBe(false)