Loading failing remotes throws Runtime Error

[oytuncoban]

Hey,
I was using the old Module Federation ('webpack/lib/container/ModuleFederationPlugin'), and decided to migrate to the new Module Federation 2.0.

However, in the previous MF version, I had to implement some ErrorBoundary components:

ErrorBoundary:

import React from 'react';

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null, errorInfo: null };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    this.setState({
      error: error,
      errorInfo: errorInfo,
    });
    console.error('ErrorBoundary caught an error', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div>
          <h1>Something went wrong.</h1>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo?.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

DynamicImport:

import React, { Suspense } from 'react';
import i18n from '../../helpers/i18n';
import queryClient from '../../queryClient';
import Loading from '../Loading';
import ErrorBoundary from './ErrorBoundary'; // Assuming ErrorBoundary is in the same directory

const sharedDeps = {
  i18n,
  queryClient,
};

const DynamicImport = ({ ImportRemoteApp, LoadingComponent = Loading }) => {
  return (
    <ErrorBoundary>
      <Suspense fallback={<LoadingComponent />}>
        <ImportRemoteApp {...sharedDeps} />
      </Suspense>
    </ErrorBoundary>
  );
};

export default DynamicImport;

Usage of DynamicImport:

import React from 'react';
import DynamicImport from '../components/DynamicImportComponent/DynamicImportComponent';

const #RemoteComponentName#> = React.lazy(() =>
  import('#RemoteModuleName#/#RemoteComponentName#').catch((error) => {
    console.error(`Failed to load module: ${'#RemoteModuleName#/#RemoteComponentName#'}`);
    console.error(error);
    return { default: <div>
      <h1>Something went wrong.</h1>
      <pre>{error?.message}</pre>
    </div> };
  })
);

const Component = () => {
  return <DynamicImport ImportRemoteApp={#RemoteComponentName#} />;
};

export default Component;

With this method, I was able to show Error UI when one of the remote is failing and has errors, or unavailable.

With Module Federation 2.0 I now get this error thrown by @module-federation/enhanced:

[ Federation Runtime ]: 
      Unable to use the **remote_name**'s 'http://localhost:3001/remoteEntry.js' URL with **remote_name**'s globalName to get remoteEntry exports.
      Possible reasons could be:

      1. 'http://localhost:3001/remoteEntry.js' is not the correct URL, or the remoteEntry resource or name is incorrect.

      2. muhakemat_davalar cannot be used to get remoteEntry exports in the window object.
    at error (http://localhost:3000/main.js:2176:11)
    at Object.assert (http://localhost:3000/main.js:2168:9)
    at http://localhost:3000/main.js:196:15

The versions of used packages:
webpack: ^5.57.1,
@module-federation/enhanced: ^0.2.1,

Example remotes object that I use:

{
remote_app1: "RemoteApp1Name@http://remote-url-1.domain.com/remoteEntry.js",
remote_app2: "RemoteApp2Name@http://remote-url-2.domain.com/remoteEntry.js"
}

Issue is that, webpack throws error and I cannot use my website as expected. Main goal is to keep Host(Shell) app to be continue working even if a remote fails. Users should be able to use other remotes and shell app layout.

How should I get the old behavior? Or, what should I do to dynamically load the hosts on runtime?
How can I learn the best practices?

Thanks in advance.

[oytuncoban]

I wanted to implement the Dynamic System Host example, but, the example throwing the same error with rspack or webpack builds.

Update: My bad, remotes of the example weren't configured to allow headers. After the configuration, it worked.

Is there any way without editing the whole codebase according to the dynamic load with init() and loadRemote()?