Web worker imports are failing on the deployed React 18 / CRA

Question

I use a web worker to encrypt large files in my create-react-app. In my encryption.worker.js file i import CryptoJS like so..

import * as CryptoJS from "crypto-js";

// eslint-disable-next-line no-restricted-globals
self.onmessage = async function (e) {
    const workerResult = await encryptFile(e.data.file, e.data.key);
    self.postMessage({result: workerResult, keyName: e.data.keyName}); // eslint-disable-line no-restricted-globals
}; ...

Then in my React component, I import and use this webworker like this:

const webworker = React.useMemo(() => new Worker(new URL('../WebWorkers/encryption.worker.js', import.meta.url)), []);

This works when run my app in development, however when the app is deployed, I get such errors:

Specifically:

Refused to execute script from 'https://DOMAIN+OF+THE+APP/publisher/static/js/static/js/541.fda53aa0.chunk.js' because its MIME type ('text/html') is not executable.

Source map from Chrome in case its helpful:

Is there something I'm doing wrong? Please advise..

--- UPDATE --- The problem is that the url formed by

new URL('../WebWorkers/encryption.worker.js', import.meta.url) 

is https://DOMAIN+OF+THE+APP/publisher/static/js/static/js/541.fda53aa0.chunk.js The problem is here .../static/js/static/js/... . However, I don't know how to fix this still.

Answer 1

Don't look at a source map when source fails to load. Don't forget it's just a map. This error makes the issue very clear:

because its MIME type ('text/html') is not executable

The URL is wrong. Since the import is done by webpack, I think it happens because your paths inside your project do not patch the path structure as seen from the server.

Since you're using webpack anyway, why don't you pack the crypto directly in the worker code? Is that to save resources and allow shared caching of that component?