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

packages/next/src/build/webpack/plugins/define-env-plugin.ts

@@ -110,6 +110,7 @@ function getImageConfig(
       imageSizes: config.images.imageSizes,
       path: config.images.path,
       loader: config.images.loader,
+      loaderFile: config.images.loaderFile,
       dangerouslyAllowSVG: config.images.dangerouslyAllowSVG,
       unoptimized: config?.images?.unoptimized,
       ...(dev

packages/next/src/client/image-component.tsx

@@ -396,6 +396,11 @@ export const Image = forwardRef<HTMLImageElement | null, ImageProps>(
     const [blurComplete, setBlurComplete] = useState(false)
     const [showAltText, setShowAltText] = useState(false)
 
+    if (config.loaderFile && typeof defaultLoader === 'undefined') {
+      throw new Error(
+        'The loader file must export a default function that returns a string.\nSee more info here: https://nextjs.org/docs/messages/invalid-images-config'
+      )
+    }
     const { props: imgAttributes, meta: imgMeta } = getImgProps(props, {
       defaultLoader,
       imgConf: config,

packages/next/src/shared/lib/image-external.tsx

@@ -15,10 +15,16 @@ import defaultLoader from 'next/dist/shared/lib/image-loader'
  * Read more: [Next.js docs: `getImageProps`](https://nextjs.org/docs/app/api-reference/components/image#getimageprops)
  */
 export function getImageProps(imgProps: ImageProps) {
+  // This is replaced by webpack define plugin
+  const config = process.env.__NEXT_IMAGE_OPTS as any as ImageConfigComplete
+  if (config.loaderFile && typeof defaultLoader === 'undefined') {
+    throw new Error(
+      'The loader file must export a default function that returns a string.\nSee more info here: https://nextjs.org/docs/messages/invalid-images-config'
+    )
+  }
   const { props } = getImgProps(imgProps, {
     defaultLoader,
-    // This is replaced by webpack define plugin
-    imgConf: process.env.__NEXT_IMAGE_OPTS as any as ImageConfigComplete,
+    imgConf: config,
   })
   // Normally we don't care about undefined props because we pass to JSX,
   // but this exported function could be used by the end user for anything