img tag is not inside exported html

[NicolasRoehm]

Hi Niels,

Thank you for the great library, it's awesome! I wonder why my statically exported HTML doesn't contain any img tag.
It seems that javascript is required to display the image on the page, is this normal?

By default, NextJs is able to export the generated HTML :

Best regards,

[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 😅

[Niels-IO]

Hi @NicolasRoehm,

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