How to block named export?

[ojj1123]

Hi. I'm frontend engineer.

I was wondering if anyone could let me know how to prevent from using named export.

Situation & Problem

This question is related vercel/next.js#63803

Next.js supports the custom loader for optimized the images at other CDN provider.

// next.config.js
const nextConfig = {
  images: {
    loader: 'custom',
    loaderFile: '/custom-loader.js'
  }
}

// custom-loader.js
export default function customLoader({ src, width, quality }) {
  return nomalizedUrl({ src, width, quality }); // return CDN provider's url
}

But If I export the loader function as named, Next.js occurs the error

// custom-loader.js
// ⚠️ named export
// We should export a default function
export function customLoader({ src, width, quality }) {
  return normalizedUrl({ src, width, quality }); // return CDN provider's url
}

This is because Next.js internally replaces defaultLoader with custom loader (config.images.loaderFile) through webpack config(resolve.alias) during build time

// before build
import defaultLoader from 'next/dist/shared/lib/image-loader'

// after build
const _imageloader = /*#__PURE__*/ _interop_require_default._(require("/custom-loader.js"));

...
// build result:
_imageloader.default
...

Next.js uses webpack for build. So _imageloader.default is undefined if exporting loader as named.

But the error that Next.js occurs, is a bit confusing the developers.
So I want Next.js to show the accurate error message like this:

You should export loader as a default function.

Question

Could I know whether or not I export as named through webpack config?
I think it is possible to know it ONLY runtime.

[alexander-akait]

Please open an issue in Next.js