diff --git a/packages/next/src/lib/typescript/writeConfigurationDefaults.ts b/packages/next/src/lib/typescript/writeConfigurationDefaults.ts index 691ecefd0b5f4..faabd5b151479 100644 --- a/packages/next/src/lib/typescript/writeConfigurationDefaults.ts +++ b/packages/next/src/lib/typescript/writeConfigurationDefaults.ts @@ -195,55 +195,59 @@ export async function writeConfigurationDefaults( // Enable the Next.js typescript plugin. if (isAppDirEnabled) { - if (userTsConfig.compilerOptions) { - // Check if the config or the resolved config has the plugin already. - const hasNextPlugin = [ - ...(Array.isArray(tsOptions.plugins) ? tsOptions.plugins : []), - ...(Array.isArray(userTsConfig.compilerOptions.plugins) - ? userTsConfig.compilerOptions.plugins - : []), - ].some(({ name }: { name: string }) => name === 'next') + // Check if the config or the resolved config has the plugin already. + const plugins = [ + ...(Array.isArray(tsOptions.plugins) ? tsOptions.plugins : []), + ...(userTsConfig.compilerOptions && + Array.isArray(userTsConfig.compilerOptions.plugins) + ? userTsConfig.compilerOptions.plugins + : []), + ] + const hasNextPlugin = plugins.some( + ({ name }: { name: string }) => name === 'next' + ) - // If the TS config extends on another config, we can't add the `plugin` field - // because that will override the parent config's plugins. - // Instead we have to show a message to the user to add the plugin manually. - if ( + // If the TS config extends on another config, we can't add the `plugin` field + // because that will override the parent config's plugins. + // Instead we have to show a message to the user to add the plugin manually. + if ( + !userTsConfig.compilerOptions || + (plugins.length && !hasNextPlugin && - 'extends' in userTsConfig && - !('plugins' in userTsConfig.compilerOptions) - ) { - console.log( - `\nYour ${chalk.cyan( - 'tsconfig.json' - )} extends another configuration, which means we cannot add the Next.js TypeScript plugin automatically. To improve your development experience, we recommend adding the Next.js plugin (\`${chalk.cyan( - '"plugins": [{ "name": "next" }]' - )}\`) manually to your TypeScript configuration. Learn more: https://beta.nextjs.org/docs/configuring/typescript#using-the-typescript-plugin\n` - ) - } else if (!hasNextPlugin) { - if (!('plugins' in userTsConfig.compilerOptions)) { - userTsConfig.compilerOptions.plugins = [] - } - userTsConfig.compilerOptions.plugins.push({ name: 'next' }) - suggestedActions.push( - chalk.cyan('plugins') + - ' was updated to add ' + - chalk.bold(`{ name: 'next' }`) - ) + 'extends' in rawConfig && + (!rawConfig.compilerOptions || !rawConfig.compilerOptions.plugins)) + ) { + console.log( + `\nYour ${chalk.cyan( + 'tsconfig.json' + )} extends another configuration, which means we cannot add the Next.js TypeScript plugin automatically. To improve your development experience, we recommend adding the Next.js plugin (\`${chalk.cyan( + '"plugins": [{ "name": "next" }]' + )}\`) manually to your TypeScript configuration. Learn more: https://beta.nextjs.org/docs/configuring/typescript#using-the-typescript-plugin\n` + ) + } else if (!hasNextPlugin) { + if (!('plugins' in userTsConfig.compilerOptions)) { + userTsConfig.compilerOptions.plugins = [] } + userTsConfig.compilerOptions.plugins.push({ name: 'next' }) + suggestedActions.push( + chalk.cyan('plugins') + + ' was updated to add ' + + chalk.bold(`{ name: 'next' }`) + ) + } - // If `strict` is set to `false` or `strictNullChecks` is set to `false`, - // then set `strictNullChecks` to `true`. - if ( - hasPagesDir && - isAppDirEnabled && - !userTsConfig.compilerOptions.strict && - !('strictNullChecks' in userTsConfig.compilerOptions) - ) { - userTsConfig.compilerOptions.strictNullChecks = true - suggestedActions.push( - chalk.cyan('strictNullChecks') + ' was set to ' + chalk.bold(`true`) - ) - } + // If `strict` is set to `false` or `strictNullChecks` is set to `false`, + // then set `strictNullChecks` to `true`. + if ( + hasPagesDir && + isAppDirEnabled && + !userTsConfig.compilerOptions.strict && + !('strictNullChecks' in userTsConfig.compilerOptions) + ) { + userTsConfig.compilerOptions.strictNullChecks = true + suggestedActions.push( + chalk.cyan('strictNullChecks') + ' was set to ' + chalk.bold(`true`) + ) } }