Can't get a webworker to run with react-pdf/renderer in ViteJS

[Celludriel]

Hey,

I'm trying to create a blob from a react-pdf/renderer element in a webworker. I'm using ViteJs for this and I'm at a loss how I should proceed.

webworker

import testDocument from "./templates/test-document.tsx";
import {pdf} from '@react-pdf/renderer'

interface MessageBody {
    template: string
    pdfData: any[]
}

self.onmessage = async (event: MessageEvent<MessageBody>) => {
    try {
        if (event.data.template === "test-document") {
            console.log("test")
            const myPdf = pdf(testDocument())

            const blob = await myPdf.toBlob()

            self.postMessage({type: 'blob', blob})
        }
    } catch (error) {
        console.error('Error while rendering PDF: ', error)
        self.postMessage({type: 'error', error: true})
    }
}

test-document

import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';

// Create styles
const styles = StyleSheet.create({
    page: {
        flexDirection: 'row',
        backgroundColor: '#E4E4E4',
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1,
    },
});

// Create Document Component
const TestDocument = () => (
    <Document>
        <Page size="A4" style={styles.page}>
            <View style={styles.section}>
                <Text>Section #1</Text>
            </View>
            <View style={styles.section}>
                <Text>Section #2</Text>
            </View>
        </Page>
    </Document>
);

export default TestDocument

useEffect of my calling environment

   useEffect(() => {
        //var myWorker =
        workerRef.current = new Worker(new URL('./pdf-webworker.ts', import.meta.url), {type: 'module'})

        workerRef.current.onmessage = (
            event: MessageEvent<{ type: string; blob?: Blob; error?: boolean }>,
        ) => {
            if (event.data.type === 'error') {
                console.log({error: event.data.error})
            } else if (event.data.type === 'blob') {
                if(event.data.blob !== undefined) {
                    setBlob(event.data.blob)
                    console.log(event.data.blob)
                    console.log(URL.createObjectURL(event.data.blob))
                    setUrl(URL.createObjectURL(event.data.blob))
                    const saveBlob = function (blob: Blob, fileName: string) {
                        const a = document.createElement('a')
                        document.body.appendChild(a)
                        a.setAttribute('style', 'display: none')
                        const url = URL.createObjectURL(blob)
                        a.href = url
                        a.download = fileName
                        a.textContent = link
                        a.click()
                        window.URL.revokeObjectURL(url)
                    }
                    saveBlob(event.data.blob, name)
                } else {
                    console.log("Blob is undefined")
                }
            }
        }

        workerRef.current?.postMessage({
            template: template,
            pdfData: data
        })

        return () => {
            workerRef.current?.terminate()
        }
    }, [])

The error I'm getting

@react-refresh:672 Uncaught ReferenceError: window is not defined
at @react-refresh:672:1

I have tried serveral things to get past this, including trying to seriliaze testDocument() and sent it as a string to the webworker and deserialize it there but that was more of a hail mary that didn't pan out at all , cause I was loosing information during the procedure. Is there anything you can help me with to get this working ?

If I start commenting out my code in the webworker I eventually can deduce that this line:

const myPdf = pdf(testDocument())

is the culprit for starting to throw the error