WP5 Module Federation TS Fallback Design

components.ts

import { designSystemImport } from './designSystem';

const registerCommonComponents = async () => {
  const {
    provideDesignSystem,
    componentA,
    componentB,
  } = await designSystemImport();

  provideDesignSystem().register(
    componentA(),
    componentB(),
  );
};

designSystem.ts

/**
 * Zero design system import
 *
 * @public
 * @remarks
 * Attempts to use a module federation version of zero before falling back to the version that was bundled with the app.
 */
export async function designSystemImport(): Promise<any> {
  let type: ResourceType = ResourceType.remote;
  try {
    return await import(
      /* webpackChunkName: "foundation-zero" */
      'foundationZero/ZeroDesignSystem'
    );
  } catch (e) {
    logger.info(
      `Please note remoteEntry.js load errors are expected if module federated dependencies are offline. Falling back to locally bundled versions.`
    );
    type = ResourceType.local;
    return await import(
      /* webpackChunkName: "foundation-zero" */
      '@genesislcap/foundation-zero'
    );
  } finally {
    logger.debug(`Using '${type}' version of foundation-zero`);
  }
}

package.json

"dependencies": {
    "@genesislcap/foundation-zero": "^1.0.0",
}

Not that it's relevant to the pattern here... but if you're curious, the awesome https://github.com/microsoft/fast/ project is providing the baseline for the components and the design system in this example. If you haven't used it, check it out, Rob and team have done an amazing job on FAST.