"Failed to fetch" error when trying to fetch the manifest of an offline remote.

[patricklafrance]

Describe the bug

When trying to fetch the manifest file of a remote with the following configuration:

import ModuleFederation from "@module-federation/enhanced/webpack";

new ModuleFederation.ModuleFederationPlugin({
    name: "host",
    remotes: {
        "remote1": "remote1@http://localhost:8081/mf-manifest.json"
    }
})

If the remote is offline, a fetch error is thrown:

[ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: [ Federation Runtime ]: Failed to get manifestJson for remote1. The manifest URL is http://localhost:8081/mf-manifest.json. Please ensure that the manifestUrl is accessible.

Error message:

TypeError: Failed to fetch

Even if a errorLoadRemote hook is configured to catch the error, it still fails:

export default function () {

    const getErrorMessage = (id, error) => `remote ${id} is offline due to error: ${error}`;
  
    const getModule = (pg, from) => {
      if (from === 'build') {
        return () => ({
          __esModule: true,
          default: pg,
        });
      } else {
        return {
          default: pg,
        };
      }
    };
  
    return {
      name: 'offline-remote-plugin',
      errorLoadRemote({id, error, from}) {
        console.error(id, 'offline');
        const pg = function () {
          console.error(id, 'offline', error);
          return getErrorMessage(id, error);
        };
  
        return getModule(pg, from);
      },
    };
  }

import ModuleFederation from "@module-federation/enhanced/webpack";
import { createRequire } from "node:module";

const require = createRequire(import.meta.url);

new ModuleFederation.ModuleFederationPlugin({
    name: "host",
    remotes: {
        "remote1": "remote1@http://localhost:8081/mf-manifest.json"
    },
    runtimePlugins: [require.resolve("./offlineRemotePlugin.js")]
})

If the error is catched when using the loadRemote function, it also fails:

await loadRemote("remote1/HelloWorld.jsx")
    .then(mod => {
        console.log("Loaded remote 1", mod);
    })
    .catch(() => console.log("Failed to load remote 1"));

BUT, if I update the remote configuration to fetch a remoteEntry.js file instead of a manifest file, everything works as expected, the error is catched by either the errorLoadRemote hook or the catch handler:

import ModuleFederation from "@module-federation/enhanced/webpack";

new ModuleFederation.ModuleFederationPlugin({
    name: "host",
    remotes: {
        "remote1": "remote1@http://localhost:8081/remoteEntry.js"
    }
})

Reproduction

https://github.com/patricklafrance/mf-enhanced-manifest-bug

Used Package Manager

pnpm

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 13.30 GB / 31.70 GB
  Binaries:
    Node: 21.7.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: 124.0.6367.61
    Edge: Chromium (123.0.2420.97)

Validations

• Read the docs.
• Read the common issues list.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Module federation issue and not a framework-specific issue.
• The provided reproduction is a minimal reproducible example of the bug.

[ScriptedAlchemy]

@2heal1 have idea here or is there hook for failed manifest load?

[antondrozd]

Facing the same issue. Can't use manifests because of this :(

[danieloprado]

After version 0.0.17 is not possible to use remoteEntry.js neither, even no one importing it 🥲

[lestersconyers]

Same issue. Following.

[danieloprado]

After version 0.0.17 is not possible to use remoteEntry.js neither, even no one importing it 🥲

Maybe is related with #2672

[github-actions]

Stale issue message

[patricklafrance]

@ScriptedAlchemy should this issue really be closed?

[todorgrigorov]

Hey, this is still a blocking issue for us. Any updates?

[petrosD93]

Any update on this and how we can handle such issue?

[harshalhirve]

I am facing issue:
Failed to get manifest. #RUNTIME-003 while using MODERN.JS SSR MICRO-FRONTENDS.
@ScriptedAlchemy : Request if you can please guide on this ?
I am trying to refer to: https://github.com/module-federation/core/tree/main/apps/modernjs-ssr

[GiorgiSalukvadze]

@harshalhirve any updates? i have same issue

[ph1p]

In case anyone stumbles across this thread. Just check CORS. With Webpack Dev Server you only need to add headers.

Example:

devServer: {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
  }
}