Module Federation requests to wrong url to load remotes. #3070

oytuncoban · 2024-10-14T02:32:53Z

Describe the bug

I have this rsbuild.config.js for my shell app which is migrated from Vite to use MF 2.0

import { pluginModuleFederation } from "@module-federation/rsbuild-plugin";
import { defineConfig, loadEnv } from "@rsbuild/core";
import { pluginReact } from "@rsbuild/plugin-react";
import { pluginSass } from "@rsbuild/plugin-sass";
import { dependencies } from "./package.json";

const { publicVars } = loadEnv({ prefixes: ["VITE_"] });

export default defineConfig({
	server: {
		port: 5173,
	},
	html: {
		template: "./index.html",
	},
	source: {
		define: publicVars,
		entry: {
			index: "./src/main.js",
		},
	},
	plugins: [
		pluginSass(),
		pluginReact(),
		pluginModuleFederation({
			name: "shell",
			remotes: {
				remote: "remote@http://localhost:3000/mf-manifest.json",
			},
			shared: {
				...dependencies,
				react: {
					eager: true,
					singleton: true,
					requiredVersion: dependencies.react,
				},
				"react-dom": {
					eager: true,
					singleton: true,
					requiredVersion: dependencies["react-dom"],
				},
				"react-router-dom": {
					eager: true,
					singleton: true,
					requiredVersion: dependencies["react-router-dom"],
				},
			},
		}),
	],
});

and result of requesting to http://localhost:3000/mf-manifest.json (shell app requests to the correct url and gets the correct response which I do when I request via browser):

{
  "id": "remote",
  "name": "remote",
  "metaData": {
    "name": "remote",
    "type": "app",
    "buildInfo": {
      "buildVersion": "0.0.0",
      "buildName": "remote-ui"
    },
    "remoteEntry": {
      "name": "static/js/remote.js",
      "path": "",
      "type": "global"
    },
    "types": {
      "path": "",
      "name": "",
      "zip": "@mf-types.zip",
      "api": "@mf-types.d.ts"
    },
    "globalName": "remote",
    "pluginVersion": "0.6.9",
    "publicPath": "/",
    "prefetchInterface": false
  },
  "shared": [
    {
      "id": "remote:react-dom",
      "name": "react-dom",
      "version": "18.3.1",
      "singleton": true,
      "requiredVersion": "^18.3.1",
      "assets": {
        "js": {
          "async": [
            "static/js/async/src_App_tsx.js",
            "static/js/async/src_bootstrap_tsx-webpack_sharing_consume_default_react-dom_react-dom-src_App_css.js",
            "static/js/lib-react.js"
          ],
          "sync": [
            "static/js/lib-react.js",
            "static/js/vendors-_module-federation_runtime_rspack_js_data_text_javascript_import___module_federation_-84fe95.js",
            "static/js/index.js",
            "static/js/remote.js"
          ]
        },
        "css": {
          "async": [
            "static/css/async/src_bootstrap_tsx-webpack_sharing_consume_default_react-dom_react-dom-src_App_css.css",
            "static/css/async/__federation_expose_RemoteApp.css"
          ],
          "sync": []
        }
      }
    },
    {
      "id": "remote:react",
      "name": "react",
      "version": "18.3.1",
      "singleton": true,
      "requiredVersion": "^18.3.1",
      "assets": {
        "js": {
          "async": [
            "static/js/async/src_App_tsx.js",
            "static/js/async/src_bootstrap_tsx-webpack_sharing_consume_default_react-dom_react-dom-src_App_css.js",
            "static/js/lib-react.js"
          ],
          "sync": [
            "static/js/lib-react.js",
            "static/js/vendors-_module-federation_runtime_rspack_js_data_text_javascript_import___module_federation_-84fe95.js",
            "static/js/index.js",
            "static/js/remote.js"
          ]
        },
        "css": {
          "async": [
            "static/css/async/src_bootstrap_tsx-webpack_sharing_consume_default_react-dom_react-dom-src_App_css.css",
            "static/css/async/__federation_expose_RemoteApp.css"
          ],
          "sync": []
        }
      }
    }
  ],
  "remotes": [],
  "exposes": [
    {
      "id": "remote:RemoteApp",
      "name": "RemoteApp",
      "assets": {
        "js": {
          "sync": [
            "static/js/lib-react.js",
            "static/js/async/src_App_tsx.js"
          ],
          "async": []
        },
        "css": {
          "sync": [
            "static/css/async/__federation_expose_RemoteApp.css"
          ],
          "async": []
        }
      },
      "path": "./RemoteApp"
    }
  ]
}

We expect shell app to request for "http://localhost:3000/static/js/async/src_App_tsx.js" but instead it requests for "http://localhost:5173/static/js/async/src_App_tsx.js" and this results in the index.html content for shell app which is not a js. And http://localhost:3000/static/js/async/src_App_tsx.js correctly returns the remote component.

This is thrown as error on console:
Uncaught (in promise) Error: [ Federation Runtime ]:
Unable to use the muhaberat's '/static/js/remote.js' URL with remote's globalName to get remoteEntry exports.
Possible reasons could be:

  1. '/static/js/remote.js' is not the correct URL, or the remoteEntry resource or name is incorrect.

  2. remote cannot be used to get remoteEntry exports in the window object.

while loading "./RemoteApp" from webpack/container/reference/remote

Notes:
Remote Component is rendered under a dynamic route handled by react-router-dom:
{BASE_URL}/:id/remote

Reproduction

.

Used Package Manager

pnpm

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M3
    Memory: 312.14 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
    Yarn: 4.0.2 - /opt/homebrew/bin/yarn
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
    pnpm: 9.7.0 - /opt/homebrew/bin/pnpm
  Browsers:
    Brave Browser: 108.1.46.144
    Chrome: 129.0.6668.91
    Edge: 129.0.2792.89
    Safari: 18.0.1

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.

The text was updated successfully, but these errors were encountered:

oytuncoban · 2024-10-14T02:51:16Z

UPDATE

In order to make it work, I had to re-configure publicPath for rspack:

// rsbuild.config.js (shell)
        ...
	tools: {
		rspack: {
			output: {
				uniqueName: "shell",
				publicPath: "/",
			},
		},
	},
	...

// rsbuild.config.js (remote)
        ...
	tools: {
		rspack: {
			output: {
				uniqueName: "remote",
				publicPath: "auto",
			},
		},
	},
	...

ScriptedAlchemy · 2024-10-14T23:49:36Z

yep, setting public path resolves it.

ScriptedAlchemy · 2024-10-14T23:50:01Z

@chenjiahan we should make "auto" the default when MF is detected.

chenjiahan · 2024-10-15T02:11:51Z

The @module-federation/rsbuild-plugin already set auto by default, see:

https://github.com/module-federation/core/blob/main/packages/rsbuild-plugin/src/cli/index.ts#L151-L156

@nyqykk can you help to check this issue?

oytuncoban · 2024-10-15T02:57:16Z

The @module-federation/rsbuild-plugin already set auto by default, see:

https://github.com/module-federation/core/blob/main/packages/rsbuild-plugin/src/cli/index.ts#L151-L156

@nyqykk can you help to check this issue?

This still doesn't explain why we have to set it to "/" on shell apps. Can you help me to understand that behaviour?

ScriptedAlchemy · 2024-10-15T05:06:13Z

If you provide a repo we can take a look

nyqykk · 2024-10-15T06:24:52Z

The @module-federation/rsbuild-plugin already set auto by default, see: @module-federation/rsbuild-plugin 默认情况下已设置为 auto，请参阅：
https://github.com/module-federation/core/blob/main/packages/rsbuild-plugin/src/cli/index.ts#L151-L156
@nyqykk can you help to check this issue?您能帮忙检查这个问题吗？

This still doesn't explain why we have to set it to "/" on shell apps. Can you help me to understand that behaviour?这仍然无法解释为什么我们必须在 shell 应用程序上将其设置为 “/”。您能帮我理解这种行为吗？

can you provide a repo?

oytuncoban · 2024-10-16T08:39:20Z

The @module-federation/rsbuild-plugin already set auto by default, see: @module-federation/rsbuild-plugin 默认情况下已设置为 auto，请参阅：
https://github.com/module-federation/core/blob/main/packages/rsbuild-plugin/src/cli/index.ts#L151-L156
@nyqykk can you help to check this issue?您能帮忙检查这个问题吗？

This still doesn't explain why we have to set it to "/" on shell apps. Can you help me to understand that behaviour?这仍然无法解释为什么我们必须在 shell 应用程序上将其设置为 “/”。您能帮我理解这种行为吗？

can you provide a repo?

My apologies folks,
While creating a reproduction repo, I've noticed that setting publicPath to "/" has nothing to do with the issue.

But remotes still should explicitly set publicPath to "auto" in order to work. Since setting it to "auto" also for shell doesn't cause any issues, plugin can ensure publicPath is set to "auto" no matter what. I think this is not the case rn.

ScriptedAlchemy added the resolved Question where solution was of community use label Oct 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Module Federation requests to wrong url to load remotes. #3070

Module Federation requests to wrong url to load remotes. #3070

oytuncoban commented Oct 14, 2024 •

edited

Loading

oytuncoban commented Oct 14, 2024 •

edited

Loading

ScriptedAlchemy commented Oct 14, 2024

ScriptedAlchemy commented Oct 14, 2024

chenjiahan commented Oct 15, 2024

oytuncoban commented Oct 15, 2024

ScriptedAlchemy commented Oct 15, 2024

nyqykk commented Oct 15, 2024

oytuncoban commented Oct 16, 2024

Module Federation requests to wrong url to load remotes. #3070

Module Federation requests to wrong url to load remotes. #3070

Comments

oytuncoban commented Oct 14, 2024 • edited Loading

Describe the bug

Reproduction

Used Package Manager

System Info

Validations

oytuncoban commented Oct 14, 2024 • edited Loading

ScriptedAlchemy commented Oct 14, 2024

ScriptedAlchemy commented Oct 14, 2024

chenjiahan commented Oct 15, 2024

oytuncoban commented Oct 15, 2024

ScriptedAlchemy commented Oct 15, 2024

nyqykk commented Oct 15, 2024

oytuncoban commented Oct 16, 2024

oytuncoban commented Oct 14, 2024 •

edited

Loading

oytuncoban commented Oct 14, 2024 •

edited

Loading