JS Cannot load web worker module unless the worker.js is under public/

Question

I would like put my worker.js under the same src/ directory as main.js, which loads the worker. (src/ is parallel to public/) However I got the following error if worker.js is under src/.

//in main.js let worker = new Worker('./worker.js', {type:"module"});

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

However if I put worker.js under public/ (index.html is under public/), or any directory under public/, everything works fine. Seems like it can only load from public/ aka. http://<my domain>/worker.js , if it is under any directory parallel to public/, then it cannot find it, aka. http://<my domain>/../src/worker.js doesn't work. Am I right on this?

Plus, in worker.js, I cannot import any thing in node_modules/ like what I do for other js files in src/.

I assume these two questions are related. Could you please let me know the solutions?

(I am using worker-plugin, npm, react.)

thank you.

I think you are mixing up the client and server side. Are you trying to reference certain node modules from client side? That doesn't sound right. You need to create a bundle for that to work. Google webpack. — muratgu
– muratgu, Commented Apr 20, 2020 at 22:15
You are right. I need to bundle everything. At least worker-plugin document says so. I am pretty new to webpack. Could you please explain a little bit more the right way of doing it? — Bin Fang
– Bin Fang, Commented Apr 20, 2020 at 22:24
Follow the steps explained here: webpack.js.org/guides/getting-started — muratgu
– muratgu, Commented Apr 20, 2020 at 23:08

Samuel · Accepted Answer · 2022-03-24 12:17:12Z

0

Based on your entry file, webpack tries to create a dependency tree. So it looks trough all the files that are being imported through a import/require statement, and then it tries to bundle your files into a single bundle. However, it does not happen with the worker constructor. Thus, webpack does not see your worker file as a dependency of your single bundle, and, therefore, it does not bundle it. So, to make this work, you can use a loader in you webpack configuration such as worker-loader (https://v4.webpack.js.org/loaders/worker-loader/), adding a rule in your webpack config file.

answered Mar 24, 2022 at 12:17

Samuel

1133 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JS Cannot load web worker module unless the worker.js is under public/

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related