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"); | }, []);
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.