TypeError: Cannot use 'in' operator to search for '__next_img_default' in undefined about next.js HOT 9 CLOSED

Yeah, for sure! It's up to you if you'd like to contribute. Ping me if you want to discuss anything. 😄

from next.js.

https://github.com/vercel/next.js/tree/c9439b5654432df6488e178e5ade6f4ad2d1cf6a/test/integration/next-image-new/loader-config

But why this test pass?

Next.js version for test environment : Next.js 14.2.0-canary.48

Repro

https://github.com/ojj1123/next-custom-loader-issue-repro/tree/with-next-canary

So I try to upgrade nextjs version to Next.js 14.2.0-canary.48 and then reproduce it, but the error occurs.

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.1.0: Mon Oct  9 21:28:12 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T8103
  Available memory (MB): 8192
  Available CPU cores: 8
Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: 1.22.21
  pnpm: 8.15.5
Relevant Packages:
  next: 14.2.0-canary.48 // Latest available version is detected (14.2.0-canary.48).
  eslint-config-next: 14.1.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.3
Next.js Config:
  output: N/A

from next.js.

I found the reason.
Nextjs docs describes that the loader file must ONLY export a default function
so I did export as a default and then resolve this issue.

https://github.com/ojj1123/next-custom-loader-issue-repro/tree/export-default-loader

diff --git a/custom-loader.ts b/custom-loader.ts
index 461b1e3..d0af4f9 100644
--- a/custom-loader.ts
+++ b/custom-loader.ts
@@ -2,6 +2,10 @@

 import { ImageLoaderProps } from 'next/image';

-export function customLoader({ src, width, quality }: ImageLoaderProps) {
+export default function customLoader({
+  src,
+  width,
+  quality,
+}: ImageLoaderProps) {
   return `${src}?url=${encodeURIComponent(src)}&w=${width}&q=${quality || 75}`;
 }

Suggestion

BTW, How about supporting a named export?
some people(also me) use the eslint rule, import/no-default-export. Currenly whenever using the custom loader, I have to turn off this rule manually. For flexibility, I suggest supporting a named export for loader.

from next.js.

Hi, I'd say it is similar to how the next.config.js is imported, where it also requires a default export.
Since Next.js doesn't support multiple loaders, it is hard to target which one to import with named exports.
Glad you found out the cause by your own!

from next.js.

@devjiwonchoi

Since Next.js doesn't support multiple loaders, it is hard to target which one to import with named exports.

Yeah, I agree with you.
Nextjs replaces defaultLoader with custom loader (images.loaderFile) through webpack config.resolve.alias

But I think it would be good to warn users not to use named exports. Is it possible?

from next.js.

Yeah, an accurate error message is always preferred. Mind if I open a PR? Feel free to open one if you'd like to!

from next.js.

Oh, so Could I try to PR? I want to investigate and resolve this issue!

from next.js.

@devjiwonchoi

UPDATE
It's easier to check it during runtime. Because if checking it during buildtime, i should parse the code of a loader file so it's a bit complex. So I've decided to deal with it runtime.

I try to resolve this issue but I want to discuss about this issue.
My tries were to detect during runtime and buildtime

1. During runtime

After build (dev or build script), Webpack replaces defaultLoader with custom loader module. And then If exporting custom loader as named, _imageLoader.default(build result) is undefined. So I try to write this condition statements.

import defaultLoader from '.....'

if(typeof defaultLoader === 'undefined') {
  throw new Error('you should export the loader function as default');
}

It was working well. But I thought it's a bit hacky, because if doing that, I write that code wherever Next.js import defaultLoader. (Of course, just two now)
So I try to check it and throw the error during build.

2. During buildtime

I try to make the custom webpack loader for allowing our to use a default function.

// /webpack/loader/next-image-loader-file-loader.ts
const nextImageLoaderFileLoader: webpack.LoaderDefinitionFunction = function (
  this,
  source
) {
  const hasDefaultExport = /export default/.test(source)
  if (!hasDefaultExport) {
    throw new Error('you should export the loader function as default')
  }

  return source
}

// webpack.config.ts
...
module: {
  rules: [
      ...(config.images.loaderFile
      ? [
          {
            test: config.images.loaderFile,
            use: ['next-image-loader-file-loader'],
          },
        ]
      : []),
  ]
}
...

It was throwing the error well. But I thought it has some edge case:

function customLoader() {...}

export default customLoader; // correct
export customLoader; // throw error
export { customLoader as default } // throw error.. but this case is also default export so it should have not to throw the error!!

It's a bit difficult to check whether or not default function during either runtime or buildtime.
How do you think? Do you come up with another solution?

from next.js.

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

from next.js.