Web worker inside npm package built with parcel

[ameerthehacker]

Hey how I can embed web workers inside a npm package. The problem Im facing is when I import my npm package for a demo it is trying to dowload the web worker from the public path of the dev server which does not exists

[mischnic]

Parcel will automatically parse new Worker("./myworker.js") calls, both inside and outside of node_modules.
Please provide a concrete code example if you need more help.

[ameerthehacker]

This is the place in my npm library I'm using worker and it gets bundled in the dist

but when I use it in another parcel project by installing my library(with worker) it says it cannot find worker.js in my new project

[beautyfree]

Same

[mischnic]

Can someone provide a code sample where this fails? Seems to work for me in a simple example.

(@lgarron ?)

[lgarron]

Can someone provide a code sample where this fails? Seems to work for me in a simple example.

(@lgarron ?)

https://github.com/lgarron/parcel-2-web-worker-package-import

esm-import fails with Uncaught SyntaxError: Cannot use 'import.meta' outside a module
(See https://github.com/lgarron/web-worker-compat-problems/#problem-7-calculating-relative-paths-requires-importmetaurl, #5473, #5430)

cjs-import fails with Uncaught SyntaxError: Unexpected token '<' getting served HTML where JS was expected. This is because the published package uses __dirname but not inline (https://unpkg.com/browse/[email protected]/dist/cjs/scrambles.js), which causes the absolute disk file path to be used as the worker file path on the dev server origin.

I can publish more package versions with other combinations of workarounds. :-P

[lgarron]

the published package uses __dirname but not inline

In particular, note that this is required for node-compatible CJS code that instantiates a worker. The worker instantiation is not inline because we need to conditionally import the Worker implementation on node ("conditionally" because we need to avoid trying to load it in a browser).

(Also note that the current implementation is not Windows-compatible, because I hard-coded the slash direction. There would normally be another level of abstraction for cross-platform node compatibility, using path.join().)

[lgarron]

For what it's worth, I'd be happy to drop CJS support and just publish/consume:

new Worker(new URL("./worker.js", import.meta.url));

Which I think should stay intact when building a library target, but would be appropriate for Parcel to compile to non-ESM code for browser targets while Firefox and Safari still don't support module syntax for workers. (Browsers that syntax error if import.meta.url appears anywhere in the syntax tree of a non-module script, even if it appears in a code path that would not be reached.)

I don't know any remotely reasonable way to publish a CJS build with worker instantiation code that works in node (including Windows) and browsers, and can also be handled by most bundlers. I believe web-worker is supposed to help with this, but I never got it to work.

[mischnic]

Ok, so all of that should be covered by #5430

-> #5430 (comment)

[jeffpeck10x]

Not necessarily related, but as a heads up to anybody who finds this and it is not already obvious to, you need { type: "module" } when making a web worker:

    const worker = new Worker(
      new URL("./workers/my-worker.ts", import.meta.url)
      { type: "module" }
    );

See here:
#6261