Actualmente estoy explorando micro frontend con Module Federation. Acabo de bifurcar un sandbox, lo probé con éxito cuando ambos módulos estaban disponibles. Tiene 2 módulos, app1 como host y app2 como componente remoto . Pero como creo que cada módulo en la federación de módulos debería ser independiente, traté de hacer que la aplicación 2 no app2 disponible porque no la inicié. Por lo tanto, recibí un error cuando app1 , terminó de cargarse y mostró el respaldo de React's Suspense , pero milisegundos después, se queda en blanco porque hay un error que no puedo recuperar, por lo que realmente no lo sé.

Después de eso, probé los controles remotos dinámicos basados en promesas de Webpack, luego mi webpack-config.js se vuelve así:

 const HtmlWebpackPlugin = require('html-webpack-plugin'); const { ModuleFederationPlugin } = require('webpack').container; const ExternalTemplateRemotesPlugin = require('external-remotes-plugin'); const path = require('path'); module.exports = { entry: './src/index', mode: 'development', devServer: { static: path.join(__dirname, 'dist'), port: 3001, }, output: { publicPath: 'auto', }, module: { rules: [ { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['@babel/preset-react'], }, }, ], }, plugins: [ new ModuleFederationPlugin({ name: 'app1', remotes: { app2: Promise((resolve) => { const urlParams = new URLSearchParams(window.location.search); const version = urlParams.get('app1VersionParam'); // This part depends on how you plan on hosting and versioning your federated modules const remoteUrlWithVersion = '[app2Url]' + '/remoteEntry.js'; const script = document.createElement('script'); script.src = remoteUrlWithVersion; script.onload = () => { // the injected script has loaded and is available on window // we can now resolve this Promise const proxy = { get: (request) => window.app1.get(request), init: (arg) => { try { return window.app1.init(arg); } catch (e) { console.log('remote container already initialized'); } }, }; resolve(proxy); }; // inject this script with the src set to the versioned remoteEntry.js document.head.appendChild(script); }), // "app2@[app2Url]/remoteEntry.js", }, shared: { react: { singleton: true }, 'react-dom': { singleton: true } }, }), new ExternalTemplateRemotesPlugin(), new HtmlWebpackPlugin({ template: './public/index.html', }), ], };

Intenté iniciar la app1 nuevamente, luego aparece este error:

 $ webpack serve [webpack-cli] Failed to load '/home/projects/github-rl5uyr/app1/webpack.config.js' config [webpack-cli] TypeError: undefined is not a promise at Promise (<anonymous>) at Object.eval (/home/projects/github-rl5uyr/app1/webpack.config.js:32:15) at Object.function (https://github-rl5uyr.w.staticblitz.com/blitz.01faa899fac41642342f4b7113feacabea334fa1.js:11:114831) at Module._compile (https://github-rl5uyr.w.staticblitz.com/blitz.01faa899fac41642342f4b7113feacabea334fa1.js:6:167880) at Object.Module._extensions..js (https://github-rl5uyr.w.staticblitz.com/blitz.01faa899fac41642342f4b7113feacabea334fa1.js:6:168239) at Module.load (https://github-rl5uyr.w.staticblitz.com/blitz.01faa899fac41642342f4b7113feacabea334fa1.js:6:166317) at Function.Module._load (https://github-rl5uyr.w.staticblitz.com/blitz.01faa899fac41642342f4b7113feacabea334fa1.js:6:163857) at Module.require (https://github-rl5uyr.w.staticblitz.com/blitz.01faa899fac41642342f4b7113feacabea334fa1.js:6:166635) at i (https://github-rl5uyr.w.staticblitz.com/blitz.01faa899fac41642342f4b7113feacabea334fa1.js:6:427483) at _0x5301a6 (https://github-rl5uyr.w.staticblitz.com/blitz.01faa899fac41642342f4b7113feacabea334fa1.js:11:114450)

Entonces, ¿las federaciones de módulos pueden ejecutarse de manera independiente? Si no, ¿cuál es la diferencia real como dependencias de biblioteca normales de la interfaz monolítica en lugar de esta micro interfaz sofisticada, que supuse que debería poder funcionar de forma independiente como microservicios?