Add warning for older TypeScript versions (vercel#25867)

packages/next/lib/verifyTypeScriptSetup.ts

@@ -4,8 +4,10 @@ import {
   hasNecessaryDependencies,
   NecessaryDependencies,
 } from './has-necessary-dependencies'
+import semver from 'next/dist/compiled/semver'
 import { CompileError } from './compile-error'
 import { FatalError } from './fatal-error'
+import * as log from '../build/output/log'
 
 import { getTypeScriptIntent } from './typescript/getTypeScriptIntent'
 import { TypeCheckResult } from './typescript/runTypeCheck'
@@ -38,6 +40,12 @@ export async function verifyTypeScriptSetup(
     // Load TypeScript after we're sure it exists:
     const ts = (await import(deps.resolved)) as typeof import('typescript')
 
+    if (semver.lt(ts.version, '4.3.2')) {
+      log.warn(
+        `Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: ${ts.version}`
+      )
+    }
+
     // Reconfigure (or create) the user's `tsconfig.json` for them:
     await writeConfigurationDefaults(ts, tsConfigPath, firstTimeSetup)
     // Write out the necessary `next-env.d.ts` file to correctly register

test/integration/typescript-version-warning/app/pages/index.tsx

@@ -0,0 +1,3 @@
+export default function Page(props) {
+  return <p>hello world</p>
+}

test/integration/typescript-version-warning/app/tsconfig.json

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

test/integration/typescript-version-warning/test/index.test.js

@@ -0,0 +1,76 @@
+/* eslint-env jest */
+import fs from 'fs-extra'
+import { join } from 'path'
+import { nextBuild, findPort, launchApp, killApp } from 'next-test-utils'
+
+jest.setTimeout(1000 * 60 * 2)
+
+const appDir = join(__dirname, '../app')
+
+describe('Minimum TypeScript Warning', () => {
+  it('should show warning during next build with old version', async () => {
+    const res = await nextBuild(appDir, [], {
+      stderr: true,
+      stdout: true,
+    })
+    expect(res.stdout + res.stderr).toContain(
+      'Minimum recommended TypeScript version is'
+    )
+  })
+
+  it('should show warning during next dev with old version', async () => {
+    let output = ''
+
+    const handleOutput = (msg) => {
+      output += msg
+    }
+    const app = await launchApp(appDir, await findPort(), {
+      onStdout: handleOutput,
+      onStderr: handleOutput,
+    })
+    await killApp(app)
+
+    expect(output).toContain('Minimum recommended TypeScript version is')
+  })
+
+  it('should not show warning during next build with new version', async () => {
+    await fs.rename(
+      join(appDir, 'node_modules/typescript'),
+      join(appDir, 'node_modules/typescript-back')
+    )
+    const res = await nextBuild(appDir, [], {
+      stderr: true,
+      stdout: true,
+    })
+    await fs.rename(
+      join(appDir, 'node_modules/typescript-back'),
+      join(appDir, 'node_modules/typescript')
+    )
+    expect(res.stdout + res.stderr).toContain(
+      'Minimum recommended TypeScript version is'
+    )
+  })
+
+  it('should not show warning during next dev with new version', async () => {
+    let output = ''
+
+    const handleOutput = (msg) => {
+      output += msg
+    }
+    await fs.rename(
+      join(appDir, 'node_modules/typescript'),
+      join(appDir, 'node_modules/typescript-back')
+    )
+    const app = await launchApp(appDir, await findPort(), {
+      onStdout: handleOutput,
+      onStderr: handleOutput,
+    })
+    await killApp(app)
+    await fs.rename(
+      join(appDir, 'node_modules/typescript-back'),
+      join(appDir, 'node_modules/typescript')
+    )
+
+    expect(output).toContain('Minimum recommended TypeScript version is')
+  })
+})