reproduce shared dependencies issue

Author: idonava

.gitignore

@@ -150,4 +150,6 @@ cdk.out/
 .nx/cache/*
 .yalc
 yalc.lock
-.swc
+.swc
+
+static/*

apps/mfe-remote-1/package.json

@@ -12,7 +12,8 @@
     "react-router-dom": "^6.11.2",
     "react-error-boundary": "^4.0.9",
     "react-helmet-async": "^1.3.0",
-    "external-package-version-display": "1.0.1"
+    "external-package-version-display": "1.0.1",
+    "external-package-version-display-2": "1.0.0"
   },
   "devDependencies": {
     "@rspack/plugin-node-polyfill": "^0.5.8",

apps/mfe-remote-1/remotes/mfe-remote-1-child-1/package.json

@@ -12,7 +12,8 @@
     "react-router-dom": "^6.11.2",
     "react-error-boundary": "^4.0.9",
     "react-helmet-async": "^1.3.0",
-    "external-package-version-display": "1.1.0"
+    "external-package-version-display": "2.1.4",
+    "external-package-version-display-2": "1.0.1"
   },
   "devDependencies": {
     "@rspack/plugin-node-polyfill": "^0.5.8",

apps/mfe-remote-1/remotes/mfe-remote-1-child-1/src/routes/index.tsx

@@ -3,14 +3,15 @@ import { AppProviders } from "../components/AppProviders";
 import { NavigationManager } from "../components/NavigationManager";
 import { Box } from "@mui/material";
 import { VersionDisplay } from "external-package-version-display";
+import { VersionDisplay as VersionDisplay2 } from "external-package-version-display-2";
 import React from "react";
-const ExternalMFERemote2Component = React.lazy(
-  () => import("mfe-remote-2/ExternalMFERemote2Component"),
-);
-const ExternalZMFERemote3Component = React.lazy(
-  () => import("z-mfe-remote-3/ExternalZMFERemote3Component"),
-);
-
+// const ExternalMFERemote2Component = React.lazy(
+//   () => import("mfe-remote-2/ExternalMFERemote2Component"),
+// );
+// const ExternalZMFERemote3Component = React.lazy(
+//   () => import("z-mfe-remote-3/ExternalZMFERemote3Component"),
+// );
+// console.log("mfe-remote-1-child-1 mui version", version, version === "5.15.2");
 export const routes = (
   shellRoutingPrefix?: string,
   appRoutingPrefix?: string,
@@ -36,10 +37,11 @@ export const routes = (
         element: (
           <Box>
             <Box>MFE: mfe-remote-1-child-1</Box>
-            external-package-version-display Required Version: 1.1.0
+            external-package-version-display Required Version: 2.1.2
             <VersionDisplay />
-            <ExternalZMFERemote3Component />
-            <ExternalMFERemote2Component />
+            <VersionDisplay2 />
+            {/* <ExternalZMFERemote3Component />
+            <ExternalMFERemote2Component /> */}
           </Box>
         ),
       },

apps/mfe-remote-1/src/components/Layout/Layout.tsx

@@ -6,6 +6,7 @@ import { ErrorBoundary } from "@cnapp-ui/mfe-utils";
 import { Sidebar } from "../Sidebar";
 import { NavigationManager } from "../NavigationManager";
 import { VersionDisplay } from "external-package-version-display";
+import { VersionDisplay as VersionDisplay2 } from "external-package-version-display-2";
 
 export const Layout = ({
   shellRoutingPrefix,
@@ -30,6 +31,7 @@ export const Layout = ({
                     <Box>MFE: mfe-remote-1</Box>{" "}
                     external-package-version-display Required Version: 1.0.1
                     <VersionDisplay />
+                    <VersionDisplay2 />
                   </Box>
                   <Box sx={{ display: "flex" }}>
                     <Sidebar />

apps/z-mfe-remote-3/package.json

@@ -12,7 +12,8 @@
     "react-router-dom": "^6.11.2",
     "react-error-boundary": "^4.0.9",
     "react-helmet-async": "^1.3.0",
-    "external-package-version-display": "2.1.0"
+    "external-package-version-display": "2.1.4",
+    "external-package-version-display-2": "1.0.0"
   },
   "devDependencies": {
     "@rspack/plugin-node-polyfill": "^0.5.8",

apps/z-mfe-remote-3/src/routes/index.tsx

@@ -3,10 +3,12 @@ import { AppProviders } from "../components/AppProviders";
 import { NavigationManager } from "../components/NavigationManager";
 import { Box } from "@mui/material";
 import { VersionDisplay } from "external-package-version-display";
+import { VersionDisplay as VersionDisplay2 } from "external-package-version-display-2";
+
 import React from "react";
-const ExternalMFERemote2Component = React.lazy(
-  () => import("mfe-remote-2/ExternalMFERemote2Component"),
-);
+// const ExternalMFERemote2Component = React.lazy(
+//   () => import("mfe-remote-2/ExternalMFERemote2Component"),
+// );
 
 export const routes = (
   shellRoutingPrefix?: string,
@@ -29,10 +31,11 @@ export const routes = (
         index: true,
         element: (
           <Box>
-            <Box>MFE: z-mfe-remote-2</Box>
+            <Box>MFE: z-mfe-remote-3</Box>
             external-package-version-display Required Version: 2.1.0
             <VersionDisplay />
-            <ExternalMFERemote2Component />
+            <VersionDisplay2 />
+            {/* <ExternalMFERemote2Component /> */}
           </Box>
         ),
       },