module-federation · ScriptedAlchemy · Jul 15, 2020 · Jul 9, 2020 · Jul 9, 2020 · Jul 9, 2020
diff --git a/advanced-api/automatic-vendor-sharing/app1/package.json b/advanced-api/automatic-vendor-sharing/app1/package.json
@@ -8,7 +8,7 @@
     "babel-loader": "8.1.0",
     "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
     "serve": "11.3.2",
-    "webpack": "5.0.0-beta.18",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   },

diff --git a/advanced-api/automatic-vendor-sharing/app1/public/index.html b/advanced-api/automatic-vendor-sharing/app1/public/index.html
@@ -1,7 +1,5 @@
 <html>
-  <head>
-    <script src="http://localhost:3002/remoteEntry.js"></script>
-  </head>
+  <head> </head>
   <body>
     <div id="root"></div>
   </body>

diff --git a/advanced-api/automatic-vendor-sharing/app1/webpack.config.js b/advanced-api/automatic-vendor-sharing/app1/webpack.config.js
@@ -38,10 +38,9 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: "app1",
-      library: { type: "var", name: "app1" },
       filename: "remoteEntry.js",
       remotes: {
-        app2: "app2",
+        app2: "app2@http://localhost:3002/remoteEntry.js",
       },
       exposes: {
         "./Button": "./src/Button",

diff --git a/advanced-api/automatic-vendor-sharing/app2/package.json b/advanced-api/automatic-vendor-sharing/app2/package.json
@@ -8,7 +8,7 @@
     "babel-loader": "8.1.0",
     "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
     "serve": "11.3.2",
-    "webpack": "5.0.0-beta.18",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   },

diff --git a/advanced-api/automatic-vendor-sharing/app2/public/index.html b/advanced-api/automatic-vendor-sharing/app2/public/index.html
@@ -1,7 +1,5 @@
 <html>
-  <head>
-    <script src="http://localhost:3001/remoteEntry.js"></script>
-  </head>
+  <head> </head>
   <body>
     <div id="root"></div>
   </body>

diff --git a/advanced-api/automatic-vendor-sharing/app2/webpack.config.js b/advanced-api/automatic-vendor-sharing/app2/webpack.config.js
@@ -38,10 +38,9 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: "app2",
-      library: { type: "var", name: "app2" },
       filename: "remoteEntry.js",
       remotes: {
-        app1: "app1",
+        app1: "app1@http://localhost:3001/remoteEntry.js",
       },
       exposes: {
         "./Button": "./src/Button",

diff --git a/advanced-api/dynamic-remotes/app1/package.json b/advanced-api/dynamic-remotes/app1/package.json
@@ -8,7 +8,7 @@
     "babel-loader": "8.1.0",
     "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
     "serve": "11.3.2",
-    "webpack": "5.0.0-beta.18",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   },

diff --git a/advanced-api/dynamic-remotes/app1/src/App.js b/advanced-api/dynamic-remotes/app1/src/App.js
@@ -4,6 +4,7 @@ function loadComponent(scope, module) {
   return async () => {
     // Initializes the share scope. This fills it with known provided modules from this build and all remotes
     await __webpack_init_sharing__("default");
+
     const container = window[scope]; // or get the container somewhere else
     // Initialize the container, it may provide shared modules
     await container.init(__webpack_share_scopes__.default);

diff --git a/advanced-api/dynamic-remotes/app1/webpack.config.js b/advanced-api/dynamic-remotes/app1/webpack.config.js
@@ -33,7 +33,17 @@ module.exports = {
       // version is inferred from package.json
       // there is no version check for the required version
       // so it will always use the higher version found
-      shared: ["react", "react-dom"],
+      shared: {
+        react: {
+          import: "react", // the "react" package will be used a provided and fallback module
+          shareKey: "react", // under this name the shared module will be placed in the share scope
+          shareScope: "default", // share scope with this name will be used
+          singleton: true, // only a single version of the shared module is allowed
+        },
+        "react-dom": {
+          singleton: true, // only a single version of the shared module is allowed
+        },
+      },
     }),
     new HtmlWebpackPlugin({
       template: "./public/index.html",

diff --git a/advanced-api/dynamic-remotes/app2/package.json b/advanced-api/dynamic-remotes/app2/package.json
@@ -8,7 +8,7 @@
     "babel-loader": "8.1.0",
     "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
     "serve": "11.3.2",
-    "webpack": "5.0.0-beta.18",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   },

diff --git a/advanced-api/dynamic-remotes/app2/webpack.config.js b/advanced-api/dynamic-remotes/app2/webpack.config.js
@@ -33,14 +33,16 @@ module.exports = {
         "./Widget": "./src/Widget",
       },
       shared: {
-        "react-dom": "react-dom",
         moment: "^2.24.0",
         react: {
           import: "react", // the "react" package will be used a provided and fallback module
           shareKey: "react", // under this name the shared module will be placed in the share scope
           shareScope: "default", // share scope with this name will be used
           singleton: true, // only a single version of the shared module is allowed
         },
+        "react-dom": {
+          singleton: true, // only a single version of the shared module is allowed
+        },
       },
     }),
     new HtmlWebpackPlugin({

diff --git a/advanced-api/dynamic-remotes/app3/package.json b/advanced-api/dynamic-remotes/app3/package.json
@@ -8,7 +8,7 @@
     "babel-loader": "8.1.0",
     "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
     "serve": "11.3.2",
-    "webpack": "5.0.0-beta.18",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   },

diff --git a/advanced-api/dynamic-remotes/app3/webpack.config.js b/advanced-api/dynamic-remotes/app3/webpack.config.js
@@ -37,16 +37,21 @@ module.exports = {
       // version is inferred from package.json
       // there is no version check for the required version
       // so it will always use the higher version found
-      shared: [
-        "react",
-        "react-dom",
+      shared: {
+        react: {
+          import: "react", // the "react" package will be used a provided and fallback module
+          shareKey: "react", // under this name the shared module will be placed in the share scope
+          shareScope: "default", // share scope with this name will be used
+          singleton: true, // only a single version of the shared module is allowed
+        },
+        "react-dom": {
+          singleton: true, // only a single version of the shared module is allowed
+        },
         // adds moment as shared module
         // version is inferred from package.json
         // it will use the highest moment version that is >= 2.24 and < 3
-        {
-          moment: "^2.24.0",
-        },
-      ],
+        moment: "^2.24.0",
+      },
     }),
     new HtmlWebpackPlugin({
       template: "./public/index.html",

diff --git a/angular-universal-ssr/client-app/package.json b/angular-universal-ssr/client-app/package.json
@@ -40,7 +40,7 @@
     "ts-node": "8.3.0",
     "tslint": "6.1.2",
     "typescript": "3.9.6",
-    "webpack": "file:../patched_packages/webpack-5.0.0-beta.16.tgz",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12"
   }
 }
diff --git a/angular-universal-ssr/host-app/package.json b/angular-universal-ssr/host-app/package.json
@@ -46,7 +46,7 @@
     "ts-node": "8.3.0",
     "tslint": "6.1.2",
     "typescript": "3.9.6",
-    "webpack": "file:../patched_packages/webpack-5.0.0-beta.16.tgz",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12"
   }
 }
diff --git a/basic-host-remote/app1/package.json b/basic-host-remote/app1/package.json
@@ -9,7 +9,7 @@
     "bundle-loader": "0.5.6",
     "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
     "serve": "11.3.2",
-    "webpack": "5.0.0-beta.18",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   },

diff --git a/basic-host-remote/app1/public/index.html b/basic-host-remote/app1/public/index.html
@@ -1,7 +1,5 @@
 <html>
-  <head>
-    <script src="http://localhost:3002/remoteEntry.js"></script>
-  </head>
+  <head> </head>
   <body>
     <div id="root"></div>
   </body>

diff --git a/basic-host-remote/app1/webpack.config.js b/basic-host-remote/app1/webpack.config.js
@@ -31,14 +31,14 @@ module.exports = {
       },
     ],
   },
+  //http://localhost:3002/remoteEntry.js
   plugins: [
     new ModuleFederationPlugin({
       name: "app1",
-      library: { type: "var", name: "app1" },
       remotes: {
-        app2: "app2",
+        app2: "app2@http://localhost:3002/remoteEntry.js",
       },
-      shared: ["react", "react-dom"],
+      shared: { react: { singleton: true }, "react-dom": { singleton: true } },
     }),
     new HtmlWebpackPlugin({
       template: "./public/index.html",

diff --git a/basic-host-remote/app2/package.json b/basic-host-remote/app2/package.json
@@ -8,7 +8,7 @@
     "babel-loader": "8.1.0",
     "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
     "serve": "11.3.2",
-    "webpack": "5.0.0-beta.18",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   },

diff --git a/basic-host-remote/app2/webpack.config.js b/basic-host-remote/app2/webpack.config.js
@@ -32,7 +32,7 @@ module.exports = {
       exposes: {
         "./Button": "./src/Button",
       },
-      shared: ["react", "react-dom"],
+      shared: { react: { singleton: true }, "react-dom": { singleton: true } },
     }),
     new HtmlWebpackPlugin({
       template: "./public/index.html",

diff --git a/basic-host-remote/yarn.lock b/basic-host-remote/yarn.lock
diff --git a/bi-directional/app1/package.json b/bi-directional/app1/package.json
@@ -8,7 +8,7 @@
     "babel-loader": "8.1.0",
     "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
     "serve": "11.3.2",
-    "webpack": "5.0.0-beta.18",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   },

diff --git a/bi-directional/app1/public/index.html b/bi-directional/app1/public/index.html
@@ -1,7 +1,5 @@
 <html>
-  <head>
-    <script src="http://localhost:3002/remoteEntry.js"></script>
-  </head>
+  <head> </head>
   <body>
     <div id="root"></div>
   </body>

diff --git a/bi-directional/app1/src/bootstrap.js b/bi-directional/app1/src/bootstrap.js
@@ -0,0 +1,5 @@
+import App from "./App";
+import React from "react";
+import ReactDOM from "react-dom";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/bi-directional/app1/src/index.js b/bi-directional/app1/src/index.js
@@ -1,5 +1 @@
-import App from "./App";
-import React from "react";
-import ReactDOM from "react-dom";
-
-ReactDOM.render(<App />, document.getElementById("root"));
+import("./bootstrap");
diff --git a/bi-directional/app1/webpack.config.js b/bi-directional/app1/webpack.config.js
@@ -27,28 +27,29 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: "app1",
-      library: { type: "var", name: "app1" },
       filename: "remoteEntry.js",
       remotes: {
-        app2: "app2",
+        app2: "app2@http://localhost:3002/remoteEntry.js",
       },
       exposes: {
         "./Button": "./src/Button",
       },
       // sharing code based on the installed version, to allow for multiple vendors with different versions
-      shared: {
-        ...deps,
-        react: {
-          eager: true,
-          singleton: true,
-          requiredVersion: deps.react,
+      shared: [
+        {
+          ...deps,
+          react: {
+            // eager: true,
+            singleton: true,
+            requiredVersion: deps.react,
+          },
+          "react-dom": {
+            // eager: true,
+            singleton: true,
+            requiredVersion: deps["react-dom"],
+          },
         },
-        "react-dom": {
-          eager: true,
-          singleton: true,
-          requiredVersion: deps["react-dom"],
-        },
-      },
+      ],
     }),
     new HtmlWebpackPlugin({
       template: "./public/index.html",

diff --git a/bi-directional/app2/package.json b/bi-directional/app2/package.json
@@ -8,7 +8,7 @@
     "babel-loader": "8.1.0",
     "html-webpack-plugin": "git://github.com/ScriptedAlchemy/html-webpack-plugin#master",
     "serve": "11.3.2",
-    "webpack": "5.0.0-beta.18",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "3.11.0"
   },

diff --git a/bi-directional/app2/public/index.html b/bi-directional/app2/public/index.html
@@ -1,7 +1,5 @@
 <html>
-  <head>
-    <script src="http://localhost:3001/remoteEntry.js"></script>
-  </head>
+  <head> </head>
   <body>
     <div id="root"></div>
   </body>

diff --git a/bi-directional/app2/src/bootstrap.js b/bi-directional/app2/src/bootstrap.js
@@ -0,0 +1,5 @@
+import App from "./App";
+import React from "react";
+import ReactDOM from "react-dom";
+
+ReactDOM.render(<App />, document.getElementById("root"));
diff --git a/bi-directional/app2/src/index.js b/bi-directional/app2/src/index.js
@@ -1,5 +1 @@
-import App from "./App";
-import React from "react";
-import ReactDOM from "react-dom";
-
-ReactDOM.render(<App />, document.getElementById("root"));
+import("./bootstrap");
diff --git a/bi-directional/app2/webpack.config.js b/bi-directional/app2/webpack.config.js
@@ -27,27 +27,28 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: "app2",
-      library: { type: "var", name: "app2" },
       filename: "remoteEntry.js",
       remotes: {
-        app1: "app1",
+        app1: "app1@http://localhost:3001/remoteEntry.js",
       },
       exposes: {
         "./Button": "./src/Button",
       },
-      shared: {
-        ...deps,
-        react: {
-          eager: true,
-          singleton: true,
-          requiredVersion: deps.react,
+      shared: [
+        {
+          ...deps,
+          react: {
+            // eager: true,
+            singleton: true,
+            requiredVersion: deps.react,
+          },
+          "react-dom": {
+            // eager: true,
+            singleton: true,
+            requiredVersion: deps["react-dom"],
+          },
         },
-        "react-dom": {
-          eager: true,
-          singleton: true,
-          requiredVersion: deps["react-dom"],
-        },
-      },
+      ],
     }),
     new HtmlWebpackPlugin({
       template: "./public/index.html",

diff --git a/comprehensive-demo/app-01/package.json b/comprehensive-demo/app-01/package.json
@@ -13,7 +13,7 @@
     "react-dom": "^16.13.0",
     "react-router-dom": "^5.1.2",
     "serve": "^11.3.0",
-    "webpack": "5.0.0-beta.18",
+    "webpack": "5.0.0-beta.22",
     "webpack-cli": "^3.3.11"
   },
   "scripts": {