No support for web worker when using Typescript and Webpack 5?

[rohitisinhk]

Describe the bug

Webpack 5 has deprecated 'worker-loader'

When using the suggested webpack 5 compat loader API such as

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

The CRA loaders @pmmmwh/react-refresh-webpack-plugin and babel-loader fails, and instead it returns with error

'You may need an additional loader to handle the result of these loaders.'

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[cmdcolin]

I found that I could use a web worker with webpack 5 and create-react-app v5 with the deep thought example here https://webpack.js.org/guides/web-workers/

bare bones repo example https://github.com/cmdcolin/cra-webpack5-web-worker-example

@toeryn you mention using react-scripts 4 but this thread is about webpack 5

[cmdcolin]

also the repo above works with typescript

[CKiOne]

The example from cmdcolin throws an error, when you test it:

npm test

Jest encountered an unexpected token

C:\Dev\Tests\cra-webpack5-web-worker-example-master\src\App.tsx:19
const worker = new Worker(new URL('./deep-thought.ts', import.meta.url));

[cmdcolin]

thanks for noting this @ninichki I did not try using the test suite but I also get the same error. This may be related to jest and esm module support, not sure what the fix is though

[sancelot]

This is really boring. I am in a situation, where :

• I sticked to cra4 to be able to run webworkers.
• Using craco to be able to load wasm in these webworkers
• Using an alternate serve webserver , because wasm mime types are wrong with the serve version provided.

I was looking for cra 5.0 in order to know if it could simplify my pb, but it does not !

[sancelot]

@cmdcolin , I tried your webworker and it worked.

[JoeDuncko]

thanks for noting this @ninichki I did not try using the test suite but I also get the same error. This may be related to jest and esm module support, not sure what the fix is though

FYI I fixed the error when running jest by mocking the new URL func across my entire test suite like so:

// getWebWorker.ts

// In it's own file so that it can be individually mocked in tests
// in a way that does not force jest to read the file first (eg, jest's requireActual)
// because import.meta.url is not supported in jest
export const getWebWorkerURL = (workerURL: string) =>
    new URL(workerURL, import.meta.url);

// setupTests.js

// mocked because import.meta.url is not supported in jest
jest.mock("./getWebWorkerURL", () => ({
    getWebWorkerURL: () => "test",
}));

We don't have any tests that test the web worker, its output, or our app after the web worker has done its work yet, so this is mostly to stop the error and not a full, useful mock.

Still, I hope this helps someone in the future.

---

EDIT: The above seemed to cause some weird issues in production, where the code was looking for the web worker on the local filesystem instead of from the blob that it should be

The fix seemed to be to mock the entire new Worker call, and not passing the URL to the worker dynamically.:

// getPointBoundaryRelationshipWorker.ts

// In it's own file so that it can be individually mocked in tests
// in a way that does not force jest to read the file first (eg, jest's requireActual)
// because import.meta.url is not supported in jest
// Hardcoding the path to the worker file is not ideal, but it's the only way to get it to work,
// something something webpack
export const getPointBoundaryRelationshipWorker = () =>
    new Worker(
        new URL("./pointBoundaryRelationshipWorker.ts", import.meta.url)
    );

// setupTests.js

// mocked because import.meta.url is not supported in jest
// See https://github.com/facebook/create-react-app/issues/11651#issuecomment-1292461098
jest.mock("./workers/getPointBoundaryRelationshipWorker", () => ({
    getPointBoundaryRelationshipWorker: () => "test",
}));