Issue with Comlink and Module Federation in Remote App Worker Implementation

[dev-tarun-nw]

I am consuming a remote application inside a host application using Module Federation. The remote application includes a worker implementation.

• Working Scenario: When using raw worker implementation, everything functions as expected.
• Issue: When integrating Comlink with the worker, I encounter the following error:

Error: SecurityError: Failed to construct 'Worker': Script at 'http://localhost:3000/static/js/src_worker_js.chunk.js' cannot be accessed from origin 'http://localhost:3001/'.

Context

• Host app runs on http://localhost:3001.
• Remote app runs on http://localhost:3000.
• Worker script (src_worker_js.chunk.js) is being accessed cross-origin.

Steps to Reproduce

1. Set up a host app and a remote app using Module Federation.
2. Add a worker to the remote app and integrate Comlink.
3. Access the remote app from the host app.
4. Observe the error when trying to initialize the worker.

Expected Behavior

The worker with Comlink should function seamlessly without cross-origin access issues.

Actual Behavior

The browser throws a SecurityError, preventing the worker from being constructed.

Potential Cause

The issue seems related to cross-origin restrictions when loading the worker script.

Environment

• Host app: http://localhost:3001
• Remote app: http://localhost:3000
• Module Federation setup with Webpack.

Additional Notes

• This issue is specific to using Comlink. Raw worker implementation does not encounter this problem.
• Any insights on resolving this cross-origin issue with Comlink would be greatly appreciated.

Repo: https://github.com/KVPasupuleti/cra-module-federation

Branch : comlink-worker-issue-mfe

[dev-tarun-nw]

Found the solution
while using blob for worker need to explicitly mention the cdn package link

// worker code
const workerCode = `
  import * as Comlink from 'https://unpkg.com/comlink/dist/esm/comlink.mjs';
class FaceDetectionWorker {

    name;

    constructor() {
        this.name = "Face Detection Worker";
        console.log(this.name)
        }

        consoleData(){
            console.log(this.name)
    }
}

Comlink.expose(FaceDetectionWorker)
`;

// worker initialization 
import * as Comlink from "comlink"
const blob = new Blob([workerCode], {
    type: "application/javascript",
});
const blobURL = URL.createObjectURL(blob);
const worker = new Worker(blobURL, {
    type: "module",
});
const worker = new Worker();
const FaceDetectionWorkerClass = Comlink.wrap(worker);
this.faceDetectionWorker = await new FaceDetectionWorkerClass();
console.log("NAME", await this.faceDetectionWorker.name);

[dev-tarun-nw]

Hey, re-opening the issue for a better solution instead of above hack.

[molvqingtai]

Maybe you can try Comctx, it supports custom communication methods