Fallback plugin :: errorLoadRemote almost working, not returning module correctly

[Cybernetixs]

I would appreciate any help with this.

Scenario: The MFE stuff works fine when the environments are up and running as expected, however I need to make sure things are handled "gracefully" if/when the mf-manifest.json cannot be retrieved from the server because that throws errors prior to it arriving at the Errorboundary of the loading component.

So I used the fallback hook and Component loading code from the documentation at :
https://module-federation.io/blog/error-load-remote.html

It "almost works" but I am getting this error thrown before it gets to the container's own ErrorBoundary:

1. "Uncaught runtime errors" across the screen
2. And in the dev tools console it shows this:

Warning: lazy: Expected the result of a dynamic import() call. Instead received: () => ({
__esModule: true,
default: FallbackComponent
})

Which is exactly what is being returned from the fallback plugin in the documentation.
It sounds like it could be something simple.

I've tried changing the return a bit
a) return FallBackComponent;
and also
b) return () => FallbackComponent;

but only the text after "Instead received...." error changes slightly

Once the error is cleared from the screen, the component is showing the Errorboundary correctly

Code snippets:

Fallback plugin:

const fallbackPlugin = (config: FallbackConfig = {}): FederationRuntimePlugin => {
const { errorMessage = 'Module loading failed, please try again later' } = config;

return {
name: 'fallback-plugin',
async errorLoadRemote(args) {
// Handle component loading errors
if (args.lifecycle === 'onLoad') {
const React = await import('react');

    // Create a fallback component with error message
    const FallbackComponent = React.memo(() => {
      return React.createElement(
        'div',
        {
          style: {
            padding: '16px',
            border: '1px solid #ffa39e',
            borderRadius: '4px',
            backgroundColor: '#fff1f0',
            color: '#cf1322',
          },
        },
        errorMessage,
      );
    });

    FallbackComponent.displayName = 'ErrorFallbackComponent';


    return () => ({
      __esModule: true,
      default: FallbackComponent,
    });
  }

      // PLUGIN SEEMS TO BE WORKING FINE EXCEPT FOR THAT RETURN
      // which throws "Uncaught runtime errors" across the screen and this in the console
      //  Warning: lazy: Expected the result of a dynamic import() call. Instead received: () => ({
      //   __esModule: true,
       //  default: FallbackComponent
       //  })
    
    

  // Handle entry file loading errors
  if (args.lifecycle === 'afterResolve') {
    console.log(`AFTER RESOLVE :: IN FALLBACK`);

    // Use predefined backup manifest
    const backupManifest = {
      id: 'fallback',
      name: 'fallback',
      metaData: {
        name: 'fallback',
        type: 'app',
        buildInfo: {
          buildVersion: 'local',
          buildName: 'fallback',
        },
        remoteEntry: {
          name: 'mf-manifest.json',
          path: '',
          type: 'global',
        },
        types: {
          path: '',
          name: '',
          zip: '@mf-types.zip',
          api: '@mf-types.d.ts',
        },
        globalName: 'fallback',
        pluginVersion: '1',
        prefetchInterface: false,
        publicPath: '/',
      },
      shared: [],
      remotes: [],
      exposes: [],
    };
    return backupManifest;
  }
  console.error('Failed to load manifest:');
  return args;
},

};
};
export default fallbackPlugin;

Loader Component code:
// This works fine when network is up, and it does catch the error in the Errorboundary but only AFTER the plugin error is thrown.

import React, { FC, Suspense } from 'react';
import { loadRemote } from '@module-federation/runtime';
import { ErrorBoundary } from 'react-error-boundary';

const Remote1AppWithLoadRemote = React.lazy(() => loadRemote('myapp/MfeApp'));
const Remote1AppWithErrorBoundary = React.forwardRef<any, any>((props, ref) => (
<ErrorBoundary fallback={

Error loading Remote App...

}>
<Suspense fallback={

Loading Remote1App...

}>
<Remote1AppWithLoadRemote {...props} ref={ref} />


));

export const MfeContainer: FC = () => {

return (
<> <Remote1AppWithErrorBoundary /> </>);

};

export default MfeContainer;

[ScriptedAlchemy]

try without the ()=>

so just return {
default: thing
}

and see if that works. or look at the nextjs mf runtime plugin and how we deal with it

[Cybernetixs]

Yes, that worked perfectly. Thank you !