Print error when `images.loader` is assigned but `images.path` is not #30080

styfle · 2021-10-19T22:17:41Z

Fixes #29744

ijjk · 2021-10-19T22:31:51Z

Failing test suites

Commit: 301e0fd

test/development/basic-basepath/hmr.test.ts

basic HMR > Error Recovery > should recover after undefined exported as default

Expand output

● basic HMR › Error Recovery › should recover after undefined exported as default

expect(received).toMatchInlineSnapshot(snapshot)

Snapshot name: `basic HMR Error Recovery should recover after undefined exported as default 1`

- Snapshot  - 3
+ Received  + 1

   1 of 1 unhandled error
- Server Error
+ Unhandled Runtime Error

  Error: The default export is not a React Component in page: "/hmr/about7"
-
- This error happened while generating the page. Any console logs will be displayed in the terminal window.

  603 |         await next.patchFile(aboutPage, aboutContent)
  604 |
> 605 |         if (browser) {
      |                       ^
  606 |           await check(
  607 |             () => getBrowserBodyText(browser),
  608 |             /This is the about page/

  at Object.<anonymous> (development/basic-basepath/hmr.test.ts:605:23)

packages/next/server/config.ts

Co-authored-by: JJ Kasper <jj@jjsweb.site>

ijjk · 2021-10-19T23:54:56Z

Stats from current PR

Default Build (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
buildDuration	15.3s	15.2s	-125ms
buildDurationCached	3.4s	3.5s	⚠️ +39ms
nodeModulesSize	195 MB	195 MB	⚠️ +586 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.704	3.55	-0.15
/ avg req/sec	674.88	704.21	+29.33
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.951	2.004	⚠️ +0.05
/error-in-render avg req/sec	1281.18	1247.73	⚠️ -33.45

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
558.HASH.js gzip	3.02 kB	3.02 kB	✓
779.HASH.js gzip	179 B	179 B	✓
framework-HASH.js gzip	42.2 kB	42.2 kB	✓
main-HASH.js gzip	25 kB	25 kB	✓
webpack-HASH.js gzip	1.49 kB	1.49 kB	✓
Overall change	71.9 kB	71.9 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
_app-HASH.js gzip	977 B	977 B	✓
_error-HASH.js gzip	3.11 kB	3.11 kB	✓
amp-HASH.js gzip	553 B	553 B	✓
css-HASH.js gzip	328 B	328 B	✓
dynamic-HASH.js gzip	2.73 kB	2.73 kB	✓
head-HASH.js gzip	2.37 kB	2.37 kB	✓
hooks-HASH.js gzip	918 B	918 B	✓
image-HASH.js gzip	5.89 kB	5.89 kB	✓
index-HASH.js gzip	260 B	260 B	✓
link-HASH.js gzip	1.66 kB	1.66 kB	✓
routerDirect..HASH.js gzip	320 B	320 B	✓
script-HASH.js gzip	386 B	386 B	✓
withRouter-HASH.js gzip	319 B	319 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	19.9 kB	19.9 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
_buildManifest.js gzip	492 B	492 B	✓
Overall change	492 B	492 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
index.html gzip	538 B	538 B	✓
link.html gzip	550 B	550 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Default Build with SWC (Decrease detected ✓)

General Overall increase ⚠️

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
buildDuration	7.3s	7s	-315ms
buildDurationCached	3.4s	3.5s	⚠️ +66ms
nodeModulesSize	195 MB	195 MB	⚠️ +586 B

Page Load Tests Overall decrease ⚠️

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
/ failed reqs	0	0	✓
/ total time (seconds)	3.518	3.515	0
/ avg req/sec	710.64	711.14	+0.5
/error-in-render failed reqs	0	0	✓
/error-in-render total time (seconds)	1.835	1.921	⚠️ +0.09
/error-in-render avg req/sec	1362.06	1301.29	⚠️ -60.77

Client Bundles (main, webpack, commons)

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
675-HASH.js gzip	13.9 kB	13.9 kB	✓
770.HASH.js gzip	178 B	178 B	✓
framework-HASH.js gzip	50.8 kB	50.8 kB	✓
main-HASH.js gzip	35.2 kB	35.2 kB	✓
webpack-HASH.js gzip	1.64 kB	1.64 kB	✓
Overall change	102 kB	102 kB	✓

Legacy Client Bundles (polyfills)

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
polyfills-a4..dd70.js gzip	31 kB	31 kB	✓
Overall change	31 kB	31 kB	✓

Client Pages

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
_app-HASH.js gzip	1.33 kB	1.33 kB	✓
_error-HASH.js gzip	180 B	180 B	✓
amp-HASH.js gzip	315 B	315 B	✓
css-HASH.js gzip	331 B	331 B	✓
dynamic-HASH.js gzip	2.79 kB	2.79 kB	✓
head-HASH.js gzip	355 B	355 B	✓
hooks-HASH.js gzip	637 B	637 B	✓
image-HASH.js gzip	555 B	555 B	✓
index-HASH.js gzip	261 B	261 B	✓
link-HASH.js gzip	2.22 kB	2.22 kB	✓
routerDirect..HASH.js gzip	326 B	326 B	✓
script-HASH.js gzip	393 B	393 B	✓
withRouter-HASH.js gzip	322 B	322 B	✓
bb14e60e810b..30f.css gzip	125 B	125 B	✓
Overall change	10.1 kB	10.1 kB	✓

Client Build Manifests

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
_buildManifest.js gzip	511 B	511 B	✓
Overall change	511 B	511 B	✓

Rendered Page Sizes

	vercel/next.js canary	vercel/next.js next-image-throw-path-missing	Change
index.html gzip	538 B	538 B	✓
link.html gzip	551 B	551 B	✓
withRouter.html gzip	532 B	532 B	✓
Overall change	1.62 kB	1.62 kB	✓

Commit: 93a1e21

dbismut · 2021-10-30T10:46:15Z

Hello, I'm not sure why this has been merged. I'm using the CMS prismic.io that uses imgix which returns absolute imgix image url. I used to have path="" in next.config.js and it used to work fine, but now with next 12 I get an error. I believe this should be reverted and left to userland.

EDIT: related discussions.

styfle · 2021-10-31T22:25:19Z

@dbismut If you're using absolute URLs then you shouldn't need to use loader=imgix. If you were using an empty path then it wasn't using the imgix loader at all, that was a bug.

Some possible solutions:

You can use default loader with absolute URLs, no configuration needed.
You can use loader=custom and implement the loader prop to write your own loader
You can use unoptimized prop if you want to use the absolute URL as-is

dbismut · 2021-10-31T22:59:27Z

@styfle thanks for the answer. However it looks like this solution (ie empty path) worked in at least two related questions (mentioned above).

Here's the srcset generated by the imgix loader with an empty path in Next v11.

# src
https://images.prismic.io/flyaway/b32112c6-e150-40ba-bee8-fea1a841f2b1_DSC_1346_by_%40alyasmusic.jpg?auto=compress%2Cformat&fit=max&w=3840

# srcset
https://images.prismic.io/flyaway/b32112c6-e150-40ba-bee8-fea1a841f2b1_DSC_1346_by_%40alyasmusic.jpg?auto=compress%2Cformat&fit=max&w=256 256w
https://images.prismic.io/flyaway/b32112c6-e150-40ba-bee8-fea1a841f2b1_DSC_1346_by_%40alyasmusic.jpg?auto=compress%2Cformat&fit=max&w=384 384w
https://images.prismic.io/flyaway/b32112c6-e150-40ba-bee8-fea1a841f2b1_DSC_1346_by_%40alyasmusic.jpg?auto=compress%2Cformat&fit=max&w=640 640w
...

To me it looks perfectly legit, and well, it works.

Without the loader, here's just one image url from srcset to avoid being too verbose:

http://localhost:3000/_next/image?url=https%3A%2F%2Fimages.prismic.io%2Fflyaway%2Fb32112c6-e150-40ba-bee8-fea1a841f2b1_DSC_1346_by_%2540alyasmusic.jpg%3Fauto%3Dcompress%2Cformat&w=640&q=75 640w

I'm not familiar with what this means although I guess that this is using Next Js own image transform engine, which I don't need.

Therefore I'd like to reiterate my request to leave this to userland, as this is fixing something that isn't broken as far as I'm concerned.

styfle · 2021-11-01T13:12:33Z

to leave this to userland

That's actually the end goal here 👍

Eventually, we plan to move all loaders to userland via the loader prop and deprecate the build-in loader config in next.config.js.

Did you try any of the 3 solutions suggested above?

dbismut · 2021-11-01T13:44:31Z

Yes of course I could use a custom loader and pass it to every Image component. And that custom loader would be precisely the same imgix loader that is sitting inside Next Js source code, that I would need to copy paste.

But what I really don't understand is why path needs to be mandatory in the first place, especially since it used to work before!

Why can't you revert that PR?

EDIT: are your saying that the built-in imgix loader is going to be removed eventually then? Sorry if I missed something here.

styfle · 2021-11-01T14:41:46Z

are your saying that the built-in imgix loader is going to be removed eventually then

Yes because Next.js is currently shipping additionally client-side JS for several loaders, even if you aren't using them.

I think we can relax this error for now since these loaders aren't deprecated yet #30741

dbismut · 2021-11-01T15:14:50Z

Thanks a lot, much appreciated.

The built-in `imgixLoader()` unexpectedly works with `image.path = ''` and `src` as an absolute URL. So we need to relax this restriction for now until we can officially deprecate built-in loaders (eventually they can all be implemented in userland via loader prop). - Follow up to #30080

The built-in `imgixLoader()` unexpectedly works with `image.path = ''` and `src` as an absolute URL. So we need to relax this restriction for now until we can officially deprecate built-in loaders (eventually they can all be implemented in userland via loader prop). - Follow up to vercel#30080

Print error when images.loader is assigned but images.path is not

301e0fd

styfle requested review from huozhi, ijjk, leerob, lfades, molebox, padmaia, shuding and timneutkens as code owners October 19, 2021 22:17

ijjk added created-by: Next.js team PRs by the Next.js team type: documentation type: next labels Oct 19, 2021

styfle changed the title ~~Print error when images.loader is assigned but images.path is not~~ Print error when images.loader is assigned but images.path is not Oct 19, 2021

This comment has been minimized.

Sign in to view

ijjk reviewed Oct 19, 2021

View reviewed changes

packages/next/server/config.ts Outdated Show resolved Hide resolved

styfle and others added 2 commits October 19, 2021 19:22

Check userConfig per jj

7af893f

Co-authored-by: JJ Kasper <jj@jjsweb.site>

Check for url prefix

1344ec2

styfle requested a review from ijjk October 19, 2021 23:36

ijjk approved these changes Oct 19, 2021

View reviewed changes

Merge branch 'canary' into next-image-throw-path-missing

93a1e21

kodiakhq bot merged commit f2cf092 into canary Oct 20, 2021

kodiakhq bot deleted the next-image-throw-path-missing branch October 20, 2021 00:17

styfle added the hacktoberfest-accepted label Oct 25, 2021

styfle mentioned this pull request Nov 1, 2021

Relax restriction of images.path in next.config.js #30741

Merged

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Print error when `images.loader` is assigned but `images.path` is not #30080

Print error when `images.loader` is assigned but `images.path` is not #30080

styfle commented Oct 19, 2021

ijjk commented Oct 19, 2021

This comment has been minimized.

ijjk commented Oct 19, 2021

dbismut commented Oct 30, 2021

styfle commented Oct 31, 2021

dbismut commented Oct 31, 2021 •

edited

styfle commented Nov 1, 2021 •

edited

dbismut commented Nov 1, 2021 •

edited

styfle commented Nov 1, 2021

dbismut commented Nov 1, 2021

Print error when images.loader is assigned but images.path is not #30080

Print error when images.loader is assigned but images.path is not #30080

Conversation

styfle commented Oct 19, 2021

ijjk commented Oct 19, 2021

Failing test suites

This comment has been minimized.

ijjk commented Oct 19, 2021

Stats from current PR

dbismut commented Oct 30, 2021

styfle commented Oct 31, 2021

dbismut commented Oct 31, 2021 • edited

styfle commented Nov 1, 2021 • edited

dbismut commented Nov 1, 2021 • edited

styfle commented Nov 1, 2021

dbismut commented Nov 1, 2021

Print error when `images.loader` is assigned but `images.path` is not #30080

Print error when `images.loader` is assigned but `images.path` is not #30080

dbismut commented Oct 31, 2021 •

edited

styfle commented Nov 1, 2021 •

edited

dbismut commented Nov 1, 2021 •

edited