Merge pull request #63 from ClayPulse/hotfix

Hotfix mfversion is undefined

Author: Shellishack

web/components/extension/extension-preview.tsx

@@ -56,7 +56,9 @@ export default function ExtensionPreview({
 
   const [isShowInfo, setIsShowInfo] = useState(false);
 
-  const [hostMFVersion, setHostMFVersion] = useState<string>("unknown");
+  const [hostMFVersion, setHostMFVersion] = useState<string | undefined>(
+    undefined,
+  );
   const [showMFVersionInfo, setShowMFVersionInfo] = useState(false);
 
   useEffect(() => {
@@ -75,8 +77,6 @@ export default function ExtensionPreview({
     );
     setIsInstalled(foundExt !== undefined);
     setIsEnabled(foundExt?.isEnabled ?? false);
-
-    console.log("Extension preview loaded", extension);
   }, [extension]);
 
   function toggleExtension() {
@@ -122,7 +122,9 @@ export default function ExtensionPreview({
               <EnableCheckBox isActive={isEnabled} onPress={toggleExtension} />
             )}
 
-            {extension.mfVersion === "unknown" ? (
+            {hostMFVersion === undefined ||
+            extension.mfVersion === undefined ||
+            extension.mfVersion === "unknown" ? (
               <Popover
                 isOpen={showMFVersionInfo}
                 onOpenChange={setShowMFVersionInfo}
@@ -182,10 +184,9 @@ export default function ExtensionPreview({
                   <div className="max-w-xs">
                     <p>
                       This app's module federation version (
-                      {extension.mfVersion}) does not match the host
-                      version ({hostMFVersion}). This may cause issues when
-                      using the app. Please update the app to the latest
-                      version.
+                      {extension.mfVersion}) does not match the host version (
+                      {hostMFVersion}). This may cause issues when using the
+                      app. Please update the app to the latest version.
                     </p>
                   </div>
                 </PopoverContent>
@@ -271,9 +272,13 @@ export default function ExtensionPreview({
         {isShowInfo && (
           <div className="absolute bottom-0.5 left-1/2 flex w-full -translate-x-1/2 justify-center gap-x-0.5">
             {isShowUseButton && (
-              <Button color="primary" size="sm" onPress={() => { 
-                onPress?.(extension);
-              }}>
+              <Button
+                color="primary"
+                size="sm"
+                onPress={() => {
+                  onPress?.(extension);
+                }}
+              >
                 Use
               </Button>
             )}

web/lib/hooks/use-extension-manager.ts

@@ -29,7 +29,9 @@ export default function useExtensionManager() {
 
     const hostMFVersion = await getHostMFVersion();
 
-    if (compare(remoteMFVersion, hostMFVersion) !== 0) {
+    if (!remoteMFVersion) {
+      throw new Error("Remote MF version is undefined");
+    } else if (compare(remoteMFVersion, hostMFVersion) !== 0) {
       throw new Error(
         `Extension MF version ${remoteMFVersion} is not compatible with host MF version ${hostMFVersion}`,
       );

web/lib/module-federation/version.ts

@@ -9,7 +9,7 @@ export async function getRemoteMFVersion(
   remoteOrigin: string,
   id: string,
   version: string,
-): Promise<string> {
+): Promise<string | undefined> {
   try {
     const mfManifest = await fetch(
       `${getRemoteClientBaseURL(remoteOrigin, id, version)}/mf-manifest.json`,
@@ -18,6 +18,6 @@ export async function getRemoteMFVersion(
     return mfManifestJson.metaData.pluginVersion;
   } catch (error) {
     console.warn("Error fetching remote MF version:", error);
-    return "unknown";
+    return undefined;
   }
 }

web/lib/types.ts

@@ -302,7 +302,7 @@ export type Extension = {
   config: ExtensionConfig;
   isEnabled: boolean;
   remoteOrigin: string;
-  mfVersion: string;
+  mfVersion?: string;
 
   // These are commands that can be used without initializing an app.
   // These commands are always available once the extension is loaded and enabled.