fix: show the error message if images.loaderFile doesn't export a default function (#64036)

ojj1123 · styfle · web-flow · commit 04c87ae2d737 · 2024-04-10T18:11:38.000Z
fixes #63803 ## What I do? - If the loader file export the function as `named`, Next.js throws the error. - But this error is a bit confusing for the developers. - So I open this PR for showing the accurate error message. ## AS-IS / TO-BE ### AS-IS ``` TypeError: Cannot use 'in' operator to search for '__next_img_default' in undefined ``` <img width="1202" alt="스크린샷 2024-03-28 16 10 53" src="https://github.com/vercel/next.js/assets/33178048/e7c81cb5-7976-46ff-b86f-9c8fd9a7a681"> ### TO-BE ``` Error: The loader file must export a default function that returns a string. See more info here: https://nextjs.org/docs/messages/invalid-images-config ``` <img width="500" alt="스크린샷 2024-03-28 16 10 53" src="https://github.com/vercel/next.js/assets/33178048/c391e61b-6a44-4f85-8600-28ab6cb5b0eb"> --------- Co-authored-by: Steven <steven@ceriously.com>
diff --git a/packages/next/src/shared/lib/get-img-props.ts b/packages/next/src/shared/lib/get-img-props.ts
@@ -285,6 +285,11 @@ export function getImgProps(
     config = { ...c, allSizes, deviceSizes }
   }
 
+  if (typeof defaultLoader === 'undefined') {
+    throw new Error(
+      'images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config'
+    )
+  }
   let loader: ImageLoaderWithConfig = rest.loader || defaultLoader
 
   // Remove property so it's not spread on <img> element
diff --git a/test/e2e/app-dir/loader-file-named-export-custom-loader-error/app/get-img-props/page.tsx b/test/e2e/app-dir/loader-file-named-export-custom-loader-error/app/get-img-props/page.tsx
@@ -0,0 +1,17 @@
+import { getImageProps } from 'next/image'
+
+export default function Page() {
+  const { props: imageProps } = getImageProps({
+    id: 'logo',
+    alt: 'logo',
+    src: '/logo.png',
+    width: '400',
+    height: '400',
+  })
+
+  return (
+    <div>
+      <img {...imageProps} />
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/loader-file-named-export-custom-loader-error/app/layout.tsx b/test/e2e/app-dir/loader-file-named-export-custom-loader-error/app/layout.tsx
@@ -0,0 +1,7 @@
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/loader-file-named-export-custom-loader-error/app/page.tsx b/test/e2e/app-dir/loader-file-named-export-custom-loader-error/app/page.tsx
@@ -0,0 +1,9 @@
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <p>
+      <Image id="logo" alt="logo" src="/logo.png" width="400" height="400" />
+    </p>
+  )
+}
diff --git a/test/e2e/app-dir/loader-file-named-export-custom-loader-error/dummy-loader.ts b/test/e2e/app-dir/loader-file-named-export-custom-loader-error/dummy-loader.ts
@@ -0,0 +1,3 @@
+export function dummyLoader({ src, width, quality }) {
+  return `/_next/image/?url=${src}&w=${width}&q=${quality || 50}`
+}
diff --git a/test/e2e/app-dir/loader-file-named-export-custom-loader-error/loader-file-named-export-custom-loader-error.test.ts b/test/e2e/app-dir/loader-file-named-export-custom-loader-error/loader-file-named-export-custom-loader-error.test.ts
@@ -0,0 +1,53 @@
+import { nextTestSetup } from 'e2e-utils'
+import { getRedboxHeader, hasRedbox } from 'next-test-utils'
+
+const errorMessage =
+  'images.loaderFile detected but the file is missing default export.\nRead more: https://nextjs.org/docs/messages/invalid-images-config'
+
+async function testDev(browser, errorRegex) {
+  expect(await hasRedbox(browser)).toBe(true)
+  expect(await getRedboxHeader(browser)).toMatch(errorRegex)
+}
+
+describe('Error test if the loader file export a named function', () => {
+  describe('in Development', () => {
+    const { next, isNextDev } = nextTestSetup({
+      skipDeployment: true,
+      files: __dirname,
+    })
+
+    ;(isNextDev ? describe : describe.skip)('development only', () => {
+      it('should show the error when using `Image` component', async () => {
+        const browser = await next.browser('/')
+        await testDev(browser, errorMessage)
+      })
+
+      it('should show the error when using `getImageProps` method', async () => {
+        const browser = await next.browser('/get-img-props')
+        await testDev(browser, errorMessage)
+      })
+    })
+  })
+
+  describe('in Build and Start', () => {
+    const { next, isNextStart } = nextTestSetup({
+      skipDeployment: true,
+      skipStart: true,
+      files: __dirname,
+    })
+
+    // next build doesn't support turbopack yet
+    // see https://nextjs.org/docs/architecture/turbopack#unsupported-features
+    ;(isNextStart && !process.env.TURBOPACK ? describe : describe.skip)(
+      'build and start only',
+      () => {
+        it('should show the build error', async () => {
+          await expect(next.start()).rejects.toThrow(
+            'next build failed with code/signal 1'
+          )
+          expect(next.cliOutput).toContain(errorMessage)
+        })
+      }
+    )
+  })
+})
diff --git a/test/e2e/app-dir/loader-file-named-export-custom-loader-error/next.config.js b/test/e2e/app-dir/loader-file-named-export-custom-loader-error/next.config.js
@@ -0,0 +1,10 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {
+  images: {
+    loaderFile: '/dummy-loader.ts',
+  },
+}
+
+module.exports = nextConfig
diff --git a/test/e2e/app-dir/loader-file-named-export-custom-loader-error/public/logo.png b/test/e2e/app-dir/loader-file-named-export-custom-loader-error/public/logo.png

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export function dummyLoader({ src, width, quality }) {`
	`2`	+ return `/_next/image/?url=${src}&w=${width}&q=${quality \|\| 50}`
	`3`	`+}`