I have been trying to use web worker on my React application, and pretty much succeeded in doing so locally. But, after deploying it to docker-container and EC2 instance afterward, I'm getting the next issue which is closely related to Web Worker and occurs in generated Blob:
Uncaught ReferenceError: Bd is not defined at e2ecb260-c7b7-486e-9c70-d47bd6b30c4d:1:30
.
CreateWebWorker.js
export default class CreateWebWorker {
constructor(worker) {
let code = worker.toString();
code = code.substring(code.indexOf('{') + 1, code.lastIndexOf('}'));
const blob = new Blob([code], { type: 'application/javascript' });
return new Worker(URL.createObjectURL(blob));
}
}
FetchingImagesWorker.js
export default function FetchingImagesWorker() {
self.onmessage = async (event) => {
...
}
}
And the way I'm using it in one of React components:
const worker = new CreateWebWorker(FetchingImagesWorker);
Would be much appreciated on any information.
So, if anybody is wondering how they could've fixed the issue with Web Worker not being allocated properly on the production instance:
Since the project is running Webpack Version 5+, the way I registered a Web Worker wasn't correct. The CreateWebWorker.js
isn't needed as well.
You only have to modify the usage:
const webWorker = new Worker(new URL('../../workers/fetchingImages.worker.js', import.meta.url));