-1

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: enter image description here

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: enter image description here

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.

hpertaia
  • 106
  • 6

1 Answers1

0

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?

Tomáš Zato
  • 50,171
  • 52
  • 268
  • 778
  • Hi Tomas, thank you so much for the answer. No, there is no reason for me not to do it. However, I don't quite understand what you mean by 'pack the crypto directly in the worker code'.. Copy-paste source code of Crypto-js right to my worker? – hpertaia Sep 08 '22 at 15:36
  • But I guess my main question here is how do I find the right URL to paste to `new Worker(new URL('../WebWorkers/encryption.worker.js', import.meta.url))` instead of my relative path? Can I use Chrome dev tools? Or is there any other way? – hpertaia Sep 08 '22 at 15:46
  • Never mind. The syntax is correct and this is a problem with create-react-app. There is an open issue in cra repo regarding this. I'll accept this answer since you're right that the URL was wrong. – hpertaia Sep 08 '22 at 20:18