addressing 'filereader not found' error on build

src/app/page.tsx

@@ -55,6 +55,12 @@ const shapeUtils = [LiveImageShapeUtil]
 const tools = [LiveImageTool]
 
 export default function Home() {
+	// Server-side rendering check
+	if (typeof window === 'undefined') {
+		// Return a minimal placeholder for SSR
+		return <div className="tldraw-wrapper">Loading editor...</div>
+	}
+
 	const onEditorMount = (editor: Editor) => {
 		// We need the editor to think that the live image shape is a frame
 		// @ts-expect-error: patch

src/hooks/useLiveImage.tsx

@@ -121,6 +121,9 @@ export function useLiveImage(
 	if (!fetchImage) throw new Error('Missing LiveImageProvider')
 
 	useEffect(() => {
+		// Skip on server-side
+		if (typeof window === 'undefined') return;
+		
 		let prevHash = ''
 		let prevPrompt = ''
 

src/utils/screenshot.ts

@@ -1,11 +1,21 @@
-import { type } from 'os'
+'use client'
 
-const fileReader = new FileReader()
+import { type } from 'os'
+import { blobToDataUri } from './blob'
 
 let _canvas: HTMLCanvasElement | null = null
 let _ctx: CanvasRenderingContext2D | null = null
 
+function getFileReader() {
+	if (typeof window === 'undefined') return null
+	return new FileReader()
+}
+
 async function fastGetSvgAsString(svg: SVGElement) {
+	if (typeof window === 'undefined') {
+		return ''
+	}
+
 	const clone = svg.cloneNode(true) as SVGGraphicsElement
 
 	svg.setAttribute('width', +svg.getAttribute('width')! + '')
@@ -17,13 +27,13 @@ async function fastGetSvgAsString(svg: SVGElement) {
 		const src = img.getAttribute('xlink:href')
 		if (src) {
 			if (!src.startsWith('data:')) {
-				const blob = await (await fetch(src)).blob()
+				try {
-				const base64 = await new Promise<string>((resolve, reject) => {
+					const blob = await (await fetch(src)).blob()
-					fileReader.onload = () => resolve(fileReader.result as string)
+					const base64 = await blobToDataUri(blob)
-					fileReader.onerror = () => reject(fileReader.error)
+					img.setAttribute('xlink:href', base64)
-					fileReader.readAsDataURL(blob)
+				} catch (error) {
-				})
+					console.error('Error processing image:', error)
-				img.setAttribute('xlink:href', base64)
+				}
 			}
 		}
 	}
@@ -45,6 +55,10 @@ export async function fastGetSvgAsImage(
 		height: number
 	}
 ) {
+	if (typeof window === 'undefined') {
+		return null
+	}
+
 	const svgUrl = URL.createObjectURL(new Blob([svgString], { type: 'image/svg+xml' }))
 
 	if (!_canvas) {
@@ -84,18 +98,13 @@ export async function fastGetSvgAsImage(
 
 	if (!canvas) return null
 
-	const blobPromise = new Promise<Blob | null>((resolve) =>
+	return new Promise<Blob | null>((resolve) =>
 		canvas.toBlob(
 			(blob) => {
-				if (!blob) {
-					resolve(null)
-				}
 				resolve(blob)
 			},
-			'image/' + type,
+			`image/${options.type}`,
 			options.quality
 		)
 	)
-
-	return blobPromise
 }