STCOR-1040 Use non-webpack module-federation toolset runtime.

package.json

@@ -105,6 +105,7 @@
   },
   "dependencies": {
     "@apollo/client": "^3.2.1",
+    "@module-federation/runtime": "^2.0.0",
     "classnames": "^2.2.5",
     "core-js": "^3.26.1",
     "final-form": "^4.18.2",
@@ -148,4 +149,4 @@
     "redux-observable": "^1.2.0",
     "rxjs": "^6.6.3"
   }
-}
+}

src/components/EntitlementLoader.js

@@ -1,10 +1,11 @@
 import { useEffect, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { getInstance } from '@module-federation/runtime';
 import { useStripes } from '../StripesContext';
 import { ModulesContext, useModules, modulesInitialState } from '../ModulesContext';
-import loadRemoteComponent from '../loadRemoteComponent';
 import { loadEntitlement } from './loadEntitlement';
 
+
 /**
  * preloadModules
  * Loads each module code and sets up its getModule function.
@@ -16,14 +17,15 @@ import { loadEntitlement } from './loadEntitlement';
  * @param {array} remotes
  * @returns {app: [], plugin: [], settings: [], handler: []}
  */
+
 export const preloadModules = async (stripes, remotes) => {
   const modules = { app: [], plugin: [], settings: [], handler: [] };
 
   try {
     const loaderArray = [];
     remotes.forEach(remote => {
-      const { name, location } = remote;
-      loaderArray.push(loadRemoteComponent(location, name)
+      const { name } = remote;
+      loaderArray.push(getInstance().loadRemote(`${name}/MainEntry`)
         .then((module) => {
           remote.getModule = () => module.default;
         })
@@ -172,6 +174,10 @@ const EntitlementLoader = ({ children }) => {
     const controller = new AbortController();
     const signal = controller.signal;
     if (okapi?.discoveryUrl) {
+      // ENABLE MOD FED DEBUGGING
+      localStorage.setItem('FEDERATION_DEBUG', 'true');
+
+
       // fetches the list of registered apps/metadata,
       // loads icons and translations, then module code,
       // ultimately stores the result in the modules state to pass down into the modules context.
@@ -195,16 +201,23 @@ const EntitlementLoader = ({ children }) => {
             handleRemoteModuleError(stripes, `Error loading remote module assets (icons, translations, sounds): ${e}`);
           }
 
+          const remotesToRegister = remotes.map(remote => ({
+            name: remote.name, entry: remote.location
+          }));
+
+          getInstance().registerRemotes(remotesToRegister);
+
           try {
             // load module code - this loads each module only once and up `getModule` so that it can be used sychronously.
-            cachedModules = await preloadModules(stripes, remotesWithLoadedAssets);
+            cachedModules = await preloadModules(stripes, remotesWithLoadedAssets, remotesToRegister);
           } catch (e) {
             handleRemoteModuleError(stripes, `error loading remote modules: ${e}`);
           }
 
           setRemoteModules(cachedModules);
         }
       };
+
       fetchRegistry();
     }
     return () => {

src/components/EntitlementLoader.test.js

@@ -4,7 +4,7 @@ import { okapi } from 'stripes-config';
 import EntitlementLoader, { preloadModules, loadModuleAssets } from './EntitlementLoader';
 import { StripesContext } from '../StripesContext';
 import { ModulesContext, useModules, modulesInitialState as mockModuleInitialState } from '../ModulesContext';
-import loadRemoteComponent from '../loadRemoteComponent';
+import { loadRemote, registerRemotes } from '@module-federation/runtime';
 import { loadEntitlement } from './loadEntitlement';
 
 jest.mock('stripes-config');

src/components/loadEntitlement.js

@@ -4,7 +4,7 @@ import { stripesHubAPI } from '../constants';
 export const loadEntitlement = async (discoveryUrl, signal) => {
   let registry = {};
   const discovery = await localforage.getItem(stripesHubAPI.REMOTE_LIST_KEY);
-  if (discovery) {
+  if (discovery && discovery.length !== 0) {
     registry = { discovery };
   } else if (discoveryUrl) {
     try {
@@ -18,7 +18,7 @@ export const loadEntitlement = async (discoveryUrl, signal) => {
       // it's present...)
       registry.discovery = registryData?.discovery.filter((entry) => entry.name !== stripesHubAPI.HOST_APP_NAME);
 
-      await localforage.setItem(stripesHubAPI.REMOTE_LIST_KEY, registry.discovery);
+      // await localforage.setItem(stripesHubAPI.REMOTE_LIST_KEY, registry.discovery);
     } catch (e) {
       if (e.name !== 'AbortError') {
         console.error('Discovery fetch error:', e); // eslint-disable-line no-console
@@ -39,7 +39,7 @@ export const loadEntitlement = async (discoveryUrl, signal) => {
     remote.origin = url.origin;
     const segments = url.href.split('/');
     segments.pop();
-    const hrefWithoutFilename = segments.join('/')
+    const hrefWithoutFilename = segments.join('/');
     remote.assetPath = hrefWithoutFilename;
   });
   return Promise.resolve(registry?.discovery);

src/loginServices.js

@@ -317,14 +317,14 @@ export async function loadTranslations(store, locale, defaultTranslations = {})
   const res = await fetch(translationUrl.href)
     .then((response) => {
       if (response.ok) {
-        response.json().then((stripesTranslations) => {
+        return response.json().then((stripesTranslations) => {
           store.dispatch(setTranslations(Object.assign(stripesTranslations, defaultTranslations)));
           store.dispatch(setLocale(locale));
         });
+      } else {
+        return Promise.reject(new Error(`Could not load translations from ${translationsUrl}`));
       }
     });
-
-  return res;
 }
 
 /**