@asteby/metacore-runtime-react 13.0.0 → 13.2.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @asteby/metacore-runtime-react
 
+## 13.2.0
+
+### Minor Changes
+
+- fb45ad4: Migrate federation tooling from the broken `@originjs/vite-plugin-federation` to the official `@module-federation/vite` + `@module-federation/runtime`.
+
+  **BREAKING (federation runtime swap — hosts and addons must rebuild):**
+  - `metacoreFederationShared()` (starter-config) now returns a `@module-federation/vite` `federation()` config instead of an `@originjs` config. Same signature/call-sites: `metacoreFederationShared({ host })` → host config (name + shared, empty remotes — remotes register dynamically at runtime); `metacoreFederationShared({ host, exposes })` → remote config (name + filename + exposes + shared). Hosts MUST switch their `vite.config.ts` to `import { federation } from '@module-federation/vite'`.
+  - The shared singleton list is now `{ singleton: true }` (no `requiredVersion: false`) and matches the addon + ops host contract exactly: `react`, `react-dom`, `react/jsx-runtime`, `react-i18next`, `i18next`, `@asteby/metacore-ui`, `@asteby/metacore-runtime-react`, `@asteby/metacore-sdk`, `@asteby/metacore-app-providers`, `@asteby/metacore-theme`, `@asteby/metacore-auth`. **Build-time gotcha:** `@module-federation/vite` resolves every shared bare specifier at build time, so each must be an installed (dev)dependency of the building package.
+  - `AddonLoader` (runtime-react) now uses `@module-federation/runtime` (`registerRemotes` + `loadRemote`) instead of the manual `init`/`get`/`window[scope]` machinery. The host's `@module-federation/vite` build auto-initialises the shared scope, so the remote consumes the HOST's React/SDK singletons — fixing the `useState`-null crash.
+  - `clearFederationContainer()` is now a deprecated no-op under the MF runtime (container replacement on hot-swap is handled by `registerRemotes(..., { force: true })`).
+
+## 13.1.0
+
+### Minor Changes
+
+- 8d9c602: AddonLoader carga remotes de federación ESM vía `import()` dinámico (fix "Cannot use import statement outside a module").
+
+  Los remotes built con Vite/@originjs `format:"esm"` (el estándar de `metacoreFederationShared`) son módulos ES que hacen `import` top-level y exportan `{ init, get }` — DEBEN cargarse como módulo. El `AddonLoader` los inyectaba como `<script>` clásico → el browser tiraba `Cannot use import statement outside a module` y la UI federada nunca cargaba. Ahora hace `import()` dinámico (vía `new Function` para que ningún bundler reescriba el import del URL externo) y usa el namespace del módulo como container; los remotes legacy "var"/window siguen soportados con fallback a `<script>` + `window[scope]`.
+
 ## 13.0.0
 
 ### Minor Changes

package/dist/addon-loader.d.ts

@@ -1,15 +1,8 @@
 import type { AddonAPI, AddonLayout } from '@asteby/metacore-sdk';
-declare global {
-    interface Window {
-        [key: string]: any;
-        __webpack_init_sharing__?: (scope: string) => Promise<void>;
-        __webpack_share_scopes__?: Record<string, unknown>;
-    }
-}
 export interface AddonLoaderProps {
     /** Unique key of the addon — maps to the federation container name. */
     scope: string;
-    /** URL of the addon's remoteEntry.js bundle. */
+    /** URL of the addon's remoteEntry.js bundle (may carry a `?v=` cache-bust). */
     url: string;
     /** Exposed module to import from the remote (e.g. './register'). */
     module?: string;

package/dist/addon-loader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"addon-loader.d.ts","sourceRoot":"","sources":["../src/addon-loader.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAGjE,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,MAAM;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;QAClB,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAA;QAC3D,wBAAwB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KACrD;CACJ;AAED,MAAM,WAAW,gBAAgB;IAC7B,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,gDAAgD;IAChD,GAAG,EAAE,MAAM,CAAA;IACX,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+DAA+D;IAC/D,GAAG,EAAE,QAAQ,CAAA;IACb,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IAC9B;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAuCD,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,GAAG,EACH,MAAqB,EACrB,GAAG,EACH,QAAe,EACf,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,GACX,EAAE,gBAAgB,2CAsClB"}
+{"version":3,"file":"addon-loader.d.ts","sourceRoot":"","sources":["../src/addon-loader.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAGjE,MAAM,WAAW,gBAAgB;IAC7B,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAA;IACb,+EAA+E;IAC/E,GAAG,EAAE,MAAM,CAAA;IACX,oEAAoE;IACpE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+DAA+D;IAC/D,GAAG,EAAE,QAAQ,CAAA;IACb,wCAAwC;IACxC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IAC9B;;;;;;;;;;OAUG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AA6CD,wBAAgB,WAAW,CAAC,EACxB,KAAK,EACL,GAAG,EACH,MAAqB,EACrB,GAAG,EACH,QAAe,EACf,OAAO,EACP,OAAO,EACP,MAAM,EACN,QAAQ,GACX,EAAE,gBAAgB,2CA8ClB"}

package/dist/addon-loader.js

@@ -1,39 +1,46 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Minimal federated-module addon loader. Injects a remoteEntry.js <script>,
-// waits for the `window[scope]` container to initialize, then calls the
-// addon's `register(api)` export with the AddonAPI injected by the host.
+// Federated-module addon loader, built on the official Module Federation
+// runtime (`@module-federation/runtime`). Per addon it registers the remote's
+// `remoteEntry.js` as an ESM container, loads the exposed `./register` module,
+// and calls `register(api)` with the AddonAPI injected by the host.
+//
+// Why @module-federation/runtime (not the old manual init/get machinery):
+// the host's Vite build uses `@module-federation/vite`'s `federation()` plugin,
+// which auto-initialises the shared scope at host boot. `registerRemotes` +
+// `loadRemote` then transparently wire the remote into that already-initialised
+// share scope — so the remote consumes the HOST's React/SDK singletons instead
+// of bundling its own. That's the whole point: it fixes the `useState`-null
+// crash WITHOUT this loader ever touching a share scope manually.
 import { useEffect, useRef, useState } from 'react';
+import { registerRemotes, loadRemote } from '@module-federation/runtime';
 import { useDeclareAddonLayout } from './addon-layout-context';
-const loadedScripts = new Map();
-function loadScript(url, scope) {
-    const key = `${scope}::${url}`;
-    const existing = loadedScripts.get(key);
-    if (existing)
-        return existing;
-    const promise = new Promise((resolve, reject) => {
-        const el = document.createElement('script');
-        el.src = url;
-        el.type = 'text/javascript';
-        el.async = true;
-        el.onload = () => resolve();
-        el.onerror = () => reject(new Error(`Failed to load addon script: ${url}`));
-        document.head.appendChild(el);
-    });
-    loadedScripts.set(key, promise);
-    return promise;
+// `registerRemotes` is additive + idempotent across re-mounts; we still track
+// which scopes we've registered to avoid redundant `force` churn (each `force`
+// re-register wipes that remote's module cache and logs a runtime warning).
+const registered = new Set();
+// Derive the `loadRemote` id from the scope + exposed module name. MF resolves
+// `"<remoteName>/<expose>"` — e.g. `metacore_tickets/register` for the
+// `"./register"` expose. We strip the leading `./` of the expose path.
+function remoteId(scope, module) {
+    const expose = module.replace(/^\.\//, '');
+    return `${scope}/${expose}`;
 }
-async function loadRemote(scope, module) {
-    if (typeof window.__webpack_init_sharing__ === 'function') {
-        await window.__webpack_init_sharing__('default');
+async function loadAddon(scope, url, module) {
+    // Register the remote container as an ES module. `type: 'module'` matches
+    // the `@module-federation/vite` remote (remoteEntry.js is an ESM bundle).
+    // The `url` already carries the `?v=` cache-bust the host computed, so the
+    // browser refetches a fresh remoteEntry when the addon version changes.
+    if (!registered.has(scope)) {
+        registerRemotes([{ name: scope, entry: url, type: 'module' }], 
+        // `force: true` so a re-registration with a new `?v=` URL (addon
+        // hot-swap / version bump) overwrites the stale entry + cache.
+        { force: true });
+        registered.add(scope);
     }
-    const container = window[scope];
-    if (!container)
-        throw new Error(`Addon container "${scope}" not found on window`);
-    if (typeof container.init === 'function' && window.__webpack_share_scopes__) {
-        await container.init(window.__webpack_share_scopes__.default);
-    }
-    const factory = await container.get(module);
-    return factory();
+    // loadRemote("<scope>/<expose>") returns the exposed module namespace (or
+    // null if it can't be resolved). No manual share-scope init — the host's
+    // federation runtime already initialised it.
+    return loadRemote(remoteId(scope, module));
 }
 export function AddonLoader({ scope, url, module = './register', api, fallback = null, onReady, onError, layout, children, }) {
     const [status, setStatus] = useState('loading');
@@ -48,15 +55,16 @@ export function AddonLoader({ scope, url, module = './register', api, fallback =
         let cancelled = false;
         (async () => {
             try {
-                await loadScript(url, scope);
-                if (cancelled)
-                    return;
-                const mod = await loadRemote(scope, module);
+                const mod = await loadAddon(scope, url, module);
                 if (cancelled)
                     return;
-                if (!didRegister.current && typeof mod?.register === 'function') {
+                const register = mod?.register ?? mod?.default;
+                if (typeof register !== 'function') {
+                    throw new Error(`Addon "${scope}" module "${module}" has no register() export`);
+                }
+                if (!didRegister.current) {
                     didRegister.current = true;
-                    await Promise.resolve(mod.register(api));
+                    await Promise.resolve(register(api));
                 }
                 setStatus('ready');
                 onReady?.();
@@ -64,12 +72,15 @@ export function AddonLoader({ scope, url, module = './register', api, fallback =
             catch (e) {
                 if (cancelled)
                     return;
-                setError(e);
+                const err = e instanceof Error ? e : new Error(String(e));
+                setError(err);
                 setStatus('error');
-                onError?.(e);
+                onError?.(err);
             }
         })();
-        return () => { cancelled = true; };
+        return () => {
+            cancelled = true;
+        };
     }, [scope, url, module]);
     if (status === 'loading')
         return _jsx(_Fragment, { children: fallback });

package/dist/hotswap-reload-policy.d.ts

@@ -126,19 +126,15 @@ export declare function useHotSwapReload(client: ManifestHotSwapClient | undefin
  */
 export declare function withVersionParam(url: string, hash: string | undefined): string;
 /**
- * Remove the federation container previously registered on `window[scope]`.
- * Hosts call this from `onSwap` before letting the addon route re-mount
- * so the next `remoteEntry.js` injection creates a fresh container instead
- * of short-circuiting on the cached one.
+ * @deprecated Legacy `@originjs/vite-plugin-federation` helper. Under the
+ * current `@module-federation/runtime` loader ({@link AddonLoader}), container
+ * replacement on hot-swap is handled by `registerRemotes(..., { force: true })`
+ * with the new `?v=` URL — there is no `window[scope]` container to delete.
  *
- * Best-effort: if `window` is undefined (SSR) or the scope was never
- * registered, this is a no-op. Returns `true` if a container was actually
- * removed, `false` otherwise — useful for telemetry.
- *
- * **Caveat:** some federation runtimes wrap the container in a Proxy
- * whose internal state survives `delete`. If you hit `Container already
- * registered` after calling this, the federation runtime is holding the
- * reference internally and the only reliable swap is `"page-reload"`.
+ * Kept for backward compatibility so existing host `onSwap` wiring keeps
+ * compiling. Best-effort: removes a stale `window[scope]` if a legacy
+ * `@originjs` remote left one behind, otherwise a no-op. Returns `true` if a
+ * value was removed, `false` otherwise.
  */
 export declare function clearFederationContainer(scope: string): boolean;
 /**

package/dist/hotswap-reload-policy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hotswap-reload-policy.d.ts","sourceRoot":"","sources":["../src/hotswap-reload-policy.ts"],"names":[],"mappings":"AA+DA,OAAO,EAEH,KAAK,2BAA2B,EAChC,KAAK,qBAAqB,EAC1B,KAAK,8BAA8B,EACtC,MAAM,+BAA+B,CAAA;AAEtC;;;;;;GAMG;AACH,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAA;AAEtE;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAChC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,qBAAqB,CAAA;IAChC;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE,CACb,KAAK,EAAE,2BAA2B,KACjC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CACL,KAAK,EAAE,2BAA2B,EAClC,MAAM,EAAE,OAAO,GAAG,aAAa,GAAG,WAAW,GAAG,QAAQ,KACvD,IAAI,CAAA;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,8BAA8B,CAAC,SAAS,CAAC,CAAA;CACtD;AAED,MAAM,WAAW,sBAAsB;IACnC;;;;;;;;OAQG;IACH,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GACzB,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,MAAM,CAAA;AAEZ,MAAM,WAAW,iBAAiB;IAC9B,0EAA0E;IAC1E,aAAa,EAAE,CACX,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAChE,IAAI,CAAA;IACT,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAsB,kBAAkB,CACpC,OAAO,EAAE,2BAA2B,EACpC,MAAM,EAAE,mBAAmB,EAC3B,IAAI,EAAE,iBAAiB,GACxB,OAAO,CAAC,mBAAmB,CAAC,CA6C9B;AAED,wBAAgB,gBAAgB,CAC5B,MAAM,EAAE,qBAAqB,GAAG,SAAS,GAAG,IAAI,EAChD,MAAM,GAAE,mBAAwB,GACjC,sBAAsB,CA2BxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAiB9E;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAa/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAOxE"}
+{"version":3,"file":"hotswap-reload-policy.d.ts","sourceRoot":"","sources":["../src/hotswap-reload-policy.ts"],"names":[],"mappings":"AAyDA,OAAO,EAEH,KAAK,2BAA2B,EAChC,KAAK,qBAAqB,EAC1B,KAAK,8BAA8B,EACtC,MAAM,+BAA+B,CAAA;AAEtC;;;;;;GAMG;AACH,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,aAAa,GAAG,QAAQ,CAAA;AAEtE;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAChC,wDAAwD;IACxD,QAAQ,CAAC,EAAE,qBAAqB,CAAA;IAChC;;;;;;;;;;;;OAYG;IACH,cAAc,CAAC,EAAE,CACb,KAAK,EAAE,2BAA2B,KACjC,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,CAAA;IAC/B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,CACL,KAAK,EAAE,2BAA2B,EAClC,MAAM,EAAE,OAAO,GAAG,aAAa,GAAG,WAAW,GAAG,QAAQ,KACvD,IAAI,CAAA;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,8BAA8B,CAAC,SAAS,CAAC,CAAA;CACtD;AAED,MAAM,WAAW,sBAAsB;IACnC;;;;;;;;OAQG;IACH,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;CAC1C;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GACzB,OAAO,GACP,aAAa,GACb,WAAW,GACX,QAAQ,GACR,MAAM,CAAA;AAEZ,MAAM,WAAW,iBAAiB;IAC9B,0EAA0E;IAC1E,aAAa,EAAE,CACX,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAChE,IAAI,CAAA;IACT,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED;;;;;;;;GAQG;AACH,wBAAsB,kBAAkB,CACpC,OAAO,EAAE,2BAA2B,EACpC,MAAM,EAAE,mBAAmB,EAC3B,IAAI,EAAE,iBAAiB,GACxB,OAAO,CAAC,mBAAmB,CAAC,CA6C9B;AAED,wBAAgB,gBAAgB,CAC5B,MAAM,EAAE,qBAAqB,GAAG,SAAS,GAAG,IAAI,EAChD,MAAM,GAAE,mBAAwB,GACjC,sBAAsB,CA2BxB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,CAiB9E;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAU/D;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAOxE"}

package/dist/hotswap-reload-policy.js

@@ -44,21 +44,15 @@
 // ## Federation runtime caveat
 //
 // The `"rekey"` strategy re-fetches `remoteEntry.js` with a `?v=<hash8>` query
-// suffix (see {@link withVersionParam}). For the new container to replace the
-// old one, the federation loader **must** `delete window[Container]` before
-// loading the new script — otherwise the cached container object short-
-// circuits the loader and you get `Container already registered` style errors
-// or, worse, the old code silently keeps running. This module exports
-// {@link clearFederationContainer} for that purpose; the host's federation
-// loader should call it from its `onSwap` hook.
-//
-// We deliberately keep the `delete window[Container]` side-effect OUT of this
-// module's default behaviour. Some federation runtimes (vite-plugin-federation
-// in dev, webpack 5 with `runtime: false`) wrap the container in a `Proxy`
-// that mutates internal state on every access; blindly deleting it from
-// here would race against any unmounting consumer that still holds a
-// reference. Hosts that hit `Container already registered` should call
-// `clearFederationContainer(scope)` from `onSwap` as documented below.
+// suffix (see {@link withVersionParam}). With `@module-federation/runtime`, the
+// {@link AddonLoader} re-registers the remote on every rekey remount via
+// `registerRemotes([{ name, entry: <new ?v= url> }], { force: true })`. The
+// `force` flag overwrites the previously registered container AND wipes that
+// remote's loaded-module cache, so the new code takes effect without any manual
+// `window[scope]` deletion — the old `@originjs` requirement to `delete
+// window[Container]` no longer applies. {@link clearFederationContainer} is kept
+// for backward compatibility (legacy hosts may still call it from `onSwap`) but
+// is a no-op under the MF runtime.
 import { useMemo, useRef, useState } from 'react';
 import { useManifestHotSwapSubscriber, } from './manifest-hotswap-subscriber';
 /**
@@ -173,19 +167,15 @@ export function withVersionParam(url, hash) {
     return `${head}?${parts.join('&')}${fragment}`;
 }
 /**
- * Remove the federation container previously registered on `window[scope]`.
- * Hosts call this from `onSwap` before letting the addon route re-mount
- * so the next `remoteEntry.js` injection creates a fresh container instead
- * of short-circuiting on the cached one.
- *
- * Best-effort: if `window` is undefined (SSR) or the scope was never
- * registered, this is a no-op. Returns `true` if a container was actually
- * removed, `false` otherwise — useful for telemetry.
+ * @deprecated Legacy `@originjs/vite-plugin-federation` helper. Under the
+ * current `@module-federation/runtime` loader ({@link AddonLoader}), container
+ * replacement on hot-swap is handled by `registerRemotes(..., { force: true })`
+ * with the new `?v=` URL — there is no `window[scope]` container to delete.
  *
- * **Caveat:** some federation runtimes wrap the container in a Proxy
- * whose internal state survives `delete`. If you hit `Container already
- * registered` after calling this, the federation runtime is holding the
- * reference internally and the only reliable swap is `"page-reload"`.
+ * Kept for backward compatibility so existing host `onSwap` wiring keeps
+ * compiling. Best-effort: removes a stale `window[scope]` if a legacy
+ * `@originjs` remote left one behind, otherwise a no-op. Returns `true` if a
+ * value was removed, `false` otherwise.
  */
 export function clearFederationContainer(scope) {
     if (typeof window === 'undefined')
@@ -197,9 +187,6 @@ export function clearFederationContainer(scope) {
         return true;
     }
     catch {
-        // Some browsers refuse to delete non-configurable globals. Set
-        // to undefined as a fallback so the loader's `if (!window[scope])`
-        // check still triggers a re-inject.
         ;
         window[scope] = undefined;
         return true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "13.0.0",
+  "version": "13.2.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -17,6 +17,7 @@
     }
   },
   "dependencies": {
+    "@module-federation/runtime": "^2.5.0",
     "zod": "^4.3.0"
   },
   "peerDependencies": {

package/src/addon-loader.tsx

@@ -1,22 +1,24 @@
-// Minimal federated-module addon loader. Injects a remoteEntry.js <script>,
-// waits for the `window[scope]` container to initialize, then calls the
-// addon's `register(api)` export with the AddonAPI injected by the host.
+// Federated-module addon loader, built on the official Module Federation
+// runtime (`@module-federation/runtime`). Per addon it registers the remote's
+// `remoteEntry.js` as an ESM container, loads the exposed `./register` module,
+// and calls `register(api)` with the AddonAPI injected by the host.
+//
+// Why @module-federation/runtime (not the old manual init/get machinery):
+// the host's Vite build uses `@module-federation/vite`'s `federation()` plugin,
+// which auto-initialises the shared scope at host boot. `registerRemotes` +
+// `loadRemote` then transparently wire the remote into that already-initialised
+// share scope — so the remote consumes the HOST's React/SDK singletons instead
+// of bundling its own. That's the whole point: it fixes the `useState`-null
+// crash WITHOUT this loader ever touching a share scope manually.
 import { useEffect, useRef, useState } from 'react'
+import { registerRemotes, loadRemote } from '@module-federation/runtime'
 import type { AddonAPI, AddonLayout } from '@asteby/metacore-sdk'
 import { useDeclareAddonLayout } from './addon-layout-context'
 
-declare global {
-    interface Window {
-        [key: string]: any
-        __webpack_init_sharing__?: (scope: string) => Promise<void>
-        __webpack_share_scopes__?: Record<string, unknown>
-    }
-}
-
 export interface AddonLoaderProps {
     /** Unique key of the addon — maps to the federation container name. */
     scope: string
-    /** URL of the addon's remoteEntry.js bundle. */
+    /** URL of the addon's remoteEntry.js bundle (may carry a `?v=` cache-bust). */
     url: string
     /** Exposed module to import from the remote (e.g. './register'). */
     module?: string
@@ -43,41 +45,47 @@ export interface AddonLoaderProps {
     children?: React.ReactNode
 }
 
-const loadedScripts = new Map<string, Promise<void>>()
-
-function loadScript(url: string, scope: string): Promise<void> {
-    const key = `${scope}::${url}`
-    const existing = loadedScripts.get(key)
-    if (existing) return existing
-    const promise = new Promise<void>((resolve, reject) => {
-        const el = document.createElement('script')
-        el.src = url
-        el.type = 'text/javascript'
-        el.async = true
-        el.onload = () => resolve()
-        el.onerror = () => reject(new Error(`Failed to load addon script: ${url}`))
-        document.head.appendChild(el)
-    })
-    loadedScripts.set(key, promise)
-    return promise
+/** Shape of the exposed `./register` module. */
+interface AddonRegisterModule {
+    register?: (api: AddonAPI) => void | Promise<void>
+    default?: (api: AddonAPI) => void | Promise<void>
 }
 
-interface FederationContainer {
-    init: (shareScope: unknown) => Promise<void>
-    get: (module: string) => Promise<() => any>
+// `registerRemotes` is additive + idempotent across re-mounts; we still track
+// which scopes we've registered to avoid redundant `force` churn (each `force`
+// re-register wipes that remote's module cache and logs a runtime warning).
+const registered = new Set<string>()
+
+// Derive the `loadRemote` id from the scope + exposed module name. MF resolves
+// `"<remoteName>/<expose>"` — e.g. `metacore_tickets/register` for the
+// `"./register"` expose. We strip the leading `./` of the expose path.
+function remoteId(scope: string, module: string): string {
+    const expose = module.replace(/^\.\//, '')
+    return `${scope}/${expose}`
 }
 
-async function loadRemote(scope: string, module: string) {
-    if (typeof window.__webpack_init_sharing__ === 'function') {
-        await window.__webpack_init_sharing__('default')
-    }
-    const container = window[scope] as FederationContainer | undefined
-    if (!container) throw new Error(`Addon container "${scope}" not found on window`)
-    if (typeof container.init === 'function' && window.__webpack_share_scopes__) {
-        await container.init(window.__webpack_share_scopes__.default)
+async function loadAddon(
+    scope: string,
+    url: string,
+    module: string,
+): Promise<AddonRegisterModule | null> {
+    // Register the remote container as an ES module. `type: 'module'` matches
+    // the `@module-federation/vite` remote (remoteEntry.js is an ESM bundle).
+    // The `url` already carries the `?v=` cache-bust the host computed, so the
+    // browser refetches a fresh remoteEntry when the addon version changes.
+    if (!registered.has(scope)) {
+        registerRemotes(
+            [{ name: scope, entry: url, type: 'module' }],
+            // `force: true` so a re-registration with a new `?v=` URL (addon
+            // hot-swap / version bump) overwrites the stale entry + cache.
+            { force: true },
+        )
+        registered.add(scope)
     }
-    const factory = await container.get(module)
-    return factory()
+    // loadRemote("<scope>/<expose>") returns the exposed module namespace (or
+    // null if it can't be resolved). No manual share-scope init — the host's
+    // federation runtime already initialised it.
+    return loadRemote<AddonRegisterModule>(remoteId(scope, module))
 }
 
 export function AddonLoader({
@@ -105,27 +113,35 @@ export function AddonLoader({
         let cancelled = false
         ;(async () => {
             try {
-                await loadScript(url, scope)
+                const mod = await loadAddon(scope, url, module)
                 if (cancelled) return
-                const mod = await loadRemote(scope, module)
-                if (cancelled) return
-                if (!didRegister.current && typeof mod?.register === 'function') {
+                const register = mod?.register ?? mod?.default
+                if (typeof register !== 'function') {
+                    throw new Error(
+                        `Addon "${scope}" module "${module}" has no register() export`,
+                    )
+                }
+                if (!didRegister.current) {
                     didRegister.current = true
-                    await Promise.resolve(mod.register(api))
+                    await Promise.resolve(register(api))
                 }
                 setStatus('ready')
                 onReady?.()
-            } catch (e: any) {
+            } catch (e: unknown) {
                 if (cancelled) return
-                setError(e)
+                const err = e instanceof Error ? e : new Error(String(e))
+                setError(err)
                 setStatus('error')
-                onError?.(e)
+                onError?.(err)
             }
         })()
-        return () => { cancelled = true }
+        return () => {
+            cancelled = true
+        }
     }, [scope, url, module])
 
     if (status === 'loading') return <>{fallback}</>
-    if (status === 'error') return <div className="text-sm text-red-500">Addon load error: {error?.message}</div>
+    if (status === 'error')
+        return <div className="text-sm text-red-500">Addon load error: {error?.message}</div>
     return <>{children}</>
 }

package/src/hotswap-reload-policy.ts

@@ -44,21 +44,15 @@
 // ## Federation runtime caveat
 //
 // The `"rekey"` strategy re-fetches `remoteEntry.js` with a `?v=<hash8>` query
-// suffix (see {@link withVersionParam}). For the new container to replace the
-// old one, the federation loader **must** `delete window[Container]` before
-// loading the new script — otherwise the cached container object short-
-// circuits the loader and you get `Container already registered` style errors
-// or, worse, the old code silently keeps running. This module exports
-// {@link clearFederationContainer} for that purpose; the host's federation
-// loader should call it from its `onSwap` hook.
-//
-// We deliberately keep the `delete window[Container]` side-effect OUT of this
-// module's default behaviour. Some federation runtimes (vite-plugin-federation
-// in dev, webpack 5 with `runtime: false`) wrap the container in a `Proxy`
-// that mutates internal state on every access; blindly deleting it from
-// here would race against any unmounting consumer that still holds a
-// reference. Hosts that hit `Container already registered` should call
-// `clearFederationContainer(scope)` from `onSwap` as documented below.
+// suffix (see {@link withVersionParam}). With `@module-federation/runtime`, the
+// {@link AddonLoader} re-registers the remote on every rekey remount via
+// `registerRemotes([{ name, entry: <new ?v= url> }], { force: true })`. The
+// `force` flag overwrites the previously registered container AND wipes that
+// remote's loaded-module cache, so the new code takes effect without any manual
+// `window[scope]` deletion — the old `@originjs` requirement to `delete
+// window[Container]` no longer applies. {@link clearFederationContainer} is kept
+// for backward compatibility (legacy hosts may still call it from `onSwap`) but
+// is a no-op under the MF runtime.
 
 import { useMemo, useRef, useState } from 'react'
 import {
@@ -311,30 +305,23 @@ export function withVersionParam(url: string, hash: string | undefined): string
 }
 
 /**
- * Remove the federation container previously registered on `window[scope]`.
- * Hosts call this from `onSwap` before letting the addon route re-mount
- * so the next `remoteEntry.js` injection creates a fresh container instead
- * of short-circuiting on the cached one.
- *
- * Best-effort: if `window` is undefined (SSR) or the scope was never
- * registered, this is a no-op. Returns `true` if a container was actually
- * removed, `false` otherwise — useful for telemetry.
+ * @deprecated Legacy `@originjs/vite-plugin-federation` helper. Under the
+ * current `@module-federation/runtime` loader ({@link AddonLoader}), container
+ * replacement on hot-swap is handled by `registerRemotes(..., { force: true })`
+ * with the new `?v=` URL — there is no `window[scope]` container to delete.
  *
- * **Caveat:** some federation runtimes wrap the container in a Proxy
- * whose internal state survives `delete`. If you hit `Container already
- * registered` after calling this, the federation runtime is holding the
- * reference internally and the only reliable swap is `"page-reload"`.
+ * Kept for backward compatibility so existing host `onSwap` wiring keeps
+ * compiling. Best-effort: removes a stale `window[scope]` if a legacy
+ * `@originjs` remote left one behind, otherwise a no-op. Returns `true` if a
+ * value was removed, `false` otherwise.
  */
 export function clearFederationContainer(scope: string): boolean {
     if (typeof window === 'undefined') return false
-    if (!(scope in window)) return false
+    if (!(scope in (window as Record<string, unknown>))) return false
     try {
         delete (window as Record<string, unknown>)[scope]
         return true
     } catch {
-        // Some browsers refuse to delete non-configurable globals. Set
-        // to undefined as a fallback so the loader's `if (!window[scope])`
-        // check still triggers a re-inject.
         ;(window as Record<string, unknown>)[scope] = undefined
         return true
     }