fix: IAG issues (#433)

- incorrect remote ID when @syntax is different from alias key
- hardcoded path seperator breaking windows backtick builds
- remove hardcoded webpack version

Author: ScriptedAlchemy

dashboard-example/dsl/webpack.config.js

@@ -74,7 +74,6 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: "dsl__REMOTE_VERSION__",
-      library: { type: "var", name: "dsl__REMOTE_VERSION__" },
       filename: "remoteEntry.js",
       remotes: {},
       exposes: {

dashboard-example/home/webpack.config.js

@@ -79,8 +79,9 @@ module.exports = {
     new ModuleFederationPlugin({
       name: "home",
       filename: "remoteEntry.js",
-      library: { type: "var", name: "home" },
       remotes: {
+        // dsl: "myDSL@http://things.com/remotes/dsl/remoteEntry.js",
+
         dsl: DashboardPlugin.clientVersion({
           currentHost: "home",
           remoteName: "dsl",

dashboard-example/nav/webpack.config.js

@@ -73,7 +73,6 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: "nav__REMOTE_VERSION__",
-      library: { type: "var", name: "nav__REMOTE_VERSION__" },
       filename: "remoteEntry.js",
       remotes: {
         dsl: DashboardPlugin.clientVersion({

dashboard-example/search/webpack.config.js

@@ -73,7 +73,6 @@ module.exports = {
   plugins: [
     new ModuleFederationPlugin({
       name: "search__REMOTE_VERSION__",
-      library: { type: "var", name: "search__REMOTE_VERSION__" },
       filename: "remoteEntry.js",
       remotes: {
         nav:  DashboardPlugin.clientVersion({

dashboard-example/utils/webpack.config.js

@@ -57,7 +57,6 @@ module.exports = {
     }),
     new ModuleFederationPlugin({
       name: "utils__REMOTE_VERSION__",
-      library: { type: "var", name: "utils__REMOTE_VERSION__" },
       filename: "remoteEntry.js",
       remotes: {},
       exposes: {

dashboard-plugin/FederationDashboardPlugin.js

@@ -235,7 +235,7 @@ class FederationDashboardPlugin {
       this.parseModuleAst(curCompiler);
     }
 
-    // fs.writeFile('stats.json', JSON.stringify(stats.modules))
+    // fs.writeFileSync('stats.json', JSON.stringify(stats, null, 2))
 
     // get RemoteEntryChunk
     const RemoteEntryChunk = this.getRemoteEntryChunk(
@@ -251,6 +251,7 @@ class FederationDashboardPlugin {
 
     const rawData = {
       name: this.FederationPluginOptions.name,
+      remotes: this.FederationPluginOptions.remotes,
       metadata: this._options.metadata || {},
       topLevelPackage: vendorFederation || {},
       publicPath: stats.publicPath,

dashboard-plugin/convertToGraph.js

@@ -39,6 +39,7 @@ const convertToGraph = (
     functionRemotes,
     sha,
     buildHash,
+    remotes
   },
   standalone
 ) => {
@@ -60,9 +61,20 @@ const convertToGraph = (
     if (moduleType === "remote-module") {
       if (data.length === 4) {
         const name = data[3].replace("./", "");
+        const remoteApplicationAlias = data[2].replace("webpack/container/reference/", "");
+        const remoteFromPluginOptions = remotes[remoteApplicationAlias];
+        let remoteGlobal = remoteApplicationAlias;
+        if(typeof remoteFromPluginOptions === "string" &&
+          !remoteFromPluginOptions.startsWith('external ') &&
+          !remoteFromPluginOptions.startsWith('promise ') &&
+          !remoteFromPluginOptions.startsWith('internal ') &&
+          remoteFromPluginOptions.includes('@')) {
+          remoteGlobal = remoteFromPluginOptions.split('@')[0];
+        }
+
         const consume = {
           consumingApplicationID: app,
-          applicationID: data[2].replace("webpack/container/reference/", ""),
+          applicationID: remoteGlobal,
           name,
           usedIn: new Set(),
         };
@@ -91,7 +103,7 @@ const convertToGraph = (
       });
     } else if (nameForCondition && nameForCondition.includes("node_modules")) {
       const contextArray = nameForCondition.split(path.sep);
-      const afterModule = nameForCondition.split("node_modules/");
+      const afterModule = nameForCondition.split("node_modules" + path.sep);
 
       const search = afterModule[1] && afterModule[1].startsWith("@") ? 3 : 2;
       contextArray.splice(contextArray.indexOf("node_modules") + search);

dashboard-plugin/package.json

@@ -39,7 +39,7 @@
     "node-fetch": "^2.6.0"
   },
   "peerDependencies": {
-    "webpack": "5.61.0",
+    "webpack": "^5.40.0",
     "webpack-sources": "^1.4.3 || ^2.0.0"
   },
   "devDependencies": {