Add err.sh for image config errors (#18424)

* Add err.sh for image config errors * Apply suggestions from code review Co-authored-by: Steven <steven@ceriously.com> Co-authored-by: Steven <steven@ceriously.com>
vercel · Oct 29, 2020 · e20dba2 · e20dba2
1 parent 44fe971
commit e20dba2
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 10 deletions.
diff --git a/errors/invalid-images-config.md b/errors/invalid-images-config.md
@@ -0,0 +1,29 @@
+# Invalid images config
+
+#### Why This Error Occurred
+
+In your `next.config.js` file you provided an invalid config for the `images` field.
+
+#### Possible Ways to Fix It
+
+Make sure your `images` field follows the allowed config shape and values:
+
+```js
+module.exports = {
+  images: {
+    // limit of 25 deviceSizes values
+    deviceSizes: [320, 420, 768, 1024, 1200],
+    // limit of 25 imageSizes values
+    imageSizes: [],
+    // limit of 50 domains values
+    domains: [],
+    path: '/_next/image',
+    // loader can be 'default', 'imgix', 'cloudinary', or 'akamai'
+    loader: 'default',
+  },
+}
+```
+
+### Useful Links
+
+- [Image Optimization Documentation](https://nextjs.org/docs/basic-features/image-optimization)
diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts
@@ -220,20 +220,20 @@ function assignDefaults(userConfig: { [key: string]: any }) {
 
     if (typeof images !== 'object') {
       throw new Error(
-        `Specified images should be an object received ${typeof images}`
+        `Specified images should be an object received ${typeof images}.\nSee more info here: https://err.sh/nextjs/invalid-images-config`
       )
     }
 
     if (images.domains) {
       if (!Array.isArray(images.domains)) {
         throw new Error(
-          `Specified images.domains should be an Array received ${typeof images.domains}`
+          `Specified images.domains should be an Array received ${typeof images.domains}.\nSee more info here: https://err.sh/nextjs/invalid-images-config`
         )
       }
 
       if (images.domains.length > 50) {
         throw new Error(
-          `Specified images.domains exceeds length of 50, received length (${images.domains.length}), please reduce the length of the array to continue`
+          `Specified images.domains exceeds length of 50, received length (${images.domains.length}), please reduce the length of the array to continue.\nSee more info here: https://err.sh/nextjs/invalid-images-config`
         )
       }
 
@@ -244,21 +244,21 @@ function assignDefaults(userConfig: { [key: string]: any }) {
         throw new Error(
           `Specified images.domains should be an Array of strings received invalid values (${invalid.join(
             ', '
-          )})`
+          )}).\nSee more info here: https://err.sh/nextjs/invalid-images-config`
         )
       }
     }
     if (images.deviceSizes) {
       const { deviceSizes } = images
       if (!Array.isArray(deviceSizes)) {
         throw new Error(
-          `Specified images.deviceSizes should be an Array received ${typeof deviceSizes}`
+          `Specified images.deviceSizes should be an Array received ${typeof deviceSizes}.\nSee more info here: https://err.sh/nextjs/invalid-images-config`
         )
       }
 
       if (deviceSizes.length > 25) {
         throw new Error(
-          `Specified images.deviceSizes exceeds length of 25, received length (${deviceSizes.length}), please reduce the length of the array to continue`
+          `Specified images.deviceSizes exceeds length of 25, received length (${deviceSizes.length}), please reduce the length of the array to continue.\nSee more info here: https://err.sh/nextjs/invalid-images-config`
         )
       }
 
@@ -270,21 +270,21 @@ function assignDefaults(userConfig: { [key: string]: any }) {
         throw new Error(
           `Specified images.deviceSizes should be an Array of numbers that are between 1 and 10000, received invalid values (${invalid.join(
             ', '
-          )})`
+          )}).\nSee more info here: https://err.sh/nextjs/invalid-images-config`
         )
       }
     }
     if (images.imageSizes) {
       const { imageSizes } = images
       if (!Array.isArray(imageSizes)) {
         throw new Error(
-          `Specified images.imageSizes should be an Array received ${typeof imageSizes}`
+          `Specified images.imageSizes should be an Array received ${typeof imageSizes}.\nSee more info here: https://err.sh/nextjs/invalid-images-config`
         )
       }
 
       if (imageSizes.length > 25) {
         throw new Error(
-          `Specified images.imageSizes exceeds length of 25, received length (${imageSizes.length}), please reduce the length of the array to continue`
+          `Specified images.imageSizes exceeds length of 25, received length (${imageSizes.length}), please reduce the length of the array to continue.\nSee more info here: https://err.sh/nextjs/invalid-images-config`
         )
       }
 
@@ -296,7 +296,7 @@ function assignDefaults(userConfig: { [key: string]: any }) {
         throw new Error(
           `Specified images.imageSizes should be an Array of numbers that are between 1 and 10000, received invalid values (${invalid.join(
             ', '
-          )})`
+          )}).\nSee more info here: https://err.sh/nextjs/invalid-images-config`
         )
       }
     }