WebPack 5 with Web worker using React/Typescript

Question

How do i make web worker work with create-react-app, Typescript and Webpack 5 work? The documentation is very limited and I can't find any good explanation. I do not want to use webpack-loader etc.

I am instantiating the worker using webpack 5 suggested API. I have got it working with ComLink but it uses RPC which i do not want (further ComLink cannot copy either socket or rxjs observables data structures).

I want to create web worker so i could stream data over websockets, any pointers are much appreciated.

 const worker = new Worker(new URL('./test.worker.ts', import.meta.url));
 worker.postMessage("test");

But it throws below exception.

Module parse failed: Unexpected token (16:64) File was processed with these loaders: * ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js * ./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | |
React.useEffect(() => {
const worker = new Worker(new URL('./test.worker.ts', import.meta.url)); |     worker.postMessage("test"); |   }, []);

Arshad · Accepted Answer · 2021-12-13 13:19:51Z

1

Current create-react-app is still using Webpack 4. That's why your code will not work in the current React setup.

You can eject and upgrade Webpack manually but I don't think that it would work right out of the box, as it's a major version upgrade.

I would suggest waiting until React 18 is released, because it should include Webpack 5. Because I can see the version has been already updated in the create-react-app Github repo.

See here.

answered Dec 13, 2021 at 13:19

Arshad

2283 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

WebPack 5 with Web worker using React/Typescript

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