From 09b01900a8203fd937e7d9c36c6fef3fa62f90de Mon Sep 17 00:00:00 2001 From: Polina Vishneva Date: Wed, 17 Jun 2026 16:46:07 +0200 Subject: [PATCH] helpers/qrCode: Adapt to qr-code-styling 1.9.2 internals Fixes a regression introduced in cac7c9adf (which bumped qr-code-styling from 1.5.0 to 1.9.2): renames in the library internals caused QR sign-in to crash with "Cannot read properties of undefined". Await _canvasDrawingPromise instead, and require 1.9.2 because we're using a private property. --- package.json | 2 +- pnpm-lock.yaml | 2 +- src/helpers/qrCode/paintQrCode.ts | 21 +++++---------------- 3 files changed, 7 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 2f44c5e7b..6154708d0 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "libsodium-wrappers": "^0.8.4", "mediabunny": "^1.46.0", "prismjs": "^1.29.0", - "qr-code-styling": "^1.5.0", + "qr-code-styling": "1.9.2", "rollup-plugin-visualizer": "^7.0.1", "sass": "^1.98.0", "solid-js": "1.9.9", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 86290d37b..1b18971d7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,7 +105,7 @@ importers: specifier: ^1.29.0 version: 1.30.0 qr-code-styling: - specifier: ^1.5.0 + specifier: 1.9.2 version: 1.9.2 rollup-plugin-visualizer: specifier: ^7.0.1 diff --git a/src/helpers/qrCode/paintQrCode.ts b/src/helpers/qrCode/paintQrCode.ts index 819183f37..b897aa7d2 100644 --- a/src/helpers/qrCode/paintQrCode.ts +++ b/src/helpers/qrCode/paintQrCode.ts @@ -74,22 +74,11 @@ export async function paintQrCode(options: PaintQrOptions) { const canvas = host.lastChild as HTMLCanvasElement; if (options.canvasClass) canvas.classList.add(options.canvasClass); - // qr-code-styling races the image-load against a 1s upper bound — matches the - // legacy behaviour so we don't leave the host stuck behind a never-loading logo. - let drawingPromise: Promise; - if (qrCode._drawingPromise) { - drawingPromise = qrCode._drawingPromise; - } else { - drawingPromise = Promise.race([ - pause(1000), - new Promise((resolve) => { - qrCode._canvas._image.addEventListener('load', () => { - window.requestAnimationFrame(() => resolve()); - }, { once: true }); - }), - ]); - } - await drawingPromise; + // qr-code-styling exposes `_canvasDrawingPromise`, which resolves once the SVG + // (logo image included) has been rasterized onto the canvas. Cap it with a 1s + // upper bound so a never-loading logo can't leave the host stuck behind a + // preloader, matching the legacy behaviour. + await Promise.race([pause(1000), qrCode._canvasDrawingPromise ?? Promise.resolve()]); return { canvas, qrCode }; }