Image component custom resolvers #19325

atcastle · 2020-11-19T17:45:01Z

This PR adds support for a "custom" option in the images.loader field of next.config.js, and adds a function that can be called in your _app.js file to register a custom function to resolve image URLs.

Currently this only supports a single, top-level custom function to handle all image component URLs, but the solution should be backwards compatible if we decide to add support for multiple resolvers in the future.

…tom-resolvers

ijjk · 2020-11-19T17:54:24Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
buildDuration	10.1s	10.1s	⚠️ +29ms
nodeModulesSize	84.9 MB	84.9 MB	⚠️ +2.19 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.249	2.236	-0.01
/ avg req/sec	1111.42	1117.94	+6.52
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.373	1.212	-0.16
/error-in-render avg req/sec	1820.29	2062.2	+241.91

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
677f882d2ed8..4972.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f1a49fb..e45e.js gzip	6.52 kB	6.52 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-b618194..5477.js gzip	1.61 kB	1.61 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	8.01 kB	8.01 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
index.html gzip	613 B	613 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
buildDuration	12s	11.7s	-289ms
nodeModulesSize	84.9 MB	84.9 MB	⚠️ +2.19 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
677f882d2ed8..4972.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f1a49fb..e45e.js gzip	6.52 kB	6.52 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-b618194..5477.js gzip	1.61 kB	1.61 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	8.01 kB	8.01 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_error.js	914 kB	914 kB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	915 kB	915 kB	✓
link.js	973 kB	973 kB	✓
routerDirect.js	966 kB	966 kB	✓
withRouter.js	966 kB	966 kB	✓
Overall change	4.74 MB	4.74 MB	✓

Commit: 86e51ed

ijjk · 2020-11-19T17:59:59Z

Failing test suites

Commit: 86e51ed

test/integration/image-optimizer/test/index.test.js

Image Optimizer > config checks > should error when loader contains invalid value

Expand output

● Image Optimizer › config checks › should error when loader contains invalid value

expect(received).toContain(expected) // indexOf

Expected substring: "Specified images.loader should be one of (default, imgix, cloudinary, akamai), received invalid value (notreal)"
Received string:    "Error: Specified images.loader should be one of (default, imgix, cloudinary, akamai, custom), received invalid value (notreal).
See more info here: https://err.sh/next.js/invalid-images-config

  3 | if(userDistDir==='public'){throw new Error(`The 'public' directory is reserved in Next.js and can not be set as the 'distDir'. https://err.sh/vercel/next.js/can-not-output-to-public`);}// make sure distDir isn't an empty string as it can result in the provided
  4 | // directory being deleted in development mode
> 5 | if(userDistDir.length===0){throw new Error(`Invalid distDir provided, distDir can not be an empty string. Please remove this config or set it to undefined`);}}if(key==='pageExtensions'){if(!Array.isArray(value)){throw new Error(`Specified pageExtensions is not an array of strings, found "${value}". Please update this config or remove it.`);}if(!value.length){throw new Error(`Specified pageExtensions is an empty array. Please update it with the relevant extensions or remove it.`);}value.forEach(ext=>{if(typeof ext!=='string'){throw new Error(`Specified pageExtensions is not an array of strings, found "${ext}" of type "${typeof ext}". Please update this config or remove it.`);}});}if(!!value&&value.constructor===Object){currentConfig[key]={...defaultConfig[key],...Object.keys(value).reduce((c,k)=>{const v=value[k];if(v!==undefined&&v!==null){c[k]=v;}return c;},{})};}else{currentConfig[key]=value;}return currentConfig;},{});const result={...defaultConfig,...config};if(typeof result.assetPrefix!=='string'){throw new Error(`Specified assetPrefix is not a string, found type "${typeof result.assetPrefix}" https://err.sh/vercel/next.js/invalid-assetprefix`);}if(typeof result.basePath!=='string'){throw new Error(`Specified basePath is not a string, found type "${typeof result.basePath}"`);}if(result.basePath!==''){if(result.basePath==='/'){throw new Error(`Specified basePath /. basePath has to be either an empty string or a path prefix"`);}if(!result.basePath.startsWith('/')){throw new Error(`Specified basePath has to start with a /, found "${result.basePath}"`);}if(result.basePath!=='/'){if(result.basePath.endsWith('/')){throw new Error(`Specified basePath should not end with /, found "${result.basePath}"`);}if(result.assetPrefix===''){result.assetPrefix=result.basePath;}if(result.amp.canonicalBase===''){result.amp.canonicalBase=result.basePath;}}}if(result==null?void 0:result.images){const images=result.images;if(typeof images!=='object'){throw new Error(`Specified images should be an object received ${typeof images}.\nSee more info here: https://err.sh/next.js/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}.\nSee more info here: https://err.sh/next.js/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.\nSee more info here: https://err.sh/nextjs/invalid-images-config`);}const invalid=images.domains.filter(d=>typeof d!=='string');if(invalid.length>0){throw new Error(`Specified images.domains should be an Array of strings received invalid values (${invalid.join(', ')}).\nSee more info here: https://err.sh/next.js/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}.\nSee more info here: https://err.sh/next.js/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.\nSee more info here: https://err.sh/nextjs/invalid-images-config`);}const invalid=deviceSizes.filter(d=>{return typeof d!=='number'||d<1||d>10000;});if(invalid.length>0){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/next.js/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}.\nSee more info here: https://err.sh/next.js/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.\nSee more info here: https://err.sh/nextjs/invalid-images-config`);}const invalid=imageSizes.filter(d=>{return typeof d!=='number'||d<1||d>10000;});if(invalid.length>0){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/next.js/invalid-images-config`);}}if(!images.loader){images.loader='default';}if(!_imageConfig.VALID_LOADERS.includes(images.loader)){throw new Error(`Specified images.loader should be one of (${_imageConfig.VALID_LOADERS.join(', ')}), received invalid value (${images.loader}).\nSee more info here: https://err.sh/next.js/invalid-images-config`);}// Append trailing slash for non-default loaders
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ^
  6 | if(images.path){if(images.loader!=='default'&&images.path[images.path.length-1]!=='/'){images.path+='/';}}}if(result.i18n){const{i18n}=result;const i18nType=typeof i18n;if(i18nType!=='object'){throw new Error(`Specified i18n should be an object received ${i18nType}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}if(!Array.isArray(i18n.locales)){throw new Error(`Specified i18n.locales should be an Array received ${typeof i18n.locales}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}const defaultLocaleType=typeof i18n.defaultLocale;if(!i18n.defaultLocale||defaultLocaleType!=='string'){throw new Error(`Specified i18n.defaultLocale should be a string.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}if(typeof i18n.domains!=='undefined'&&!Array.isArray(i18n.domains)){throw new Error(`Specified i18n.domains must be an array of domain objects e.g. [ { domain: 'example.fr', defaultLocale: 'fr', locales: ['fr'] } ] received ${typeof i18n.domains}.\nSee more info here: https://err.sh/nextjs/invalid-i18n-config`);}if(i18n.domains){const invalidDomainItems=i18n.domains.filter(item=>{if(!item||typeof item!=='object')return true;if(!item.defaultLocale)return true;if(!item.domain||typeof item.domain!=='string')return true;let hasInvalidLocale=false;if(Array.isArray(item.locales)){for(const locale of item.locales){if(typeof locale!=='string')hasInvalidLocale=true;for(const domainItem of i18n.domains){if(domainItem===item)continue;if(domainItem.locales&&domainItem.locales.includes(locale)){console.warn(`Both ${item.domain} and ${domainItem.domain} configured the locale (${locale}) but only one can. Remove it from one i18n.domains config to continue`);hasInvalidLocale=true;break;}}}}return hasInvalidLocale;});if(invalidDomainItems.length>0){throw new Error(`Invalid i18n.domains values:\n${invalidDomainItems.map(item=>JSON.stringify(item)).join('\n')}\n\ndomains value must follow format { domain: 'example.fr', defaultLocale: 'fr', locales: ['fr'] }.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}}if(!Array.isArray(i18n.locales)){throw new Error(`Specified i18n.locales must be an array of locale strings e.g. ["en-US", "nl-NL"] received ${typeof i18n.locales}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}const invalidLocales=i18n.locales.filter(locale=>typeof locale!=='string');if(invalidLocales.length>0){throw new Error(`Specified i18n.locales contains invalid values (${invalidLocales.map(String).join(', ')}), locales must be valid locale tags provided as strings e.g. "en-US".\n`+`See here for list of valid language sub-tags: http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry`);}if(!i18n.locales.includes(i18n.defaultLocale)){throw new Error(`Specified i18n.defaultLocale should be included in i18n.locales.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}// make sure default Locale is at the front
  7 | i18n.locales=[i18n.defaultLocale,...i18n.locales.filter(locale=>locale!==i18n.defaultLocale)];const localeDetectionType=typeof i18n.localeDetection;if(localeDetectionType!=='boolean'&&localeDetectionType!=='undefined'){throw new Error(`Specified i18n.localeDetection should be undefined or a boolean received ${localeDetectionType}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}}return result;}function normalizeConfig(phase,config){if(typeof config==='function'){config=config(phase,{defaultConfig});if(typeof config.then==='function'){throw new Error('> Promise returned in next config. https://err.sh/vercel/next.js/promise-in-next-config');}}return config;}function loadConfig(phase,dir,customConfig){if(customConfig){return assignDefaults({configOrigin:'server',...customConfig});}const path=_findUp.default.sync(_constants.CONFIG_FILE,{cwd:dir});// If config file was found
  8 | if(path==null?void 0:path.length){var _userConfig$amp,_userConfig$experimen;const userConfigModule=require(path);const userConfig=normalizeConfig(phase,userConfigModule.default||userConfigModule);if(Object.keys(userConfig).length===0){Log.warn('Detected next.config.js, no exported configuration found. https://err.sh/vercel/next.js/empty-configuration');}if(userConfig.target&&!targets.includes(userConfig.target)){throw new Error(`Specified target is invalid. Provided: "${userConfig.target}" should be one of ${targets.join(', ')}`);}if((_userConfig$amp=userConfig.amp)==null?void 0:_userConfig$amp.canonicalBase){const{canonicalBase}=userConfig.amp||{};userConfig.amp=userConfig.amp||{};userConfig.amp.canonicalBase=(canonicalBase.endsWith('/')?canonicalBase.slice(0,-1):canonicalBase)||'';}if(((_userConfig$experimen=userConfig.experimental)==null?void 0:_userConfig$experimen.reactMode)&&!reactModes.includes(userConfig.experimental.reactMode)){throw new Error(`Specified React Mode is invalid. Provided: ${userConfig.experimental.reactMode} should be one of ${reactModes.join(', ')}`);}return assignDefaults({configOrigin:_constants.CONFIG_FILE,configFile:path,...userConfig});}else{const configBaseName=(0,_path.basename)(_constants.CONFIG_FILE,(0,_path.extname)(_constants.CONFIG_FILE));const nonJsPath=_findUp.default.sync([`${configBaseName}.jsx`,`${configBaseName}.ts`,`${configBaseName}.tsx`,`${configBaseName}.json`],{cwd:dir});if(nonJsPath==null?void 0:nonJsPath.length){throw new Error(`Configuring Next.js via '${(0,_path.basename)(nonJsPath)}' is not supported. Please replace the file with 'next.config.js'.`);}}return defaultConfig;}function isTargetLikeServerless(target){const isServerless=target==='serverless';const isServerlessTrace=target==='experimental-serverless-trace';return isServerless||isServerlessTrace;}

  at assignDefaults (../packages/next/dist/next-server/server/config.js:5:4616)
  at loadConfig (../packages/next/dist/next-server/server/config.js:8:1101)
  at new Server (../packages/next/dist/next-server/server/next-server.js:1:4383)
  at new DevServer (../packages/next/dist/server/next-dev-server.js:1:2964)
  at createServer (../packages/next/dist/server/next.js:2:607)
  at start (../packages/next/dist/server/lib/start-server.js:1:323)
  at nextDev (../packages/next/dist/cli/next-dev.js:20:1776)
  at ../packages/next/dist/bin/next:26:341
  "
  at Object.<anonymous> (integration/image-optimizer/test/index.test.js:570:22)

packages/next/client/image.tsx

styfle

You need to update the failing test to add custom there too

ijjk · 2020-11-19T20:22:03Z

Stats from current PR

Default Server Mode (Increase detected ⚠️)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
buildDuration	10.1s	10.1s	⚠️ +25ms
nodeModulesSize	84.9 MB	84.9 MB	⚠️ +2.16 kB

Page Load Tests Overall increase ✓

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.173	2.255	⚠️ +0.08
/ avg req/sec	1150.64	1108.59	⚠️ -42.05
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.279	1.242	-0.04
/error-in-render avg req/sec	1954.6	2013.49	+58.89

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
677f882d2ed8..4972.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f1a49fb..e45e.js gzip	6.52 kB	6.52 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-b618194..5477.js gzip	1.61 kB	1.61 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	8.01 kB	8.01 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
index.html gzip	613 B	613 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
buildDuration	11.9s	11.6s	-254ms
nodeModulesSize	84.9 MB	84.9 MB	⚠️ +2.16 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
677f882d2ed8..4972.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f1a49fb..e45e.js gzip	6.52 kB	6.52 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-b618194..5477.js gzip	1.61 kB	1.61 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	8.01 kB	8.01 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_error.js	914 kB	914 kB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	915 kB	915 kB	✓
link.js	973 kB	973 kB	✓
routerDirect.js	966 kB	966 kB	✓
withRouter.js	966 kB	966 kB	✓
Overall change	4.74 MB	4.74 MB	✓

Commit: d464057

ijjk · 2020-11-19T20:26:47Z

Failing test suites

Commit: d464057

test/integration/image-optimizer/test/index.test.js

Image Optimizer > config checks > should error when loader contains invalid value

Expand output

● Image Optimizer › config checks › should error when loader contains invalid value

expect(received).toContain(expected) // indexOf

Expected substring: "Specified images.loader should be one of (default, imgix, cloudinary, akamai), received invalid value (notreal)"
Received string:    "Error: Specified images.loader should be one of (default, imgix, cloudinary, akamai, custom), received invalid value (notreal).
See more info here: https://err.sh/next.js/invalid-images-config

  3 | if(userDistDir==='public'){throw new Error(`The 'public' directory is reserved in Next.js and can not be set as the 'distDir'. https://err.sh/vercel/next.js/can-not-output-to-public`);}// make sure distDir isn't an empty string as it can result in the provided
  4 | // directory being deleted in development mode
> 5 | if(userDistDir.length===0){throw new Error(`Invalid distDir provided, distDir can not be an empty string. Please remove this config or set it to undefined`);}}if(key==='pageExtensions'){if(!Array.isArray(value)){throw new Error(`Specified pageExtensions is not an array of strings, found "${value}". Please update this config or remove it.`);}if(!value.length){throw new Error(`Specified pageExtensions is an empty array. Please update it with the relevant extensions or remove it.`);}value.forEach(ext=>{if(typeof ext!=='string'){throw new Error(`Specified pageExtensions is not an array of strings, found "${ext}" of type "${typeof ext}". Please update this config or remove it.`);}});}if(!!value&&value.constructor===Object){currentConfig[key]={...defaultConfig[key],...Object.keys(value).reduce((c,k)=>{const v=value[k];if(v!==undefined&&v!==null){c[k]=v;}return c;},{})};}else{currentConfig[key]=value;}return currentConfig;},{});const result={...defaultConfig,...config};if(typeof result.assetPrefix!=='string'){throw new Error(`Specified assetPrefix is not a string, found type "${typeof result.assetPrefix}" https://err.sh/vercel/next.js/invalid-assetprefix`);}if(typeof result.basePath!=='string'){throw new Error(`Specified basePath is not a string, found type "${typeof result.basePath}"`);}if(result.basePath!==''){if(result.basePath==='/'){throw new Error(`Specified basePath /. basePath has to be either an empty string or a path prefix"`);}if(!result.basePath.startsWith('/')){throw new Error(`Specified basePath has to start with a /, found "${result.basePath}"`);}if(result.basePath!=='/'){if(result.basePath.endsWith('/')){throw new Error(`Specified basePath should not end with /, found "${result.basePath}"`);}if(result.assetPrefix===''){result.assetPrefix=result.basePath;}if(result.amp.canonicalBase===''){result.amp.canonicalBase=result.basePath;}}}if(result==null?void 0:result.images){const images=result.images;if(typeof images!=='object'){throw new Error(`Specified images should be an object received ${typeof images}.\nSee more info here: https://err.sh/next.js/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}.\nSee more info here: https://err.sh/next.js/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.\nSee more info here: https://err.sh/nextjs/invalid-images-config`);}const invalid=images.domains.filter(d=>typeof d!=='string');if(invalid.length>0){throw new Error(`Specified images.domains should be an Array of strings received invalid values (${invalid.join(', ')}).\nSee more info here: https://err.sh/next.js/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}.\nSee more info here: https://err.sh/next.js/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.\nSee more info here: https://err.sh/nextjs/invalid-images-config`);}const invalid=deviceSizes.filter(d=>{return typeof d!=='number'||d<1||d>10000;});if(invalid.length>0){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/next.js/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}.\nSee more info here: https://err.sh/next.js/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.\nSee more info here: https://err.sh/nextjs/invalid-images-config`);}const invalid=imageSizes.filter(d=>{return typeof d!=='number'||d<1||d>10000;});if(invalid.length>0){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/next.js/invalid-images-config`);}}if(!images.loader){images.loader='default';}if(!_imageConfig.VALID_LOADERS.includes(images.loader)){throw new Error(`Specified images.loader should be one of (${_imageConfig.VALID_LOADERS.join(', ')}), received invalid value (${images.loader}).\nSee more info here: https://err.sh/next.js/invalid-images-config`);}// Append trailing slash for non-default loaders
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ^
  6 | if(images.path){if(images.loader!=='default'&&images.path[images.path.length-1]!=='/'){images.path+='/';}}}if(result.i18n){const{i18n}=result;const i18nType=typeof i18n;if(i18nType!=='object'){throw new Error(`Specified i18n should be an object received ${i18nType}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}if(!Array.isArray(i18n.locales)){throw new Error(`Specified i18n.locales should be an Array received ${typeof i18n.locales}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}const defaultLocaleType=typeof i18n.defaultLocale;if(!i18n.defaultLocale||defaultLocaleType!=='string'){throw new Error(`Specified i18n.defaultLocale should be a string.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}if(typeof i18n.domains!=='undefined'&&!Array.isArray(i18n.domains)){throw new Error(`Specified i18n.domains must be an array of domain objects e.g. [ { domain: 'example.fr', defaultLocale: 'fr', locales: ['fr'] } ] received ${typeof i18n.domains}.\nSee more info here: https://err.sh/nextjs/invalid-i18n-config`);}if(i18n.domains){const invalidDomainItems=i18n.domains.filter(item=>{if(!item||typeof item!=='object')return true;if(!item.defaultLocale)return true;if(!item.domain||typeof item.domain!=='string')return true;let hasInvalidLocale=false;if(Array.isArray(item.locales)){for(const locale of item.locales){if(typeof locale!=='string')hasInvalidLocale=true;for(const domainItem of i18n.domains){if(domainItem===item)continue;if(domainItem.locales&&domainItem.locales.includes(locale)){console.warn(`Both ${item.domain} and ${domainItem.domain} configured the locale (${locale}) but only one can. Remove it from one i18n.domains config to continue`);hasInvalidLocale=true;break;}}}}return hasInvalidLocale;});if(invalidDomainItems.length>0){throw new Error(`Invalid i18n.domains values:\n${invalidDomainItems.map(item=>JSON.stringify(item)).join('\n')}\n\ndomains value must follow format { domain: 'example.fr', defaultLocale: 'fr', locales: ['fr'] }.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}}if(!Array.isArray(i18n.locales)){throw new Error(`Specified i18n.locales must be an array of locale strings e.g. ["en-US", "nl-NL"] received ${typeof i18n.locales}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}const invalidLocales=i18n.locales.filter(locale=>typeof locale!=='string');if(invalidLocales.length>0){throw new Error(`Specified i18n.locales contains invalid values (${invalidLocales.map(String).join(', ')}), locales must be valid locale tags provided as strings e.g. "en-US".\n`+`See here for list of valid language sub-tags: http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry`);}if(!i18n.locales.includes(i18n.defaultLocale)){throw new Error(`Specified i18n.defaultLocale should be included in i18n.locales.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}// make sure default Locale is at the front
  7 | i18n.locales=[i18n.defaultLocale,...i18n.locales.filter(locale=>locale!==i18n.defaultLocale)];const localeDetectionType=typeof i18n.localeDetection;if(localeDetectionType!=='boolean'&&localeDetectionType!=='undefined'){throw new Error(`Specified i18n.localeDetection should be undefined or a boolean received ${localeDetectionType}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}}return result;}function normalizeConfig(phase,config){if(typeof config==='function'){config=config(phase,{defaultConfig});if(typeof config.then==='function'){throw new Error('> Promise returned in next config. https://err.sh/vercel/next.js/promise-in-next-config');}}return config;}function loadConfig(phase,dir,customConfig){if(customConfig){return assignDefaults({configOrigin:'server',...customConfig});}const path=_findUp.default.sync(_constants.CONFIG_FILE,{cwd:dir});// If config file was found
  8 | if(path==null?void 0:path.length){var _userConfig$amp,_userConfig$experimen;const userConfigModule=require(path);const userConfig=normalizeConfig(phase,userConfigModule.default||userConfigModule);if(Object.keys(userConfig).length===0){Log.warn('Detected next.config.js, no exported configuration found. https://err.sh/vercel/next.js/empty-configuration');}if(userConfig.target&&!targets.includes(userConfig.target)){throw new Error(`Specified target is invalid. Provided: "${userConfig.target}" should be one of ${targets.join(', ')}`);}if((_userConfig$amp=userConfig.amp)==null?void 0:_userConfig$amp.canonicalBase){const{canonicalBase}=userConfig.amp||{};userConfig.amp=userConfig.amp||{};userConfig.amp.canonicalBase=(canonicalBase.endsWith('/')?canonicalBase.slice(0,-1):canonicalBase)||'';}if(((_userConfig$experimen=userConfig.experimental)==null?void 0:_userConfig$experimen.reactMode)&&!reactModes.includes(userConfig.experimental.reactMode)){throw new Error(`Specified React Mode is invalid. Provided: ${userConfig.experimental.reactMode} should be one of ${reactModes.join(', ')}`);}return assignDefaults({configOrigin:_constants.CONFIG_FILE,configFile:path,...userConfig});}else{const configBaseName=(0,_path.basename)(_constants.CONFIG_FILE,(0,_path.extname)(_constants.CONFIG_FILE));const nonJsPath=_findUp.default.sync([`${configBaseName}.jsx`,`${configBaseName}.ts`,`${configBaseName}.tsx`,`${configBaseName}.json`],{cwd:dir});if(nonJsPath==null?void 0:nonJsPath.length){throw new Error(`Configuring Next.js via '${(0,_path.basename)(nonJsPath)}' is not supported. Please replace the file with 'next.config.js'.`);}}return defaultConfig;}function isTargetLikeServerless(target){const isServerless=target==='serverless';const isServerlessTrace=target==='experimental-serverless-trace';return isServerless||isServerlessTrace;}

  at assignDefaults (../packages/next/dist/next-server/server/config.js:5:4616)
  at loadConfig (../packages/next/dist/next-server/server/config.js:8:1101)
  at new Server (../packages/next/dist/next-server/server/next-server.js:1:4383)
  at new DevServer (../packages/next/dist/server/next-dev-server.js:1:2964)
  at createServer (../packages/next/dist/server/next.js:2:607)
  at start (../packages/next/dist/server/lib/start-server.js:1:323)
  at nextDev (../packages/next/dist/cli/next-dev.js:20:1776)
  at ../packages/next/dist/bin/next:26:341
  "
  at Object.<anonymous> (integration/image-optimizer/test/index.test.js:570:22)

ijjk · 2020-11-19T22:01:14Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
buildDuration	10.4s	10.7s	⚠️ +289ms
nodeModulesSize	84.9 MB	84.9 MB	⚠️ +2.29 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.399	2.432	⚠️ +0.03
/ avg req/sec	1042.11	1027.94	⚠️ -14.17
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.528	1.617	⚠️ +0.09
/error-in-render avg req/sec	1636.21	1545.94	⚠️ -90.27

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
677f882d2ed8..4972.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f1a49fb..e45e.js gzip	6.52 kB	6.52 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-b618194..5477.js gzip	1.61 kB	1.61 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	8.01 kB	8.01 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
index.html gzip	613 B	613 B	✓
link.html gzip	621 B	621 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
buildDuration	11.9s	12.1s	⚠️ +125ms
nodeModulesSize	84.9 MB	84.9 MB	⚠️ +2.29 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
677f882d2ed8..4972.js gzip	12.7 kB	12.7 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-f1a49fb..e45e.js gzip	6.52 kB	6.52 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	58.9 kB	58.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_app-3b0cf13..85f8.js gzip	1.28 kB	1.28 kB	✓
_error-6f635..c393.js gzip	3.44 kB	3.44 kB	✓
hooks-d4ffc3..9e0f.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-b618194..5477.js gzip	1.61 kB	1.61 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	8.01 kB	8.01 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_error.js	914 kB	914 kB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	915 kB	915 kB	✓
link.js	973 kB	973 kB	✓
routerDirect.js	966 kB	966 kB	✓
withRouter.js	966 kB	966 kB	✓
Overall change	4.74 MB	4.74 MB	✓

Commit: a68391b

ijjk · 2020-11-19T22:06:08Z

Failing test suites

Commit: a68391b

test/integration/image-optimizer/test/index.test.js

Image Optimizer > config checks > should error when loader contains invalid value

Expand output

● Image Optimizer › config checks › should error when loader contains invalid value

expect(received).toContain(expected) // indexOf

Expected substring: "Specified images.loader should be one of (default, imgix, cloudinary, akamai), received invalid value (notreal)"
Received string:    "Error: Specified images.loader should be one of (default, imgix, cloudinary, akamai, custom), received invalid value (notreal).
See more info here: https://err.sh/next.js/invalid-images-config

  3 | if(userDistDir==='public'){throw new Error(`The 'public' directory is reserved in Next.js and can not be set as the 'distDir'. https://err.sh/vercel/next.js/can-not-output-to-public`);}// make sure distDir isn't an empty string as it can result in the provided
  4 | // directory being deleted in development mode
> 5 | if(userDistDir.length===0){throw new Error(`Invalid distDir provided, distDir can not be an empty string. Please remove this config or set it to undefined`);}}if(key==='pageExtensions'){if(!Array.isArray(value)){throw new Error(`Specified pageExtensions is not an array of strings, found "${value}". Please update this config or remove it.`);}if(!value.length){throw new Error(`Specified pageExtensions is an empty array. Please update it with the relevant extensions or remove it.`);}value.forEach(ext=>{if(typeof ext!=='string'){throw new Error(`Specified pageExtensions is not an array of strings, found "${ext}" of type "${typeof ext}". Please update this config or remove it.`);}});}if(!!value&&value.constructor===Object){currentConfig[key]={...defaultConfig[key],...Object.keys(value).reduce((c,k)=>{const v=value[k];if(v!==undefined&&v!==null){c[k]=v;}return c;},{})};}else{currentConfig[key]=value;}return currentConfig;},{});const result={...defaultConfig,...config};if(typeof result.assetPrefix!=='string'){throw new Error(`Specified assetPrefix is not a string, found type "${typeof result.assetPrefix}" https://err.sh/vercel/next.js/invalid-assetprefix`);}if(typeof result.basePath!=='string'){throw new Error(`Specified basePath is not a string, found type "${typeof result.basePath}"`);}if(result.basePath!==''){if(result.basePath==='/'){throw new Error(`Specified basePath /. basePath has to be either an empty string or a path prefix"`);}if(!result.basePath.startsWith('/')){throw new Error(`Specified basePath has to start with a /, found "${result.basePath}"`);}if(result.basePath!=='/'){if(result.basePath.endsWith('/')){throw new Error(`Specified basePath should not end with /, found "${result.basePath}"`);}if(result.assetPrefix===''){result.assetPrefix=result.basePath;}if(result.amp.canonicalBase===''){result.amp.canonicalBase=result.basePath;}}}if(result==null?void 0:result.images){const images=result.images;if(typeof images!=='object'){throw new Error(`Specified images should be an object received ${typeof images}.\nSee more info here: https://err.sh/next.js/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}.\nSee more info here: https://err.sh/next.js/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.\nSee more info here: https://err.sh/nextjs/invalid-images-config`);}const invalid=images.domains.filter(d=>typeof d!=='string');if(invalid.length>0){throw new Error(`Specified images.domains should be an Array of strings received invalid values (${invalid.join(', ')}).\nSee more info here: https://err.sh/next.js/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}.\nSee more info here: https://err.sh/next.js/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.\nSee more info here: https://err.sh/nextjs/invalid-images-config`);}const invalid=deviceSizes.filter(d=>{return typeof d!=='number'||d<1||d>10000;});if(invalid.length>0){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/next.js/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}.\nSee more info here: https://err.sh/next.js/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.\nSee more info here: https://err.sh/nextjs/invalid-images-config`);}const invalid=imageSizes.filter(d=>{return typeof d!=='number'||d<1||d>10000;});if(invalid.length>0){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/next.js/invalid-images-config`);}}if(!images.loader){images.loader='default';}if(!_imageConfig.VALID_LOADERS.includes(images.loader)){throw new Error(`Specified images.loader should be one of (${_imageConfig.VALID_LOADERS.join(', ')}), received invalid value (${images.loader}).\nSee more info here: https://err.sh/next.js/invalid-images-config`);}// Append trailing slash for non-default loaders
    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        ^
  6 | if(images.path){if(images.loader!=='default'&&images.path[images.path.length-1]!=='/'){images.path+='/';}}}if(result.i18n){const{i18n}=result;const i18nType=typeof i18n;if(i18nType!=='object'){throw new Error(`Specified i18n should be an object received ${i18nType}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}if(!Array.isArray(i18n.locales)){throw new Error(`Specified i18n.locales should be an Array received ${typeof i18n.locales}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}const defaultLocaleType=typeof i18n.defaultLocale;if(!i18n.defaultLocale||defaultLocaleType!=='string'){throw new Error(`Specified i18n.defaultLocale should be a string.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}if(typeof i18n.domains!=='undefined'&&!Array.isArray(i18n.domains)){throw new Error(`Specified i18n.domains must be an array of domain objects e.g. [ { domain: 'example.fr', defaultLocale: 'fr', locales: ['fr'] } ] received ${typeof i18n.domains}.\nSee more info here: https://err.sh/nextjs/invalid-i18n-config`);}if(i18n.domains){const invalidDomainItems=i18n.domains.filter(item=>{if(!item||typeof item!=='object')return true;if(!item.defaultLocale)return true;if(!item.domain||typeof item.domain!=='string')return true;let hasInvalidLocale=false;if(Array.isArray(item.locales)){for(const locale of item.locales){if(typeof locale!=='string')hasInvalidLocale=true;for(const domainItem of i18n.domains){if(domainItem===item)continue;if(domainItem.locales&&domainItem.locales.includes(locale)){console.warn(`Both ${item.domain} and ${domainItem.domain} configured the locale (${locale}) but only one can. Remove it from one i18n.domains config to continue`);hasInvalidLocale=true;break;}}}}return hasInvalidLocale;});if(invalidDomainItems.length>0){throw new Error(`Invalid i18n.domains values:\n${invalidDomainItems.map(item=>JSON.stringify(item)).join('\n')}\n\ndomains value must follow format { domain: 'example.fr', defaultLocale: 'fr', locales: ['fr'] }.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}}if(!Array.isArray(i18n.locales)){throw new Error(`Specified i18n.locales must be an array of locale strings e.g. ["en-US", "nl-NL"] received ${typeof i18n.locales}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}const invalidLocales=i18n.locales.filter(locale=>typeof locale!=='string');if(invalidLocales.length>0){throw new Error(`Specified i18n.locales contains invalid values (${invalidLocales.map(String).join(', ')}), locales must be valid locale tags provided as strings e.g. "en-US".\n`+`See here for list of valid language sub-tags: http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry`);}if(!i18n.locales.includes(i18n.defaultLocale)){throw new Error(`Specified i18n.defaultLocale should be included in i18n.locales.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}// make sure default Locale is at the front
  7 | i18n.locales=[i18n.defaultLocale,...i18n.locales.filter(locale=>locale!==i18n.defaultLocale)];const localeDetectionType=typeof i18n.localeDetection;if(localeDetectionType!=='boolean'&&localeDetectionType!=='undefined'){throw new Error(`Specified i18n.localeDetection should be undefined or a boolean received ${localeDetectionType}.\nSee more info here: https://err.sh/next.js/invalid-i18n-config`);}}return result;}function normalizeConfig(phase,config){if(typeof config==='function'){config=config(phase,{defaultConfig});if(typeof config.then==='function'){throw new Error('> Promise returned in next config. https://err.sh/vercel/next.js/promise-in-next-config');}}return config;}function loadConfig(phase,dir,customConfig){if(customConfig){return assignDefaults({configOrigin:'server',...customConfig});}const path=_findUp.default.sync(_constants.CONFIG_FILE,{cwd:dir});// If config file was found
  8 | if(path==null?void 0:path.length){var _userConfig$amp,_userConfig$experimen;const userConfigModule=require(path);const userConfig=normalizeConfig(phase,userConfigModule.default||userConfigModule);if(Object.keys(userConfig).length===0){Log.warn('Detected next.config.js, no exported configuration found. https://err.sh/vercel/next.js/empty-configuration');}if(userConfig.target&&!targets.includes(userConfig.target)){throw new Error(`Specified target is invalid. Provided: "${userConfig.target}" should be one of ${targets.join(', ')}`);}if((_userConfig$amp=userConfig.amp)==null?void 0:_userConfig$amp.canonicalBase){const{canonicalBase}=userConfig.amp||{};userConfig.amp=userConfig.amp||{};userConfig.amp.canonicalBase=(canonicalBase.endsWith('/')?canonicalBase.slice(0,-1):canonicalBase)||'';}if(((_userConfig$experimen=userConfig.experimental)==null?void 0:_userConfig$experimen.reactMode)&&!reactModes.includes(userConfig.experimental.reactMode)){throw new Error(`Specified React Mode is invalid. Provided: ${userConfig.experimental.reactMode} should be one of ${reactModes.join(', ')}`);}return assignDefaults({configOrigin:_constants.CONFIG_FILE,configFile:path,...userConfig});}else{const configBaseName=(0,_path.basename)(_constants.CONFIG_FILE,(0,_path.extname)(_constants.CONFIG_FILE));const nonJsPath=_findUp.default.sync([`${configBaseName}.jsx`,`${configBaseName}.ts`,`${configBaseName}.tsx`,`${configBaseName}.json`],{cwd:dir});if(nonJsPath==null?void 0:nonJsPath.length){throw new Error(`Configuring Next.js via '${(0,_path.basename)(nonJsPath)}' is not supported. Please replace the file with 'next.config.js'.`);}}return defaultConfig;}function isTargetLikeServerless(target){const isServerless=target==='serverless';const isServerlessTrace=target==='experimental-serverless-trace';return isServerless||isServerlessTrace;}

  at assignDefaults (../packages/next/dist/next-server/server/config.js:5:4616)
  at loadConfig (../packages/next/dist/next-server/server/config.js:8:1101)
  at new Server (../packages/next/dist/next-server/server/next-server.js:1:4383)
  at new DevServer (../packages/next/dist/server/next-dev-server.js:1:2964)
  at createServer (../packages/next/dist/server/next.js:2:607)
  at start (../packages/next/dist/server/lib/start-server.js:1:323)
  at nextDev (../packages/next/dist/cli/next-dev.js:20:1776)
  at ../packages/next/dist/bin/next:26:341
  "
  at Object.<anonymous> (integration/image-optimizer/test/index.test.js:570:22)

styfle · 2020-11-19T22:06:44Z

packages/next/client/image.tsx

-      `registerCustomResolver can only be used if image loader is set to 'custom' in next.config.js`
-    )
+  if (configLoader !== 'custom') {
+    resolverError = true


What's the reason to delay the error instead of throw here?

I noticed when writing the tests that if it throws during _app.js script evaluation, the page renders an internal server error instead of the red box.

…tom-resolvers

ijjk · 2020-12-02T20:33:19Z

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
buildDuration	9.7s	9.7s	-52ms
nodeModulesSize	82.4 MB	82.4 MB	⚠️ +2.94 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
/ failed reqs	0	0	✓
/ total time (seconds)	1.908	1.947	⚠️ +0.04
/ avg req/sec	1310.15	1283.95	⚠️ -26.2
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.18	1.203	⚠️ +0.02
/error-in-render avg req/sec	2118.15	2077.81	⚠️ -40.34

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
677f882d2ed8..8b6e.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-3c9ff84..1d7c.js gzip	6.56 kB	6.56 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_app-7231d4b..5856.js gzip	1.28 kB	1.28 kB	✓
_error-fca3d..2eb1.js gzip	3.44 kB	3.44 kB	✓
hooks-d4591d..e7c2.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-db223d9..dbd7.js gzip	1.61 kB	1.61 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	8.01 kB	8.01 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Rendered Page Sizes

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
index.html gzip	614 B	614 B	✓
link.html gzip	620 B	620 B	✓
withRouter.html gzip	608 B	608 B	✓
Overall change	1.84 kB	1.84 kB	✓

Serverless Mode

General Overall increase ⚠️

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
buildDuration	11.4s	11.5s	⚠️ +56ms
nodeModulesSize	82.4 MB	82.4 MB	⚠️ +2.94 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
677f882d2ed8..8b6e.js gzip	12.8 kB	12.8 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-3c9ff84..1d7c.js gzip	6.56 kB	6.56 kB	✓
webpack-e067..f178.js gzip	751 B	751 B	✓
Overall change	59 kB	59 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
polyfills-4b..e242.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_app-7231d4b..5856.js gzip	1.28 kB	1.28 kB	✓
_error-fca3d..2eb1.js gzip	3.44 kB	3.44 kB	✓
hooks-d4591d..e7c2.js gzip	887 B	887 B	✓
index-17468f..5d83.js gzip	227 B	227 B	✓
link-db223d9..dbd7.js gzip	1.61 kB	1.61 kB	✓
routerDirect..924c.js gzip	284 B	284 B	✓
withRouter-7..c13d.js gzip	284 B	284 B	✓
Overall change	8.01 kB	8.01 kB	✓

Client Build Manifests

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_buildManifest.js gzip	321 B	321 B	✓
Overall change	321 B	321 B	✓

Serverless bundles

	vercel/next.js canary	azukaru/next.js image-component-custom-resolvers	Change
_error.js	997 kB	997 kB	✓
404.html	2.67 kB	2.67 kB	✓
hooks.html	1.92 kB	1.92 kB	✓
index.js	998 kB	998 kB	✓
link.js	1.05 MB	1.05 MB	✓
routerDirect.js	1.04 MB	1.04 MB	✓
withRouter.js	1.04 MB	1.04 MB	✓
Overall change	5.14 MB	5.14 MB	✓

Commit: f0e7dc0

styfle · 2020-12-04T15:00:57Z

I think @Timer had some reservations about this implementation and @timneutkens still needs to take a look.

Let's discuss on Monday and come up with a solution so we can move forward on PR and unblock others like #19117.

danielyefet · 2020-12-06T15:10:29Z

In keeping with the config-driven approach, I'm wondering whether it's worth having the custom resolver as an optional anonymous function for the loader property? So you could do something like this:

{
  image: {
    loader: ({ src, width }) => {
      return `https://foo/${src}/${width}/`;
    }
  }
}

mirzap · 2020-12-14T13:24:52Z

Any news regarding this feature? Did you decide how to proceed @styfle ?

dohomi · 2020-12-15T07:47:36Z

It would be great if the custom resolver function could be used to switch between resolvers based on their origin filename. That would make it flexible to use more than one resolver endpoint and even extend the resolver to use any custom function. Ideally the already existing NextJS resolver functions should be available as a second argument in the custom resolver function, then they could be called on demand.

schoenwaldnils · 2020-12-15T09:30:46Z

@dohomi just out of curiosity .. what is a reason to use multiple resolver? 🤔

ItsWendell · 2020-12-15T14:08:03Z

@schoenwaldnils One of my uses is that I have some static images in my public folder for banners / hero images / placeholders / logo's / etc, and that I have a bunch of user-generated content stored on Cloudinary (or any other CDN / image service), having the ability to tell the Image component which provider / resolver to use would be great so both sources would be optimized.

dohomi · 2020-12-15T14:42:01Z

@schoenwaldnils I use in one project NextJS with Storyblok CMS and Shopify headless ecommerce. Both headless APIs have 2 different image storages with possible different image proxies. I also think that in the community people already asked for different approaches in one NextJS endpoint.

ricokahler · 2020-12-15T20:28:08Z

I've thought about this problem for a bit in #18606 (comment) and I would like to advise against a config driven approach.

To me, it seems like a lot of work injecting configuration at the next.js level when users could configure it via a prop and compose over the next/image component.

With this approach, this feature becomes very simple to implement and test. It touches just the image component and there's a nice sense of purity to it. The only down side is that users can no longer just import the next/image — but that's okay. The react way is composition anyway 😎

Edit: I made a quick draft PR demonstrating the idea in #20213

schoenwaldnils · 2020-12-15T21:40:17Z

@ItsWendell ah, yes, that makes absolute sense. Building the page with default next/image and CMS images with Contentfuls Image provider for example.
Similar to your example @dohomi 👍

@ricokahler this might make it easier to differentiate between loaders 🤔
would it be possible to use the next/image with a custom config prop? Edit: ah, just saw your PR 👍😁

atcastle · 2020-12-15T23:30:36Z

Thanks for the feedback on this ticket. I agree that the composition-based approach with a custom loader prop is the best way to go. I retooled the tests in this branch to use that approach instead and opened a new PR at #20216.

mpoisot · 2020-12-16T17:50:11Z

To build on @ricokahler's approach, the Image component could also look for a loader defined in an ancestor Context.

@ricokahler

This is a #19325 reconfigured to support a loader passed in via a `loader` prop on the Image component, rather than using a config-based approach. The idea is that applications wanting to use a custom loader will create a wrapper element for the image component that incorporates that loader. See a simple example of this pattern in the integration tests. This solution is similar to the one prototyped by @ricokahler in #20213 and described at #18606 (comment) --- Closes #19325 Fixes #18606

lightningspirit · 2021-06-30T17:06:30Z

test/integration/image-component/custom-resolver/pages/_app.js

+import { registerCustomImageLoader } from 'next/image'
+
+registerCustomImageLoader(({ src, width, quality }) => {
+  return `https://customresolver.com/${src}?w~~${width},q~~${quality}`


Just to point out that, for security reasons, I suggest to use domains that you can control, even for integration tests. At least one can use example.com for the purpose. 😄

atcastle added 2 commits November 18, 2020 12:18

support custom image component url resolvers

c78462b

Merge remote-tracking branch 'origin/canary' into image-component-cus…

86e51ed

…tom-resolvers

atcastle requested review from ijjk, lfades, Timer and timneutkens as code owners November 19, 2020 17:45

ijjk added the type: next label Nov 19, 2020

vercel bot temporarily deployed to Preview November 19, 2020 17:45 Inactive

styfle reviewed Nov 19, 2020

View reviewed changes

packages/next/client/image.tsx Outdated Show resolved Hide resolved

styfle reviewed Nov 19, 2020

View reviewed changes

Fix inccorect conditional

d464057

vercel bot temporarily deployed to Preview November 19, 2020 20:12 Inactive

Add tests for custom resolver errors

a68391b

vercel bot temporarily deployed to Preview November 19, 2020 21:51 Inactive

styfle reviewed Nov 19, 2020

View reviewed changes

styfle previously approved these changes Nov 19, 2020

View reviewed changes

atcastle added 2 commits November 20, 2020 10:43

Add support for resolver alternative to loader property

83d531f

Merge remote-tracking branch 'origin/canary' into image-component-cus…

6c3234a

…tom-resolvers

styfle mentioned this pull request Dec 2, 2020

Add Contentful image loader #19117

Closed

Rename registerCustomResolver to registerCustomImageLoader

f0e7dc0

atcastle dismissed styfle’s stale review via f0e7dc0 December 2, 2020 20:24

vercel bot temporarily deployed to Preview December 2, 2020 20:24 Inactive

timneutkens mentioned this pull request Dec 14, 2020

Add support for Fastly image loader #19363

Closed

mpoisot mentioned this pull request Dec 15, 2020

Custom Image Loaders #18606

Closed

styfle linked an issue Dec 15, 2020 that may be closed by this pull request

Custom Image Loaders #18606

Closed

ricokahler mentioned this pull request Dec 15, 2020

Add image loader prop #20213

Closed

atcastle mentioned this pull request Dec 15, 2020

Support for custom image loaders via image component prop #20216

Merged

danielyefet mentioned this pull request Dec 16, 2020

Add Cloudflare image loader #19613

Closed

timneutkens mentioned this pull request Jan 3, 2021

Add: statically.io loader for next/image #20249

Closed

kodiakhq bot closed this in #20216 Jan 5, 2021

lightningspirit reviewed Jun 30, 2021

View reviewed changes

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Image component custom resolvers #19325

Image component custom resolvers #19325

atcastle commented Nov 19, 2020

ijjk commented Nov 19, 2020

ijjk commented Nov 19, 2020

styfle left a comment

ijjk commented Nov 19, 2020

ijjk commented Nov 19, 2020

ijjk commented Nov 19, 2020

ijjk commented Nov 19, 2020

styfle Nov 19, 2020

atcastle Nov 19, 2020

ijjk commented Dec 2, 2020

styfle commented Dec 4, 2020

danielyefet commented Dec 6, 2020

mirzap commented Dec 14, 2020

dohomi commented Dec 15, 2020 •

edited

Loading

schoenwaldnils commented Dec 15, 2020

ItsWendell commented Dec 15, 2020

dohomi commented Dec 15, 2020 •

edited

Loading

ricokahler commented Dec 15, 2020 •

edited

Loading

schoenwaldnils commented Dec 15, 2020

atcastle commented Dec 15, 2020

mpoisot commented Dec 16, 2020

lightningspirit Jun 30, 2021

Image component custom resolvers #19325

Image component custom resolvers #19325

Conversation

atcastle commented Nov 19, 2020

ijjk commented Nov 19, 2020

Stats from current PR

ijjk commented Nov 19, 2020

Failing test suites

styfle left a comment

Choose a reason for hiding this comment

ijjk commented Nov 19, 2020

Stats from current PR

ijjk commented Nov 19, 2020

Failing test suites

ijjk commented Nov 19, 2020

Stats from current PR

ijjk commented Nov 19, 2020

Failing test suites

styfle Nov 19, 2020

Choose a reason for hiding this comment

atcastle Nov 19, 2020

Choose a reason for hiding this comment

ijjk commented Dec 2, 2020

Stats from current PR

styfle commented Dec 4, 2020

danielyefet commented Dec 6, 2020

mirzap commented Dec 14, 2020

dohomi commented Dec 15, 2020 • edited Loading

schoenwaldnils commented Dec 15, 2020

ItsWendell commented Dec 15, 2020

dohomi commented Dec 15, 2020 • edited Loading

ricokahler commented Dec 15, 2020 • edited Loading

schoenwaldnils commented Dec 15, 2020

atcastle commented Dec 15, 2020

mpoisot commented Dec 16, 2020

lightningspirit Jun 30, 2021

Choose a reason for hiding this comment

dohomi commented Dec 15, 2020 •

edited

Loading

dohomi commented Dec 15, 2020 •

edited

Loading

ricokahler commented Dec 15, 2020 •

edited

Loading