Correctly list unsupported turbopack experimental options (#47093)

* Fixes an issue where unsupported experimental options were not listed
correctly
* Fixes formatting if more than one unsupported option is configured
* Shows unsupported options first and makes it slightly more clear blue
options are supported

Before:

![Screenshot 2023-03-13 at 2 23 53
PM](https://user-images.githubusercontent.com/2865858/224835658-127b3a75-527b-4014-9622-b667c927544a.png)

After:

![Screenshot 2023-03-13 at 2 33 11
PM](https://user-images.githubusercontent.com/2865858/224837224-2d0ada71-4440-496f-b99a-a776835ce1f6.png)

---------

packages/next/src/cli/next-dev.ts

@@ -270,7 +270,7 @@ const nextDev: CliCommand = async (argv) => {
     let babelrc = await getBabelConfigFile(dir)
     if (babelrc) babelrc = path.basename(babelrc)
 
-    let nonSupportedConfig: string[] = []
+    let unsupportedConfig: string[] = []
     let rawNextConfig: NextConfig = {}
 
     try {
@@ -299,6 +299,12 @@ const nextDev: CliCommand = async (argv) => {
           ) {
             return false
           }
+
+          // experimental options are checked separately
+          if (configKey === 'experimental') {
+            return false
+          }
+
           let userValue = parentUserConfig?.[configKey]
           let defaultValue = parentDefaultConfig?.[configKey]
 
@@ -317,14 +323,25 @@ const nextDev: CliCommand = async (argv) => {
         }
       }
 
-      nonSupportedConfig = Object.keys(rawNextConfig).filter((key) =>
-        checkUnsupportedCustomConfig(key, rawNextConfig, defaultConfig)
-      )
+      unsupportedConfig = [
+        ...Object.keys(rawNextConfig).filter((key) =>
+          checkUnsupportedCustomConfig(key, rawNextConfig, defaultConfig)
+        ),
+        ...Object.keys(rawNextConfig.experimental ?? {})
+          .filter((key) =>
+            checkUnsupportedCustomConfig(
+              key,
+              rawNextConfig?.experimental,
+              defaultConfig?.experimental
+            )
+          )
+          .map((key) => `experimental.${key}`),
+      ]
     } catch (e) {
       console.error('Unexpected error occurred while checking config', e)
     }
 
-    const hasWarningOrError = babelrc || nonSupportedConfig.length
+    const hasWarningOrError = babelrc || unsupportedConfig.length
     if (!hasWarningOrError) {
       thankYouMsg = chalk.dim(thankYouMsg)
     }
@@ -349,17 +366,17 @@ const nextDev: CliCommand = async (argv) => {
         `Babel is not yet supported. To use Turbopack at the moment,\n  you'll need to remove your usage of Babel.`
       )}`
     }
-    if (nonSupportedConfig.length) {
+    if (unsupportedConfig.length) {
       unsupportedParts += `\n\n- Unsupported Next.js configuration option(s) (${chalk.cyan(
         'next.config.js'
       )})\n  ${chalk.dim(
-        `The only configurations options supported are:\n${supportedTurbopackNextConfigOptions
-          .map((name) => `    - ${chalk.cyan(name)}\n`)
+        `To use Turbopack, remove the following configuration options:\n${unsupportedConfig
+          .map((name) => `    - ${chalk.red(name)}\n`)
           .join(
             ''
-          )}  To use Turbopack, remove the following configuration options:\n${nonSupportedConfig.map(
-          (name) => `    - ${chalk.red(name)}\n`
-        )}`
+          )}  The only supported configurations options are:\n${supportedTurbopackNextConfigOptions
+          .map((name) => `    - ${chalk.cyan(name)}\n`)
+          .join('')}  `
       )}   `
     }