rspack
rspack copied to clipboard
web-infra-dev
worker-loader support
worker-loader is required for basically any kind of Web Workers support so I think this should be high on the priority list.
webpack says not to use worker-loader any more https://webpack.js.org/guides/web-workers/#syntax
We use the method describe in those docs but that is also broken with rspack.
Rspack currently not support web-worker or worker-loader, but we will work on supporting them later.
@beaucollins that method doesn't work on Firefox because there's no ESM support for Web Workers yet. Bundling is the only reliable way to make web workers work across browsers.
@thecodrr webpack replaces the import.meta.url with a static string. Firefox handles it just fine. esm isn't involved in the bundled code.
Look like https://github.com/web-infra-dev/rspack/pull/2340 can't resolve the web worker as the same with webpack 5: Uncaught SyntaxError: Cannot use import statement outside a module there always exists some extra file need to be imported except set the worker.js to type: module?
I can confirm that we can successfully use our worker code using rspack and the new URL('Module.ts', import.meta.url) syntax.
And yes, @thecodrr this also works in Firefox since the bundle output does not actually use ESM.
I can confirm that we can successfully use our worker code using
rspackand thenew URL('Module.ts', import.meta.url)syntax.
I'm not sure what I'm doing differently.
With the following code using rspack 0.1.7, I get the TS file simply copied, untransformed (but renamed), to the output directory:
const dbWorker = new Worker(
/* webpackChunkName: 'db-worker' */
new URL('../db-worker/db-worker.ts', import.meta.url)
);
@birtles it seems I spoke too soon. The builds work but the Worker based feature is not.
I've the same issue as @birtles has, I would expect that a new entry will be added (with the path of the worker file path) dynamically with a worker target, so if the worker file path has imports it will be bundled together as it works in Webpack.
Do we have a patch/ experimental branch for this fix I can try ?
it is not supported now, we will support it soon
so if there is a milestone? this is a important feature for many complex system
@ahabhgk I've tested v0.2.5 with the worker, looks like it splits the worker script into a separate file, but it is not bundling it's imports inside this bundle.
// some code
highlightWorker = new Worker(
new URL('./worker.ts', import.meta.url)
);
// worker.ts
import config from './config'; // this file is not bundled inside the chunk that was created for worker.ts
console.log(config)
@felixmosh Is there any runtime error? Could you provide a reproduction so I can dig into this
@ahabhgk this is weird, with the rspack starter, it works properly.
On my project, it throws,
You can try this branch: https://github.com/felixmosh/bull-board/tree/ui-with-rspack
yarn install
yarn start:dev
make sure you have radis running on a default port (via Docker or other)
We have completed the basic support for web worker in v0.2.6, enough to cover most common cases, you can checkout our document for more detail
But there are some uncommon cases we still not able to cover for now:
- #3686: not support create worker by function call syntax
navigator.serviceWorker.register() - #3656: not support customize worker syntax by
module.parser.javascript.worker - #3680: not support webpackEntryOptions magic comments
/* webpackEntryOptions: { filename: "workers/[name].js" } */
Since these issue are blocked by the implementation of compile time evaluation and parser hooks in Rspack, so I decide to close this one and tracking these in their own issue, if you have any problem when using worker with Rspack, feel free to open a new issue and ping me.