QR code won't render when using react-email with NestJS

Question

I'm trying to render an SVG QR code component in an email, it works in preview mode, so I can see it when I run the server of react-email, but when the email is sent and received the QR code won't show.

I'm using the library react-email to render the QR code as SVG

just calling this in the email component

         <QRCodeSVG
            size={300}
            value={myValue}
            className="rounded-md border-8 border-white w-[200px]"
            id="qrcode-svg"
          />

For context, I'm using NestJS to send emails using react-email so I'm using the render function to render the html and send it.

I'm also using the QRCodeSVG component from qrcode.react library.

Any idea why is this happening?

It works in preview mode, the QR code SVG renders fine but when receiving the email it won't show.

I'm suspicious of the behaviour of NestJS when it builds, or the behaviour of the render function.

The issue is happening in staging environment when I'm using the NestJS build.

Answer 1

The issue was just with Gmail not showing QR code.

I have tried seeing the email on Mozilla Thunderbird and it shows fine with no issues.