Differences with the QRCode base package and SSR

[caprica]

I have been using the base qrcode package for a while. This lets me generate a QR code, in a server-side Remix.run loader function, and then get a data URL.

This library has much nicer customisation options than that base qrcode package but I am unsure about usage here.

qrcode

const qrcode = await QRCode.toDataURL('https://www.youtube.com/watch?v=dQw4w9WgXcQ')

This works, server side, and I can use the returned data url as an img source.

qrcode-with-logos

I could not see from the documentation a direct replacement for the code above, so I tried this:

const gen = new QrCodeWithLogo({
    content: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
    width: 380,
    cornersOptions: {},
    dotsOptions: {},
    nodeQrCodeOptions: {}
})

const canvas = await gen.getCanvas()
const qrcode = canvas.toDataURL()

This does not work.

From the API, it seems to use a canvas you must pass a canvas element as prop, is this correct? Doesn't this make it problematic to use for server-side rendering?

Is there a way to just get this data url like you can with the qrcode package?

Does this library only work in the browser?

[zxpsuper]

@caprica
Yes, this library only work in the browser.
It use the canvas to draw different style, so it doesn't work in SSR.
In the future, I plan to use svg to draw QR codes to solve the problem of server rendering.