Fix types for static image

[ykzts]

If you give a Static Image to the Image component, TypeScript will throw a type error. This Pull Request fixes it.

Bug

• Related issues linked using fixes #number
• Integration tests added

Feature

• Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
• Related issues linked using fixes #number
• Integration tests added
• Documentation added
• Telemetry added. In case of a feature if it's used or not.

Documentation / Examples

• Make sure the linting passes

---

follow-up #24993
cc @atcastle

[styfle]

Thanks!

[ijjk]

Stats from current PR

Default Server Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	ykzts/next.js fix-types	Change
buildDuration	15.1s	15.2s	⚠️ +76ms
buildDurationCached	3.7s	3.6s	-23ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +1.3 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ykzts/next.js fix-types	Change
/ failed reqs	0	0	✓
/ total time (seconds)	2.963	2.956	-0.01
/ avg req/sec	843.73	845.68	+1.95
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.742	1.758	⚠️ +0.02
/error-in-render avg req/sec	1435.22	1422.35	⚠️ -12.87

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ykzts/next.js fix-types	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ykzts/next.js fix-types	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	ykzts/next.js fix-types	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	ykzts/next.js fix-types	Change
_buildManifest.js gzip	391 B	391 B	✓
Overall change	391 B	391 B	✓

Rendered Page Sizes

	vercel/next.js canary	ykzts/next.js fix-types	Change
index.html gzip	572 B	572 B	✓
link.html gzip	579 B	579 B	✓
withRouter.html gzip	567 B	567 B	✓
Overall change	1.72 kB	1.72 kB	✓

---

Serverless Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	ykzts/next.js fix-types	Change
buildDuration	16.9s	16.9s	⚠️ +16ms
buildDurationCached	4.9s	4.8s	-80ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +1.3 kB

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ykzts/next.js fix-types	Change
framework-HASH.js gzip	39.3 kB	39.3 kB	✓
main-HASH.js gzip	20.2 kB	20.2 kB	✓
webpack-HASH.js gzip	804 B	804 B	✓
Overall change	60.3 kB	60.3 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ykzts/next.js fix-types	Change
polyfills-HASH.js gzip	31.1 kB	31.1 kB	✓
Overall change	31.1 kB	31.1 kB	✓

Client Pages

	vercel/next.js canary	ykzts/next.js fix-types	Change
_app-HASH.js gzip	801 B	801 B	✓
_error-HASH.js gzip	3.07 kB	3.07 kB	✓
amp-HASH.js gzip	527 B	527 B	✓
css-HASH.js gzip	334 B	334 B	✓
hooks-HASH.js gzip	890 B	890 B	✓
index-HASH.js gzip	263 B	263 B	✓
link-HASH.js gzip	1.64 kB	1.64 kB	✓
routerDirect..HASH.js gzip	333 B	333 B	✓
withRouter-HASH.js gzip	330 B	330 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	8.31 kB	8.31 kB	✓

Client Build Manifests

	vercel/next.js canary	ykzts/next.js fix-types	Change
_buildManifest.js gzip	391 B	391 B	✓
Overall change	391 B	391 B	✓

Serverless bundles Overall decrease ✓

	vercel/next.js canary	ykzts/next.js fix-types	Change
_error.js	16.9 kB	16.9 kB	-2 B
404.html	2.44 kB	2.44 kB	✓
500.html	2.43 kB	2.43 kB	✓
amp.amp.html	10.8 kB	10.8 kB	✓
amp.html	1.63 kB	1.63 kB	✓
css.html	1.81 kB	1.81 kB	✓
hooks.html	1.69 kB	1.69 kB	✓
index.js	17.2 kB	17.2 kB	✓
link.js	17.4 kB	17.4 kB	✓
routerDirect.js	17.4 kB	17.4 kB	✓
withRouter.js	17.4 kB	17.4 kB	✓
Overall change	107 kB	107 kB	-2 B

---

Webpack 4 Mode (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	ykzts/next.js fix-types	Change
buildDuration	13s	13.1s	⚠️ +101ms
buildDurationCached	5.4s	5.4s	⚠️ +24ms
nodeModulesSize	46.7 MB	46.7 MB	⚠️ +1.3 kB

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	ykzts/next.js fix-types	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.096	3.159	⚠️ +0.06
/ avg req/sec	807.48	791.35	⚠️ -16.13
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.774	1.799	⚠️ +0.02
/error-in-render avg req/sec	1409.46	1389.63	⚠️ -19.83

Client Bundles (main, webpack, commons)

	vercel/next.js canary	ykzts/next.js fix-types	Change
677f882d2ed8..HASH.js gzip	13.3 kB	13.3 kB	✓
framework.HASH.js gzip	39 kB	39 kB	✓
main-HASH.js gzip	7.99 kB	7.99 kB	✓
webpack-HASH.js gzip	751 B	751 B	✓
Overall change	61.1 kB	61.1 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	ykzts/next.js fix-types	Change
polyfills-HASH.js gzip	31.3 kB	31.3 kB	✓
Overall change	31.3 kB	31.3 kB	✓

Client Pages

	vercel/next.js canary	ykzts/next.js fix-types	Change
_app-HASH.js gzip	1.07 kB	1.07 kB	✓
_error-HASH.js gzip	3.74 kB	3.74 kB	✓
amp-HASH.js gzip	536 B	536 B	✓
css-HASH.js gzip	339 B	339 B	✓
hooks-HASH.js gzip	887 B	887 B	✓
index-HASH.js gzip	227 B	227 B	✓
link-HASH.js gzip	1.63 kB	1.63 kB	✓
routerDirect..HASH.js gzip	303 B	303 B	✓
withRouter-HASH.js gzip	302 B	302 B	✓
e025d2764813..52f.css gzip	125 B	125 B	✓
Overall change	9.16 kB	9.16 kB	✓

Client Build Manifests

	vercel/next.js canary	ykzts/next.js fix-types	Change
_buildManifest.js gzip	420 B	420 B	✓
Overall change	420 B	420 B	✓

Rendered Page Sizes

	vercel/next.js canary	ykzts/next.js fix-types	Change
index.html gzip	627 B	627 B	✓
link.html gzip	633 B	633 B	✓
withRouter.html gzip	620 B	620 B	✓
Overall change	1.88 kB	1.88 kB	✓

Commit: 42dcfc5

[chirag04]

@ykzts this breaks when you have an img tag with StaticRequire. <img src="require('some_image.png')" ... />. cc @KAurand @ijjk @styfle

[styfle]

@chirag04 When you use require() you should get any as the type so it shouldn't be a problem.

If you are still getting an error, please create an issue with the steps to reproduce and we'll take a look, thanks!

[chirag04]

it's coming back as a string pointing to our cdn. we are using asset prefix and custom webpack rule in our next.config.js for images. I will create a proper repro example and get back.

[ijjk]

@chirag04 if you have custom image import handling already you can disable Next.js' new static image import handling with:

module.exports = {
  images: {
    disableStaticImages: true
  }
}

[fabb]

This breaks our build because we use our own webpack plugin for loading images and we expect image imports to be of type string:

declare module '*.png' {
    /** The static asset's url */
    const href: string
    export default href
}

error during tsc:

pages/_document.tsx:56:69 - error TS2322: Type 'StaticImageData' is not assignable to type 'string'.

56                     <link rel="icon" type="image/png" sizes="16x16" href={favicon16} />

related ticket: #26170

please fix, there is no way around this compile error except manually copying and modifying next/types/global.d.ts every time we update next.js.