Issue with Web Worker and Module Federation in Angular NX Project

wndffs commented 1 month ago

Current Behavior

I am running a project with NX, dynamic Module Federation, and a Web Worker. I expect that there should be no issues and that the Web Worker will function as it did previously without Module Federation. However, if there are no imports in the Web Worker, everything works as expected.

Error:

bootstrap:19 Uncaught (in promise) TypeError: __webpack_modules__[moduleId] is not a function
    at __webpack_require__ (bootstrap:19:1)
    at 8490 (my-web-worker.js:10:62)
    at __webpack_require__ (bootstrap:19:1)
    at bootstrap:34:1
    at __webpack_require__.O (chunk loaded:23:1)
    at __webpack_require__.x (bootstrap:35:1)

error in this function:

    // Check if module is in cache
    var cachedModule = __webpack_module_cache__[moduleId];
    if (cachedModule !== undefined) {
        return cachedModule.exports;
    }
    // Create a new module (and put it into the cache)
    var module = __webpack_module_cache__[moduleId] = {
        // no module.id needed
        // no module.loaded needed
        exports: {}
    };

    // Execute the module function
    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);

    // Return the exports of the module
    return module.exports;
        }

Forked repository from NX Dynamic Module Federation Guide. Added Web Worker with generator nx g @nx/angular:web-worker myWebWorker --project=dashboard provide Web Worker in app.component serve app

Expected Behavior

Script in Web Worker works as expected without error.

GitHub Repo

https://github.com/wndffs/nx-ng-dyn-fed-web-worker-bug

Steps to Reproduce

npx nx serve dashboard --devRemotes=login
look at the console in devtools

Nx Report

Node   : 18.20.4
OS     : win32-x64
npm    : 10.8.3

nx (global)        : 19.2.3
nx                 : 19.3.1
@nx/js             : 19.3.1
@nx/jest           : 19.3.1
@nx/linter         : 19.3.1
@nx/eslint         : 19.3.1
@nx/workspace      : 19.3.1
@nx/angular        : 19.3.1
@nx/cypress        : 19.3.1
@nx/devkit         : 19.3.1
@nx/eslint-plugin  : 19.3.1
@nrwl/tao          : 19.3.1
@nx/web            : 19.3.1
@nx/webpack        : 19.3.1
typescript         : 5.4.5
---------------------------------------
Registered Plugins:
@nx/cypress/plugin
@nx/eslint/plugin

Failure Logs

No response

Package Manager Version

No response

Operating System

[ ] macOS
[x] Linux
[X] Windows
[ ] Other (Please specify)

Additional Information

If there are no imports in the Web Worker, everything works as expected.

In my example you can use setInterval() and worker works fine.

/// <reference lib="webworker" />

//  import { interval } from 'rxjs';

addEventListener('message', ({ data }) => {
  const response = `worker response to ${data}`;
  postMessage(response);
});

 setInterval(() => {
   postMessage(`interval from worker`);
 }, 1000);

//  interval(1000).subscribe((a) => postMessage(`interval from worker: ${a}`));

but with any import, be it a class/interface/method - the Web Worker stops working

wndffs commented 1 month ago

webpack config diffs:

without MF (working config):

optimization.runtimeChunk='single'
experiments.outputModule=undefined
output.publicPath=''

plugins.pluginOptions.jitMode=true

MF (web worker error):

optimization.runtimeChunk=false
experiments.outputModule=true
output.publicPath='auto'
resolve.alias={ some shared libs, ...  }

plugins.pluginOptions.jitMode=false

plugins.[15]._options={ "name": "dashboard", "filename": "remoteEntry.mjs", 
"shared": { 
    "@ng-mf/data-access-user": { 
     "requiredVersion": false 
    }, 
     "@angular/core": {
         "singleton": true,
         "strictVersion": true,
         "requiredVersion": "18.0.4"
    }, } ... }

wndffs commented 1 month ago

Looks like it's related to https://github.com/webpack/webpack/issues/16173

nrwl / nx