A stripped back demonstration repo of exporting the Monaco code editor via Module Federation.

From the root run yarn to get the "workspace" installed.

yarn install

pkg/
  - host     Consumes the exposed monoaco <Editor> (port 3000)
  - monaco   Exposes an <Editor> (port 3001)

The pkg/monaco/ module is based on the sample webpack configuration found in browser-esm-webpack-typescript example in the monaco-editor-samples repo.

When run standalone (no module-federation) is works fine as per the sample, notably loading it's workers locally:

cd pkg/monaco/
yarn start

http://localhost:3001/

Note the /src/MonacoEnvironment.ts file which provides the editor with a global function used to generate URLs to the web-workers to load.

To run both the host and monaco modules together, from the project root:

yarn start

Then open http://localhost:3000

The MonacoEnvironment.ts contains a hack that when running as a federated import it returns the URL to the worker pointing back to it's origin url, eg:

MonacoEnvironment.getWorkerUrl => http://localhost:3001/ts.worker.js

When the http://localhost:3001/ts.worker.js file is loaded remotely it causes an error

Unexpected usage
    at EditorSimpleWorker.loadForeignModule

This appears to be an error internal to Monaco thrown within it's web-worker load sequence. So something is different when the editor loads locally on it's own dev-server/entry-point vs when that code is imported via Module Federation.

• Package the workers differently (targetted as webworker)? *
• Some other MF trick(??)