Next.js cant find remotePatterns when I use withExportImages wrapper for nextConfig

[h0lme3]

Hi

I want to apply to do image optimization for local/internal images but dont wanna apply image optimiztion for remote/external images.

I made custom image component for it so I will use CustomNextImage from next-export-optimize-images/image for local/internal images and I will use NextImage from next/image for remote/external images.

// Image.tsx
import NextImage from "next/image";
import CustomNextImage from "next-export-optimize-images/image";

export default function Image({ optimize = true, ...props }) {
   return optimize ? <CustomNextImage {...props} /> : <NextImage {...props} />
}

// test.tsx
import { Image } from "./Image"

export default function Test() {
   return (
       <>
              <Image optimize={false} src={`external/remote image src`} />
              <Image optimize={true} src={`internal/local image src`} />
       </>
   )
}

And edited nextjs.config file like the following:

import withExportImages from "next-export-optimize-images";

const nextConfig = withExportImages({
  ...
   images: {
      remotePatterns: [
         { protocol: "https", hostname: "remote domain" },
         { protocol: "https", hostname: "raw.githubusercontent.com" },
       ],
   }
   ...
})

But I unfortunately got this issue even thou I already configured remote domain for remote images

Maybe I dont know how to configure properly with next-export-optimize-images/image - Can you help me with it?

When I cancel to add withExportImages wrapper for nextConfig it is just fine but I need to wrap it because I want to optimize local images by using next-export-optimize-images

Please help me - Thank you!!!