Add documentation / example for including module federation runtime via CDN in browser script tag

[keshavkaul]

Clear and concise description of the problem

I was looking for a solution to include mf runtime via CDN in a script tag. Did not find any solutions in examples.

Suggested solution

I instead used unpkg.com to create a CDN link for @module-federation/runtime package. Below is the solution:

<script type="module">
    const {init, loadRemote} = await import('https://unpkg.com/@module-federation/runtime@0.1.20/dist/index.esm.js?module');

    console.log("working")
</script>

Request someone to update the docs or examples with this solution.

Alternative

No response

Additional context

No response

Validations

• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[ScriptedAlchemy]

Typically we do not advise this solution, but it should be possible.

You can submit a PR if you have created a sample that seems to work, happy to edit it etc.

[ScriptedAlchemy]

Are you using module federation via webpack/rspack hosts? Do you need the runtime externalized within the source code of the remotes so you can access it via external?

[keshavkaul]

@ScriptedAlchemy We are migrating our current brownfield project written in ASP.NET Framework 4.7 and wanted to incrementally move towards Nextjs UI framework. So we are creating React UI islands in ASP.NET that fetches Module Federated React components at runtime from a Nextjs UI server

[ScriptedAlchemy]

I'm not sure if it will work with Next the way you want. Next can be a bit tricky to work with, and depending on what you're exposing, the host may also need to be configured for Next. You could consider using the esm module to load it off a CDN, though. But Next might still pose some challenges.

Load it from esm like you had, then use init and loadRemote. If you use next/link, it wont work. You will need to expose only react components