From e20dba2cf094f4203e183a8f6da98ab8a1772b1e Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Wed, 28 Oct 2020 20:53:58 -0500 Subject: [PATCH] Add err.sh for image config errors (#18424) * Add err.sh for image config errors * Apply suggestions from code review Co-authored-by: Steven Co-authored-by: Steven --- errors/invalid-images-config.md | 29 ++++++++++++++++++++++ packages/next/next-server/server/config.ts | 20 +++++++-------- 2 files changed, 39 insertions(+), 10 deletions(-) create mode 100644 errors/invalid-images-config.md diff --git a/errors/invalid-images-config.md b/errors/invalid-images-config.md new file mode 100644 index 0000000000..19846e447b --- /dev/null +++ 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 index 49c3c1b6b8..1bd68578c6 100644 --- 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,7 +244,7 @@ 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` ) } } @@ -252,13 +252,13 @@ function assignDefaults(userConfig: { [key: string]: any }) { 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,7 +270,7 @@ 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` ) } } @@ -278,13 +278,13 @@ function assignDefaults(userConfig: { [key: string]: any }) { 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` ) } }