Attempt at synchronous import with runtime resolution of remote module

Author: ksrb

advanced-api/dynamic-remotes-synchronous-imports/app2/src/App.js

@@ -1,16 +1,18 @@
-import { loadFromRemote } from "./loader";
 import Widget from "./Widget";
-import React, { lazy, Suspense } from "react";
+import React, { Suspense } from "react";
+import WidgetRemote from "app3/Widget";
 
-const WidgetRemote = lazy(async () => {
-  const component = await loadFromRemote({
-    component: "Widget", remote: {
-      url: "http://localhost:3003/remoteEntry.js",
-      name: "app3",
-    },
-  });
-  return component();
-});
+// Working example of loading component at runtime
+// import { loadFromRemote } from "./loader";
+// const WidgetRemote = React.lazy(async () => {
+//   const component = await loadFromRemote({
+//     component: "Widget", remote: {
+//       url: "http://localhost:3003/remoteEntry.js",
+//       name: "app3",
+//     },
+//   });
+//   return component();
+// });
 
 const App = () => (
   <div>

advanced-api/dynamic-remotes-synchronous-imports/app2/src/loader.js

@@ -86,3 +86,11 @@ export const loadFromRemote = ({
   };
 };
 
+const container = (async () => {
+  return await loadAndInitiateWebpackContainer({
+    name: "app3",
+    url: "http://localhost:3003/remoteEntry.js",
+  });
+})();
+
+export default container;

advanced-api/dynamic-remotes-synchronous-imports/app2/webpack.config.js

@@ -2,8 +2,13 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
 const { ModuleFederationPlugin } = require("webpack").container;
 const path = require("path");
 const deps = require("./package.json").dependencies;
+
 module.exports = {
-  entry: "./src/index",
+  entry: [
+    "./src/index",
+    // This seems necessary for module to even be available
+    "./src/loader.js"
+  ],
   mode: "development",
   target: "web",
   devServer: {
@@ -32,6 +37,12 @@ module.exports = {
       exposes: {
         "./Widget": "./src/Widget",
       },
+      remotes: {
+        app3: "internal ./src/loader.js"
+        // Use remote entry below to see working example with synchronous
+        // imports
+        // app3: "app3@//localhost:3003/remoteEntry.js"
+      },
       shared: {
         moment: deps.moment,
         react: {