img tag is not inside exported html about next-image-export-optimizer

[Niels-IO]

Hi @NicolasRoehm,

The noscript tags should work properly now. Check out version 0.15.0 🙂

[Niels-IO]

Hi @NicolasRoehm,

Thanks for the bug report. I looked, and I know at least why this noscript img tag is not being generated.

This is how the export is taking place. I need to use the dynamic function with SSR off as there is a hydration error otherwise. When I would export the ExportedImage component directly, the noscript img tag would be generated but the hydration error occurs.

const DynamicExportedImage = dynamic(() => Promise.resolve(ExportedImage), {
  ssr: false,
});

export default function (props: ExportedImageProps) {
  const isStaticImage = typeof props.src === "object";
  const width = (isStaticImage && props.width) || (props.src as any).width;
  const height = (isStaticImage && props.height) || (props.src as any).height;

  return isStaticImage ? (
    <div style={isStaticImage ? { aspectRatio: width / height } : {}}>
      <DynamicExportedImage {...props} />
    </div>
  ) : (
    <DynamicExportedImage {...props} />
  );
}

I have to find a workaround for the hydration error. I think it happs because the environment variables are not accessible on the server side inside an imported module like the ExportedImage component.

[NicolasRoehm]

Hi @Niels-IO,
I've been playing with React & Next for only 2 weeks, so I'm not able to help much here.
Do you think something like this might help bypass the ssr:false vercel/next.js#35773 (comment) ?

[Niels-IO]

Hi @NicolasRoehm,

I played around, but I cannot get around one issue: The ExportedImage component is a compiled commonjs file, and for the first server render, the process.env is undefined. One solution would be that I can export the ExportedImage component as an ES module and let Next.js compile the source. Unfortunately, I have had no luck in getting this to work for now.

[NicolasRoehm]

Using something like https://github.com/martpie/next-transpile-modules ?
About environment variables, I see a lot of NextJs plugins uses their own module.exports = {} in a dedicated config file instead of the next.config.js. I don't know if it can help 😅