From c98d31e19f3fb927732bcd458b85bada7266adae Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Mon, 23 Mar 2026 22:30:54 +0100
Subject: [PATCH] fix(frontend): load pdfjs-dist dynamically to avoid SSR crash
 (#39)

Static import of pdfjs-dist fails during SSR because DOMMatrix and
other browser globals are unavailable in Node.js. Move the import into
onMount so it only ever executes in the browser. A plain pdfjsLib
variable holds the module; a $state boolean pdfjsReady triggers the
load-document effect once the library is available.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/PdfViewer.svelte  | 32 +++++++++++++------
 .../src/routes/documents/[id]/+page.svelte    |  1 -
 2 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/frontend/src/lib/components/PdfViewer.svelte b/frontend/src/lib/components/PdfViewer.svelte
index 224b2cc6..d22ca2b4 100644
--- a/frontend/src/lib/components/PdfViewer.svelte
+++ b/frontend/src/lib/components/PdfViewer.svelte
@@ -1,9 +1,6 @@
 <script lang="ts">
-import { getDocument, GlobalWorkerOptions, TextLayer } from 'pdfjs-dist';
+import { onMount } from 'svelte';
 import type { PDFDocumentProxy, PDFPageProxy, RenderTask } from 'pdfjs-dist';
-import workerUrl from 'pdfjs-dist/build/pdf.worker.min.mjs?url';
-
-GlobalWorkerOptions.workerSrc = workerUrl;
 
 let { url }: { url: string } = $props();
 
@@ -22,7 +19,24 @@ let textLayerEl = $state<HTMLDivElement | null>(null);
 let renderTask: RenderTask | null = null;
 let textLayerInstance: { cancel: () => void } | null = null;
 
+// Holds the dynamically-loaded pdfjs module (browser-only)
+// Not $state — we use pdfjsReady as the reactive trigger instead
+let pdfjsLib: typeof import('pdfjs-dist') | null = null;
+let pdfjsReady = $state(false);
+
+onMount(async () => {
+	// Dynamic import keeps pdfjs out of the SSR bundle entirely
+	const [lib, { default: workerUrl }] = await Promise.all([
+		import('pdfjs-dist'),
+		import('pdfjs-dist/build/pdf.worker.min.mjs?url')
+	]);
+	lib.GlobalWorkerOptions.workerSrc = workerUrl;
+	pdfjsLib = lib;
+	pdfjsReady = true;
+});
+
 async function loadDocument(src: string) {
+	if (!pdfjsLib) return;
 	loading = true;
 	error = null;
 	pdfDoc = null;
@@ -30,7 +44,7 @@ async function loadDocument(src: string) {
 	totalPages = 0;
 
 	try {
-		const loadingTask = getDocument(src);
+		const loadingTask = pdfjsLib.getDocument(src);
 		const doc = await loadingTask.promise;
 		pdfDoc = doc;
 		totalPages = doc.numPages;
@@ -42,7 +56,7 @@ async function loadDocument(src: string) {
 }
 
 async function renderPage(doc: PDFDocumentProxy, pageNum: number) {
-	if (!canvasEl || !textLayerEl) return;
+	if (!pdfjsLib || !canvasEl || !textLayerEl) return;
 
 	// Cancel any in-flight render
 	if (renderTask) {
@@ -79,8 +93,6 @@ async function renderPage(doc: PDFDocumentProxy, pageNum: number) {
 	try {
 		await task.promise;
 	} catch (e: unknown) {
-		// Cancelled renders throw a specific error — ignore them
-		if (e instanceof Error && e.message === 'Rendering cancelled') return;
 		if (
 			typeof e === 'object' &&
 			e !== null &&
@@ -98,7 +110,7 @@ async function renderPage(doc: PDFDocumentProxy, pageNum: number) {
 	textDiv.style.width = `${viewport.width / dpr}px`;
 	textDiv.style.height = `${viewport.height / dpr}px`;
 
-	const tl = new TextLayer({
+	const tl = new pdfjsLib.TextLayer({
 		textContentSource: page.streamTextContent(),
 		container: textDiv,
 		viewport
@@ -123,7 +135,7 @@ async function prerender(doc: PDFDocumentProxy, pageNum: number) {
 }
 
 $effect(() => {
-	if (url) {
+	if (pdfjsReady && url) {
 		loadDocument(url);
 	}
 });
diff --git a/frontend/src/routes/documents/[id]/+page.svelte b/frontend/src/routes/documents/[id]/+page.svelte
index 006e0cbb..6314308c 100644
--- a/frontend/src/routes/documents/[id]/+page.svelte
+++ b/frontend/src/routes/documents/[id]/+page.svelte
@@ -3,7 +3,6 @@ import { m } from '$lib/paraglide/messages.js';
 import { formatDate } from '$lib/utils/date';
 import { diffWords } from 'diff';
 import ExpandableText from '$lib/components/ExpandableText.svelte';
-import PdfViewer from '$lib/components/PdfViewer.svelte';
 
 let { data } = $props();