As far as I know, this is still relevant.

though perhaps old, this is still relevant

Yeah, it’s been over a year and the choice continues to be:

• Write ESM code with clear semantics that esbuild does not support (until https://github.com/evanw/esbuild/issues/312 or https://github.com/evanw/esbuild/issues/2866 is implemented).
• Write ESM code with clear semantics that Parcel breaks (due to this issue).

With both approaches it’s “obvious” how to maintain correctness with standard code splitting, so it’s a matter of the ecosystem settling on a cross-compatible solution.

For now, we’ve given up on Parcel compatibility, given that this issue is stalled.

I have read throughout this conversation and I do understand the maintainers and the users point of view somehow.

I just want to share some insights from using webpack for a similar issue.

we wanted to develop the worker script in typescript rather than in javascript. so webpack/tsc needs to transpile the typescript into javascript first and than provide a link to that javascript file, that works within a deployed environment - so no file:/// links. also we out-sourced the shared worker into it’s own library, so multiple applications can use it, instead of having the same shared worker file duplicated.

instance SharedWorker:

return new SharedWorker(
  new URL(
    '@my/api/shared-worker',
    import.meta.url
  ) /* webpackChunkName: 'shared-worker' */,
  {
    type: 'module',
    name: 'My Shared Worker',
  }
);

the interessting part here is, that the combination new SharedWorker(new URL('xxx', import.meta.url)) must be written like this. it is not possible put any of those terms into a variable. otherwise webpack will not produce a working worker, or will even prevent it from compiling…

it seems webpack handles to the combination of (Shared)Worker and URL specially to just fullfill the usecase.

https://webpack.js.org/guides/web-workers/

more from the example - in case someone stumbles across this.

tsconfig.ts

...
  "@my/api/shared-worker": [
    "libs/api/worker/shared-worker.ts"
  ],
...

api module`s index.ts

....
// May not be exported because otherwise the worker will not be executed in the web worker context.
// But must be imported so that the file is compiled.
import * as SharedWorker from '@my/api/shared-worker';

shared-worker.ts

imports ...

export default self.onconnect = (event: MessageEvent<any>) => {
  const [port] = event.ports;
  start(port);
};

if ('DedicatedWorkerGlobalScope' in self) start(self as unknown as MessagePort);

function start(port: MessagePort) {
  // do worker stuff
  port.postMessage({ data: 'data' })
  port.onmessage = (e: MessageEvent) => {
      messageHandler(e, port, subscriptions, dpConnectSubs);
  };
}