fix(router): use transform plugin on original ZMPRouter to fix local zmp start and vercel

src/components/layout.tsx

@@ -4,9 +4,9 @@ import {
   App,
   Route,
   SnackbarProvider,
+  ZMPRouter,
   useNavigate,
 } from "zmp-ui";
-import { ZMPRouter } from "@/components/router/ZMPRouter";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { queryClient } from "@/lib/query-client";
 import { useAuthStore, GUEST_STORAGE_KEY } from "@/stores/auth-store";

vite.config.mts

-import { defineConfig } from "vite";
+import { defineConfig, Plugin } from "vite";
 import zaloMiniApp from "zmp-vite-plugin";
 import react from "@vitejs/plugin-react";
 import path from "path";
 
+/**
+ * Patch ZMPRouter to only force `/zapps/<APP_ID>` basepath when inside Zalo (pathname starts with /zapps/).
+ * When running on Vercel or standalone web, basepath remains "" so standard routes (/, /login) work properly.
+ * In local `zmp start`, appEnv === "DEVELOPMENT" handles the basepath natively with zero context mismatch.
+ */
+function patchZmpRouterPlugin(): Plugin {
+  return {
+    name: "patch-zmp-router-for-web",
+    transform(code, id) {
+      if (id.includes("ZMPRouter")) {
+        return {
+          code: code.replace(
+            'process.env.NODE_ENV === "production"',
+            '(typeof window !== "undefined" && window.location.pathname.startsWith("/zapps/") && process.env.NODE_ENV === "production")'
+          ),
+          map: null,
+        };
+      }
+      return null;
+    },
+  };
+}
+
 // https://vitejs.dev/config/
 export default () => {
   return defineConfig({
     base: "",
-    plugins: [zaloMiniApp(), react()],
+    plugins: [patchZmpRouterPlugin(), zaloMiniApp(), react()],
     build: {
       assetsInlineLimit: 0,
     },
     resolve: {
-      alias: [
-        { find: "@", replacement: path.resolve(__dirname, "./src") },
-        {
-          find: /.*\/components\/router\/ZMPRouter(\.js)?$/,
-          replacement: path.resolve(__dirname, "./src/components/router/ZMPRouter.tsx"),
-        },
-      ],
+      alias: {
+        "@": path.resolve(__dirname, "./src"),
+      },
     },
   });
 };