module-federation / core

Module Federation is a concept that allows developers to share code and resources across multiple JavaScript applications
https://module-federation.io/
MIT License
1.27k stars 182 forks source link

The remote module is missing on the Window when running in the sandbox of the micro-frontend framework micro-app. #2663

Open zhangxilong-43 opened 1 week ago

zhangxilong-43 commented 1 week ago

Describe the bug

I load sub-application app_1 in a container based on the micro-frontend framework micro-app, and app_1 uses module federation to obtain the remote module of sub-application app_2. Both sub-applications app_1 and app_2 can run independently, and module federation is effective; When app_2 is loaded in the container, it can also run normally; But after loading app_1 in the container, app_1 will report an error where it uses the remote module.

from react.development.js:1409's error: Uncaught TypeError: Cannot read properties of undefined (reading 'get') while loading "./Page" from webpack/container/reference/app_2

This error from app_2's webpack.config.js; I don't understand why window.app_2 doesn't exist The following is its module federation configuration:

new ModuleFederationPlugin({ name: 'app_1', filename: 'remoteEntry.js', remotes: { // 为什么要这样写?详见: https://github.com/module-federation/module-federation-examples/issues/1142 app_2:promise new Promise(resolve => { const remoteUrl = 'http://127.0.0.1:3002/remoteEntry.js' const script = document.createElement('script') script.src = remoteUrl script.onload = () => { console.log(window, window.rawWindow, window.app_2, 'app_2') const proxy = { get: (request) => window.app_2.get(request), init: (arg) => { try { return window.app_2.init(arg) } catch(e) { console.log('remote container already initialized') } } } resolve(proxy) } document.head.appendChild(script); }) }, shared: { ...deps, 'react-router-dom': { singleton: true, }, 'react-dom': { singleton: true, }, react: { singleton: true, }, }, }),

Reproduction

https://github.com/zhangxilong-43/module_federation_case/tree/master

Used Package Manager

pnpm

System Info

macOS

Validations

ScriptedAlchemy commented 1 week ago

use a runtime plugin instead of promise new promise.

    app_2: `app_2@http://127.0.0.1:3002/remoteEntry.js`

https://module-federation.io/plugin/dev/index.html

You can also set the library type if the default var is unreliable.

library: { type: 'window', name: 'app_2' },

ScriptedAlchemy commented 5 days ago

use the beforeRequest hook, you can look in module federation examples repo at runtime-plugin folder

zhangxilong-43 commented 3 days ago

use the beforeRequest hook, you can look in module federation examples repo at runtime-plugin folder

THX. However, the following error occurred: ` Error: [ Federation Runtime ]: Unable to use the app_2's 'http://127.0.0.1:3002/remoteEntry.js' URL with app_2's globalName to get remoteEntry exports. Possible reasons could be:

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

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

`

So, how should I modify the configuration when the module federation throws such an error?