feat(config): implement a human readable ajv errors

packages/next/compiled/@segment/ajv-human-errors/package.json

@@ -0,0 +1 @@
+{"name":"@segment/ajv-human-errors","main":"index.js","license":"MIT"}

packages/next/package.json

@@ -126,6 +126,7 @@
     "@next/react-dev-overlay": "12.2.4-canary.10",
     "@next/react-refresh-utils": "12.2.4-canary.10",
     "@next/swc": "12.2.4-canary.10",
+    "@segment/ajv-human-errors": "2.1.2",
     "@taskr/clear": "1.1.0",
     "@taskr/esnext": "1.1.0",
     "@taskr/watch": "1.1.0",

packages/next/server/config-schema.ts

@@ -393,6 +393,7 @@ const configSchema = {
     },
     exportPathMap: {
       isFunction: true,
+      errorMessage: 'must be a function that returns a Promise',
     } as any,
     future: {
       additionalProperties: false,
@@ -401,12 +402,14 @@ const configSchema = {
     },
     generateBuildId: {
       isFunction: true,
+      errorMessage: 'must be a function that returns a Promise',
     } as any,
     generateEtags: {
       type: 'boolean',
     },
     headers: {
       isFunction: true,
+      errorMessage: 'must be a function that returns a Promise',
     } as any,
     httpAgentOptions: {
       additionalProperties: false,
@@ -560,9 +563,11 @@ const configSchema = {
     },
     redirects: {
       isFunction: true,
+      errorMessage: 'must be a function that returns a Promise',
     } as any,
     rewrites: {
       isFunction: true,
+      errorMessage: 'must be a function that returns a Promise',
     } as any,
     sassOptions: {
       type: 'object',
@@ -597,6 +602,8 @@ const configSchema = {
     },
     webpack: {
       isFunction: true,
+      errorMessage:
+        'must be a function that returns a webpack configuration object',
     } as any,
   },
 } as JSONSchemaType<NextConfig>

packages/next/server/config.ts

@@ -772,8 +772,18 @@ export default async function loadConfig(
 
     if (validateResult.errors) {
       Log.warn(`Invalid next.config.js options detected: `)
+
+      // Only load @segment/ajv-human-errors when invalid config is detected
+      const { AggregateAjvError } =
+        require('next/dist/compiled/@segment/ajv-human-errors') as typeof import('next/dist/compiled/@segment/ajv-human-errors')
+      const aggregatedAjvErrors = new AggregateAjvError(validateResult.errors, {
+        fieldLabels: 'js',
+      })
+      for (const error of aggregatedAjvErrors) {
+        console.error(`  - ${error.message}`)
+      }
+
       console.error(
-        JSON.stringify(validateResult.errors, null, 2),
         '\nSee more info here: https://nextjs.org/docs/messages/invalid-next-config'
       )
     }

packages/next/taskfile.js

@@ -188,7 +188,15 @@ export async function compile_config_schema(task, opts) {
   // eslint-disable-next-line
   const standaloneCode = require('ajv/dist/standalone').default
   // eslint-disable-next-line
-  const ajv = new Ajv({ code: { source: true }, allErrors: true })
+  const ajv = new Ajv({
+    code: { source: true },
+    allErrors: true,
+    verbose: true,
+  })
+
+  // errorMessage keyword will be consumed by @segment/ajv-human-errors to provide a custom error message
+  ajv.addKeyword('errorMessage')
+
   ajv.addKeyword({
     keyword: 'isFunction',
     schemaType: 'boolean',
@@ -951,6 +959,19 @@ export async function ncc_async_sema(task, opts) {
     .ncc({ packageName: 'async-sema', externals })
     .target('compiled/async-sema')
 }
+// eslint-disable-next-line camelcase
+export async function ncc_segment_ajv_human_errors(task, opts) {
+  await task
+    .source(
+      opts.src ||
+        relative(__dirname, require.resolve('@segment/ajv-human-errors/'))
+    )
+    .ncc({
+      packageName: '@segment/ajv-human-errors/',
+      externals,
+    })
+    .target('compiled/@segment/ajv-human-errors')
+}
 
 const babelCorePackages = {
   'code-frame': 'next/dist/compiled/babel/code-frame',
@@ -1803,6 +1824,7 @@ export async function ncc(task, opts) {
         'ncc_arg',
         'ncc_async_retry',
         'ncc_async_sema',
+        'ncc_segment_ajv_human_errors',
         'ncc_assert',
         'ncc_browser_zlib',
         'ncc_buffer',

packages/next/types/misc.d.ts

@@ -329,6 +329,11 @@ declare module 'next/dist/compiled/@edge-runtime/primitives' {
   export = m
 }
 
+declare module 'next/dist/compiled/@segment/ajv-human-errors' {
+  import * as m from '@segment/ajv-human-errors'
+  export = m
+}
+
 declare module 'pnp-webpack-plugin' {
   import webpack from 'webpack4'
 

test/integration/config-validation/test/index.test.ts

@@ -18,13 +18,9 @@ describe('next.config.js validation', () => {
         }
       `,
       outputs: [
-        '/images/loader',
-        'must be equal to one of the allowed values',
-        'imgix',
-        '/rewrites',
-        'must pass \\"isFunction\\" keyword validation',
-        '/swcMinify',
-        'must be boolean',
+        'The value at .images.loader must be one of',
+        'The value at .rewrites must be a function that returns a Promise',
+        'The value at .swcMinify must be a boolean but it was a string',
       ],
     },
     {
@@ -38,10 +34,8 @@ describe('next.config.js validation', () => {
         }
       `,
       outputs: [
-        'nonExistent',
-        'must NOT have additional properties',
-        'anotherNonExistent',
-        'must NOT have additional properties',
+        'The root value has an unexpected property, nonExistent,',
+        'The value at .experimental has an unexpected property, anotherNonExistent',
       ],
     },
   ])(