Fix DOMPurify SSR issues by using dynamic imports

src/lib/components/CodeBlock.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import CopyToClipBoardBtn from "./CopyToClipBoardBtn.svelte";
-	import DOMPurify from "isomorphic-dompurify";
 	import HtmlPreviewModal from "./HtmlPreviewModal.svelte";
 	import PlayFilledAlt from "~icons/carbon/play-filled-alt";
 	import EosIconsLoading from "~icons/eos-icons/loading";
+	import { browser } from "$app/environment";
+	import { onMount } from "svelte";
 
 	interface Props {
 		code?: string;
@@ -13,6 +14,9 @@
 
 	let { code = "", rawCode = "", loading = false }: Props = $props();
 
+	let DOMPurify: typeof import("isomorphic-dompurify").default | null = null;
+	let sanitizedCode = $state(code);
+
 	let previewOpen = $state(false);
 
 	function hasStrictHtml5Doctype(input: string): boolean {
@@ -29,6 +33,21 @@
 	}
 
 	let showPreview = $derived(hasStrictHtml5Doctype(rawCode) || isSvgDocument(rawCode));
+
+	onMount(async () => {
+		if (browser) {
+			const { default: purify } = await import("isomorphic-dompurify");
+			DOMPurify = purify;
+		}
+	});
+
+	$effect(() => {
+		if (DOMPurify) {
+			sanitizedCode = DOMPurify.sanitize(code);
+		} else {
+			sanitizedCode = code;
+		}
+	});
 </script>
 
 <div class="group relative my-4 rounded-lg">
@@ -64,7 +83,7 @@
 		</div>
 	</div>
 	<pre class="scrollbar-custom overflow-auto px-5 font-mono transition-[height]"><code
-			><!-- eslint-disable svelte/no-at-html-tags -->{@html DOMPurify.sanitize(code)}</code
+			><!-- eslint-disable svelte/no-at-html-tags -->{@html sanitizedCode}</code
 		></pre>
 
 	{#if previewOpen}

src/lib/components/chat/MarkdownRenderer.svelte

@@ -5,10 +5,11 @@
 	import type { IncomingMessage, OutgoingMessage } from "$lib/workers/markdownWorker";
 	import { browser } from "$app/environment";
 
-	import DOMPurify from "isomorphic-dompurify";
 	import { onMount } from "svelte";
 	import { updateDebouncer } from "$lib/utils/updates";
 
+	let DOMPurify: typeof import("isomorphic-dompurify").default | null = null;
+
 	interface Props {
 		content: string;
 		sources?: { title?: string; link: string }[];
@@ -55,7 +56,7 @@
 					async (tokens) =>
 						await Promise.all(
 							tokens.map(async (token) => {
-								if (token.type === "text") {
+								if (token.type === "text" && DOMPurify) {
 									token.html = DOMPurify.sanitize(await token.html);
 								}
 								return token;
@@ -68,10 +69,14 @@
 		}
 	});
 
-	onMount(() => {
+	onMount(async () => {
 		// todo: fix worker, seems to be transmitting a lot of data
 		// worker = browser && window.Worker ? new MarkdownWorker() : null;
 
+		// Dynamically import DOMPurify only on the client
+		const { default: purify } = await import("isomorphic-dompurify");
+		DOMPurify = purify;
+
 		DOMPurify.addHook("afterSanitizeAttributes", (node) => {
 			if (node.tagName === "A") {
 				node.setAttribute("target", "_blank");

vite.config.ts

@@ -38,15 +38,6 @@ export default defineConfig({
 	optimizeDeps: {
 		include: ["uuid", "sharp", "@gradio/client", "clsx"],
 	},
-	ssr: {
-		noExternal: [
-			"isomorphic-dompurify",
-			"dompurify",
-			"@asamuzakjp/css-color",
-			"@asamuzakjp/dom-selector",
-		],
-		external: ["jsdom"],
-	},
 	test: {
 		workspace: [
 			{