I'm writing an ASP.Net MVC project, and fighting with the frontend a bit. Either my worker isn't sending the message, or the rest of my code isn't receiving the message.

GhostHandler.js

             /*
             * NEEDED DATA
             * ---------------
             * TYPE ID TO IMG URL
             */ 
            {
                let typeIdToImgUrlWorker = new Worker("/js/Editor/Workers/GetImgURLFromTypeID.js");
                // Gets the img url for the type of element
                typeIdToImgUrlWorker.onmessage = (event) => {
                    let imgUrl = event.data[componentTypeID];
                    console.log(imgUrl);
                    let ghostCounter = 0;
                    
                    document.addEventListener('mousemove', (event) => {
                        console.log("pls");
                        drawComponentGhost(event.clientX, event.clientY, imgUrl, ghostCounter);
                        removeComponentGhost(ghostCounter);
                        ghostCounter += 1;
                        console.log("drawn and removed a component");
                    })
                }
            }

Assume every variable is declared and defined properly

GetImgUrlFromTypeID.js

let xhr = new XMLHttpRequest();

xhr.open('GET', 'https://localhost:44338/Editor/GetImgUrlFromTypeID/', true);

xhr.onload = () => {
    if (this.status === 200) {
        //let json = JSON.parse(this.responseJson);
        postMessage(this.responseJson);
    }
}

xhr.send();

I know the worker is being spawned, from the network tab. But the rest of the code in GhostHandler.js isn't being ran. I presume because the worker isn't sending the message properly, therefore the arrow function onmessage isn't being ran.