@vercel/microfrontends 2.0.0-canary.2 → 2.0.1

package/CHANGELOG.md

@@ -1,28 +1,33 @@
 # @vercel/microfrontends
 
-## 2.0.0-canary.2
+## 2.0.1
 
 ### Patch Changes
 
-- Use user-provided appName when inferring the location of microfrontends.json.
-
-## 2.0.0-canary.1
-
-### Patch Changes
-
-- Support old and new asset prefixes in local development proxy.
+- 8c11bdc: 
+  - Support hyphens and escaped special characters in supported path matching regex https://vercel.com/docs/microfrontends/path-routing#supported-path-expressions
+  - Improve error message for when local development proxy can't determine the port
+  - Update local proxy double slash routing behaviour to match the production proxy
 
-## 2.0.0-canary.0
+## 2.0.0
 
-> **Check out our [Public Beta](https://vercel.com/changelog/microfrontends-are-now-in-public-beta) changelog to learn more about this release.**
+> **Check out our [Public Beta](https://vercel.com/changelog/microfrontends-support-is-now-in-public-beta) changelog to learn more about this release.**
 
 ### Major Changes
 
 - This release removes the project name and flag names from being visible to client side code.
   - Modify the auto-generated asset prefix to use a hash of the project name instead of the project name itself.
-  - Allow users to specify a custom asset prefix in the `microfrontends.json`
+  - Allow users to specify a custom asset prefix in `microfrontends.json`.
   - Remove project names and flag names from the Microfrontends client configuration.
 
+### Minor Changes
+
+- Use user-provided appName when inferring the location of microfrontends.json.
+
+### Patch Changes
+
+- Improve error messages when the name in `package.json` does not match the Vercel project name.
+
 ## 1.5.0
 
 ### Minor Changes

package/dist/bin/cli.cjs

@@ -30,7 +30,7 @@ var import_env = require("@next/env");
 // package.json
 var package_default = {
   name: "@vercel/microfrontends",
-  version: "2.0.0-canary.2",
+  version: "2.0.1",
   private: false,
   description: "Defines configuration and utilities for microfrontends development",
   keywords: [
@@ -169,11 +169,11 @@ var package_default = {
     typecheck: "tsc --noEmit"
   },
   dependencies: {
-    "@next/env": "15.4.0-canary.41",
+    "@next/env": "15.5.4",
     "@types/md5": "^2.3.5",
     ajv: "^8.17.1",
     commander: "^12.1.0",
-    cookie: "0.4.0",
+    cookie: "1.0.2",
     "fast-glob": "^3.3.2",
     "http-proxy": "^1.18.1",
     "jsonc-parser": "^3.3.1",
@@ -198,7 +198,7 @@ var package_default = {
     "eslint-config-custom": "workspace:*",
     jest: "^29.7.0",
     "jest-environment-jsdom": "29.2.2",
-    next: "15.4.0-canary.41",
+    next: "15.5.4",
     react: "19.0.0",
     "react-dom": "19.0.0",
     "ts-config": "workspace:*",
@@ -452,7 +452,7 @@ var MicrofrontendConfigClient = class {
   static fromEnv(config) {
     if (!config) {
       throw new Error(
-        "Could not construct MicrofrontendConfigClient: configuration is empty or undefined. Did you set up your application with `withMicrofrontends`?"
+        "Could not construct MicrofrontendConfigClient: configuration is empty or undefined. Did you set up your application with `withMicrofrontends`? Is the local proxy running and this application is being accessed via the proxy port? See https://vercel.com/docs/microfrontends/local-development#setting-up-microfrontends-proxy"
       );
     }
     return new MicrofrontendConfigClient(JSON.parse(config));
@@ -592,10 +592,11 @@ function validatePathExpression(path7) {
         }
         if (token.pattern !== PATH_DEFAULT_PATTERN && // Allows (a|b|c) and ((?!a|b|c).*) regex
         // Only limited regex is supported for now, due to performance considerations
-        !/^(?<allowed>[\w]+(?:\|[^:|()]+)+)$|^\(\?!(?<disallowed>[\w]+(?:\|[^:|()]+)*)\)\.\*$/.test(
-          token.pattern
+        // Allows all letters, numbers, and hyphens. Other characters must be escaped.
+        !/^(?<allowed>[\w-~]+(?:\|[^:|()]+)+)$|^\(\?!(?<disallowed>[\w-~]+(?:\|[^:|()]+)*)\)\.\*$/.test(
+          token.pattern.replace(/\\./g, "")
         )) {
-          return `Path ${path7} cannot use unsupported regular expression wildcard`;
+          return `Path ${path7} cannot use unsupported regular expression wildcard. If the path includes special characters, they must be escaped with backslash (e.g. '\\(')`;
         }
         if (token.modifier && i !== tokens.length - 1) {
           return `Modifier ${token.modifier} is not allowed on wildcard :${token.name} in ${path7}. Modifiers are only allowed in the last path component`;
@@ -2112,12 +2113,6 @@ var localAuthHtml = ({
 var MFE_LOCAL_PROXY_HEADER = "x-vercel-mfe-local-proxy-origin";
 var MFE_FLAG_VALUE = "vercel-mfe-flag-value";
 var MFE_FLAG_VALUE_HEADER = `x-${MFE_FLAG_VALUE}`;
-var MFE_DEBUG = process.env.MFE_DEBUG;
-var mfeDebug = (message) => {
-  if (MFE_DEBUG === "true" || MFE_DEBUG === "1") {
-    console.log(message);
-  }
-};
 var ProxyRequestRouter = class {
   constructor(config, {
     localApps
@@ -2130,8 +2125,10 @@ var ProxyRequestRouter = class {
     return this.getApplicationTarget(defaultApp);
   }
   getApplicationTarget(application) {
-    const useDev = this.localApps.find(
-      (name) => name === application.name || name === application.packageName
+    const useDev = Boolean(
+      this.localApps.find(
+        (name) => name === application.name || name === application.packageName
+      )
     );
     let applicationName = application.name;
     let host = useDev ? application.development.local : application.fallback;
@@ -2151,7 +2148,9 @@ var ProxyRequestRouter = class {
       protocol,
       hostname,
       port,
-      application: applicationName
+      application: applicationName,
+      isLocal: useDev,
+      originalApplication: application.name
     };
   }
   /**
@@ -2225,8 +2224,8 @@ var ProxyRequestRouter = class {
     if (target)
       return target;
     const defaultHost = this.getDefaultHost(config);
-    mfeDebug(
-      `no matching routes, routing ${path7} to default application: ${JSON.stringify(defaultHost)}`
+    console.log(
+      ` ${path7} - Did not match any routes. Routing to default app: ${formatProxyTarget(defaultHost)}`
     );
     return { path: path7, ...defaultHost };
   }
@@ -2242,8 +2241,8 @@ var ProxyRequestRouter = class {
       const target = this.getApplicationTarget(application);
       if (middlewareMfeZone) {
         if (middlewareMfeZone === application.name) {
-          mfeDebug(
-            `routing ${path7} to '${target.application}' at ${target.hostname} according to 'x-vercel-mfe-zone' header`
+          console.log(
+            ` ${path7} - Routing to ${formatProxyTarget(target)} according to 'x-vercel-mfe-zone' header`
           );
           return { path: path7, ...target };
         }
@@ -2262,15 +2261,12 @@ var ProxyRequestRouter = class {
         for (const childPath of group.paths) {
           const regexp = (0, import_path_to_regexp3.pathToRegexp)(childPath);
           if (regexp.test(url.pathname)) {
-            mfeDebug(
-              `routing ${path7} to '${target.application}' at ${target.hostname}`
-            );
             if (group.flag) {
               if (mfeFlagValue === true) {
               } else if (mfeFlagValue === false) {
                 continue;
               } else {
-                mfeDebug(
+                console.log(
                   "Routing group is behind flag. Routing to default app to check flag via middleware."
                 );
                 if (!this.isDefaultAppLocal()) {
@@ -2282,6 +2278,9 @@ var ProxyRequestRouter = class {
                 return null;
               }
             }
+            console.log(
+              ` ${path7} - Matched ${childPath}. Routing to ${formatProxyTarget(target)}`
+            );
             return { path: path7, ...target };
           }
         }
@@ -2310,8 +2309,8 @@ var ProxyRequestRouter = class {
     for (const rewrite of rewrites) {
       for (const assetPrefix of assetPrefixes) {
         if ((0, import_path_to_regexp3.pathToRegexp)(`/${assetPrefix}${rewrite}`).test(pathname)) {
-          mfeDebug(
-            `routing ${pathname} to '${target.application}' at ${target.hostname}`
+          console.log(
+            ` ${pathname} - Matched asset prefix. Routing to ${formatProxyTarget(target)}`
           );
           return {
             path: path7,
@@ -2339,13 +2338,16 @@ var ProxyRequestRouter = class {
       url: refererURL,
       applications
     });
-    mfeDebug(
-      `routing nextjs stack frame request to ${refererApp?.application}`
+    if (!refererApp) {
+      return null;
+    }
+    console.log(
+      ` ${refererURL.pathname} - Routing nextjs stack frame request to ${formatProxyTarget(refererApp)}`
     );
-    return refererApp ? {
+    return {
       ...refererApp,
       path: `${url.pathname}${url.search}`
-    } : null;
+    };
   }
   checkNextSourceMap({ url }) {
     const isSourceMap = (0, import_path_to_regexp3.pathToRegexp)("/__nextjs_source-map").test(url.pathname);
@@ -2354,11 +2356,15 @@ var ProxyRequestRouter = class {
     }
     const localApp = this.getArbitraryLocalApp();
     if (!localApp) {
-      mfeDebug("no locally running application to route request to");
+      console.error(
+        ` ${url.pathname} - No locally running application to route request to`
+      );
       return null;
     }
     const target = this.getApplicationTarget(localApp);
-    mfeDebug(`routing nextjs source map request to ${target.application}`);
+    console.log(
+      ` ${url.pathname} - Routing nextjs source map request to randomly selected local application: ${formatProxyTarget(target)}`
+    );
     return {
       ...target,
       path: `${url.pathname}${url.search}`
@@ -2374,7 +2380,9 @@ var ProxyRequestRouter = class {
     }
     const imageUrl = url.searchParams.get("url");
     if (!imageUrl) {
-      mfeDebug("no url parameter found in _next/image request");
+      console.error(
+        ` ${url.pathname}?${url.search} - No url parameter found in _next/image request`
+      );
       return null;
     }
     const decodedPath = decodeURIComponent(imageUrl);
@@ -2384,11 +2392,16 @@ var ProxyRequestRouter = class {
       url: imageURL,
       applications
     });
-    mfeDebug(`routing nextjs image request to ${imageApp?.application}`);
-    return imageApp ? {
+    if (!imageApp) {
+      return null;
+    }
+    console.log(
+      ` ${url.pathname}?${url.search} - Routing nextjs image request to ${formatProxyTarget(imageApp)}`
+    );
+    return {
       ...imageApp,
       path: `${url.pathname}${url.search}`
-    } : null;
+    };
   }
   isDefaultAppLocal() {
     const defaultApp = this.config.getDefaultApplication();
@@ -2410,10 +2423,12 @@ var ProxyRequestRouter = class {
 var LocalProxy = class {
   constructor(config, {
     localApps,
-    proxyPort
+    proxyPort,
+    configFilePath
   }) {
     this.router = new ProxyRequestRouter(config, { localApps });
     this.proxyPort = proxyPort ?? this.router.config.getLocalProxyPort();
+    this.configFilePath = configFilePath;
     this.proxy = import_http_proxy.default.createProxyServer({ secure: true });
     this.proxy.on("error", (err, req, res) => {
       if (res instanceof http.ServerResponse) {
@@ -2423,9 +2438,12 @@ var LocalProxy = class {
       }
       const target = this.router.getTarget(req);
       res.end(
-        `Error proxying request to ${target.application}. Is the server running locally on port ${target.port}?`
+        `Error proxying request to ${formatProxyTarget(target)}. Is the server running locally on port ${target.port}?`
+      );
+      console.error(
+        `Error proxying request for ${formatProxyTarget(target)}: `,
+        err
       );
-      console.error(`Error proxying request for ${target.application}: `, err);
     });
   }
   static fromFile(filePath, {
@@ -2441,7 +2459,11 @@ var LocalProxy = class {
       microfrontends = MicrofrontendsServer.infer();
     }
     LocalProxy.validateLocalApps(localApps, microfrontends.config);
-    return new LocalProxy(microfrontends.config, { localApps, proxyPort });
+    return new LocalProxy(microfrontends.config, {
+      localApps,
+      proxyPort,
+      configFilePath: filePath
+    });
   }
   static validateLocalApps(localApps, config) {
     const unknownApps = [];
@@ -2478,13 +2500,37 @@ var LocalProxy = class {
       }
     });
     httpServer.listen(this.proxyPort, () => {
-      console.log(`Microfrontends Proxy: http://localhost:${this.proxyPort}`);
+      this.displayStartupMessage();
     });
   }
   handleRequest(req, res) {
     if (this.handleProxyInfoRequest(req.url, res)) {
       return;
     }
+    if (req.url?.includes("//")) {
+      const originalUrl = req.url;
+      if (originalUrl) {
+        const normalizedUrl = originalUrl.replaceAll(/\/[\\/]+/g, "/");
+        if (normalizedUrl !== originalUrl) {
+          res.writeHead(307, {
+            Location: normalizedUrl,
+            // Copy incoming request headers except hop-by-hop headers and Location
+            ...Object.fromEntries(
+              Object.entries(req.headers).filter(
+                ([key]) => ![
+                  "connection",
+                  "content-length",
+                  "transfer-encoding",
+                  "location"
+                ].includes(key.toLowerCase())
+              )
+            )
+          });
+          res.end();
+          return;
+        }
+      }
+    }
     const target = this.router.getTarget(req);
     const { req: strippedReq, mfeFlagValue } = removeMfeFlagQuery(req);
     if (target.protocol === "https") {
@@ -2518,7 +2564,7 @@ var LocalProxy = class {
             })
           );
         }
-        if (realRes.statusCode === 307) {
+        if (realRes.statusCode === 307 || realRes.statusCode === 308 || realRes.statusCode === 302 || realRes.statusCode === 301) {
           const locationHeader = realRes.headers.location;
           if (locationHeader) {
             const redirectUrl = new import_node_url.URL(
@@ -2579,6 +2625,79 @@ var LocalProxy = class {
     }
     return false;
   }
+  displayStartupMessage() {
+    const allApps = this.router.config.getAllApplications();
+    const localApps = [];
+    const fallbackApps = [];
+    const defaultApp = this.router.config.getDefaultApplication();
+    const defaultFallback = defaultApp.fallback.host;
+    for (const app of allApps) {
+      const isLocal = this.router.localApps.find(
+        (name) => name === app.name || name === app.packageName
+      );
+      if (isLocal) {
+        localApps.push({
+          name: app.name,
+          port: app.development.local.port
+        });
+      } else {
+        const target = this.router.getApplicationTarget(app);
+        let fallbackHost = target.hostname;
+        if (!app.fallback) {
+          fallbackHost = defaultFallback;
+        }
+        fallbackApps.push({
+          name: app.name,
+          fallback: fallbackHost
+        });
+      }
+    }
+    console.log(`
+\u25B2 Microfrontends Proxy (${package_default.version}) Started`);
+    console.log(`  - Proxy URL: http://localhost:${this.proxyPort}`);
+    if (this.configFilePath) {
+      console.log(`  - Config: ${this.configFilePath}`);
+    }
+    if (localApps.length > 0) {
+      console.log("  - Local Applications:");
+      const displayLocalApps = localApps.length > 5 ? [
+        ...localApps.slice(0, 5),
+        { name: `... and ${localApps.length - 5} more`, port: void 0 }
+      ] : localApps;
+      for (const app of displayLocalApps) {
+        if (app.port !== void 0) {
+          console.log(`    \u2022 ${app.name} (port ${app.port})`);
+        } else {
+          console.log(`    \u2022 ${app.name}`);
+        }
+      }
+    }
+    if (fallbackApps.length > 0) {
+      console.log("  - Fallback Applications:");
+      const displayFallbackApps = fallbackApps.length > 5 ? [
+        ...fallbackApps.slice(0, 5),
+        { name: `... and ${fallbackApps.length - 5} more`, fallback: "" }
+      ] : fallbackApps;
+      for (const app of displayFallbackApps) {
+        if (app.fallback) {
+          console.log(`    \u2022 ${app.name} \u2192 ${app.fallback}`);
+        } else {
+          console.log(`    \u2022 ${app.name}`);
+        }
+      }
+    }
+    if (localApps.length === 0 && fallbackApps.length === 0) {
+      console.log("  - No applications configured\n");
+    }
+    if (localApps.length > 0) {
+      console.log(
+        "\nRequests directly to the ports of these applications may be automatically\nredirected to this proxy. Set the MFE_DISABLE_LOCAL_PROXY_REWRITE=1\nenvironment variable to disable this behavior."
+      );
+    }
+    console.log(`
+${"\u2500".repeat(50)}
+`);
+  }
 };
 function extractMfeFlagValue(path7) {
   const host = "http://example.com";
@@ -2608,6 +2727,9 @@ function removeMfeFlagQuery(req) {
   req.url = path7;
   return { req, mfeFlagValue };
 }
+function formatProxyTarget(target) {
+  return `${target.originalApplication} (${target.isLocal ? "local" : "fallback"})`;
+}
 
 // src/bin/port.ts
 var import_node_process = require("process");
@@ -2617,19 +2739,19 @@ var import_node_path9 = __toESM(require("path"), 1);
 var import_node_fs8 = __toESM(require("fs"), 1);
 function mfePort(packageDir) {
   const { name: appName, version } = getPackageJson(packageDir);
-  const result = loadConfig({ packageDir, appName });
-  if (!result) {
-    throw new MicrofrontendError(
-      `Unable to determine configured port for ${appName}`,
-      { type: "config", subtype: "not_found" }
-    );
+  try {
+    const result = loadConfig({ packageDir, appName });
+    const { port } = result;
+    return {
+      name: appName,
+      version,
+      port
+    };
+  } catch (e) {
+    throw new Error(`Unable to determine configured port for ${appName}`, {
+      cause: e
+    });
   }
-  const { port } = result;
-  return {
-    name: appName,
-    version,
-    port
-  };
 }
 function getPackageJson(packageDir) {
   const filePath = import_node_path9.default.join(packageDir, "package.json");
@@ -2639,14 +2761,9 @@ function loadConfig({
   packageDir,
   appName
 }) {
-  let config;
-  try {
-    config = MicrofrontendsServer.infer({
-      directory: packageDir
-    });
-  } catch (e) {
-    return void 0;
-  }
+  const config = MicrofrontendsServer.infer({
+    directory: packageDir
+  });
   const app = config.config.getApplication(appName);
   const port = app.development.local.port ?? (app.development.local.protocol === "https" ? 443 : 80);
   return { port };

package/dist/config.cjs

@@ -232,7 +232,7 @@ var MicrofrontendConfigClient = class {
   static fromEnv(config) {
     if (!config) {
       throw new Error(
-        "Could not construct MicrofrontendConfigClient: configuration is empty or undefined. Did you set up your application with `withMicrofrontends`?"
+        "Could not construct MicrofrontendConfigClient: configuration is empty or undefined. Did you set up your application with `withMicrofrontends`? Is the local proxy running and this application is being accessed via the proxy port? See https://vercel.com/docs/microfrontends/local-development#setting-up-microfrontends-proxy"
       );
     }
     return new MicrofrontendConfigClient(JSON.parse(config));
@@ -372,10 +372,11 @@ function validatePathExpression(path) {
         }
         if (token.pattern !== PATH_DEFAULT_PATTERN && // Allows (a|b|c) and ((?!a|b|c).*) regex
         // Only limited regex is supported for now, due to performance considerations
-        !/^(?<allowed>[\w]+(?:\|[^:|()]+)+)$|^\(\?!(?<disallowed>[\w]+(?:\|[^:|()]+)*)\)\.\*$/.test(
-          token.pattern
+        // Allows all letters, numbers, and hyphens. Other characters must be escaped.
+        !/^(?<allowed>[\w-~]+(?:\|[^:|()]+)+)$|^\(\?!(?<disallowed>[\w-~]+(?:\|[^:|()]+)*)\)\.\*$/.test(
+          token.pattern.replace(/\\./g, "")
         )) {
-          return `Path ${path} cannot use unsupported regular expression wildcard`;
+          return `Path ${path} cannot use unsupported regular expression wildcard. If the path includes special characters, they must be escaped with backslash (e.g. '\\(')`;
         }
         if (token.modifier && i !== tokens.length - 1) {
           return `Modifier ${token.modifier} is not allowed on wildcard :${token.name} in ${path}. Modifiers are only allowed in the last path component`;