@vercel/microfrontends 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @vercel/microfrontends
 
+## 2.1.0
+
+### Minor Changes
+
+- c856a5d:
+  - Add support for custom `microfrontends.json` file names. This enables a single application to be deployed as multiple different vercel projects / microfrontends.
+  - Strip asset prefix from Vercel Firewall rate limit paths. Support Vercel Firewall rate limit requests when they go to a child application.
+
+## 2.0.1
+
+### Patch Changes
+
+- 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
 
 > **Check out our [Public Beta](https://vercel.com/changelog/microfrontends-support-is-now-in-public-beta) changelog to learn more about this release.**

package/README.md

@@ -1,8 +1,4 @@
-<picture>
-  <source srcset="https://assets.vercel.com/image/upload/v1689795055/docs-assets/static/docs/microfrontends/mfe-package-banner-dark.png" media="(prefers-color-scheme: dark)">
-  <source srcset="https://assets.vercel.com/image/upload/v1689795055/docs-assets/static/docs/microfrontends/mfe-package-banner-light.png" media="(prefers-color-scheme: light)">
-  <img src="https://assets.vercel.com/image/upload/v1689795055/docs-assets/static/docs/microfrontends/mfe-package-banner-dark.png" alt="hero banner">
-</picture>
+![hero banner](./assets/mfe-package-banner-dark.png)
 
 # @vercel/microfrontends
 

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",
+  version: "2.1.0",
   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`;
@@ -1111,22 +1112,38 @@ var import_node_fs2 = require("fs");
 var import_jsonc_parser2 = require("jsonc-parser");
 var import_fast_glob = __toESM(require("fast-glob"), 1);
 
-// src/config/constants.ts
-var CONFIGURATION_FILENAMES = [
+// src/config/microfrontends/utils/get-config-file-name.ts
+var DEFAULT_CONFIGURATION_FILENAMES = [
   "microfrontends.jsonc",
   "microfrontends.json"
 ];
+function getPossibleConfigurationFilenames({
+  customConfigFilename
+}) {
+  if (customConfigFilename) {
+    if (!customConfigFilename.endsWith(".json") && !customConfigFilename.endsWith(".jsonc")) {
+      throw new Error(
+        `The VC_MICROFRONTENDS_CONFIG_FILE_NAME environment variable must end with '.json' or '.jsonc'. Received: ${customConfigFilename}`
+      );
+    }
+    return Array.from(
+      /* @__PURE__ */ new Set([customConfigFilename, ...DEFAULT_CONFIGURATION_FILENAMES])
+    );
+  }
+  return DEFAULT_CONFIGURATION_FILENAMES;
+}
 
 // src/config/microfrontends/utils/infer-microfrontends-location.ts
 var configCache = {};
 function findPackageWithMicrofrontendsConfig({
   repositoryRoot,
-  applicationContext
+  applicationContext,
+  customConfigFilename
 }) {
   const applicationName = applicationContext.name;
   try {
     const microfrontendsJsonPaths = import_fast_glob.default.globSync(
-      `**/{${CONFIGURATION_FILENAMES.join(",")}}`,
+      `**/{${getPossibleConfigurationFilenames({ customConfigFilename }).join(",")}}`,
       {
         cwd: repositoryRoot,
         absolute: true,
@@ -1182,6 +1199,8 @@ Names of applications in \`microfrontends.json\` must match the Vercel Project n
 
 If your Vercel Microfrontends configuration is not in this repository, you can use the Vercel CLI to pull the Vercel Microfrontends configuration using the "vercel microfrontends pull" command, or you can specify the path manually using the VC_MICROFRONTENDS_CONFIG environment variable.
 
+If your Vercel Microfrontends configuration has a custom name, ensure the VC_MICROFRONTENDS_CONFIG_FILE_NAME environment variable is set, you can pull the vercel project environment variables using the "vercel env pull" command.
+
 If you suspect this is thrown in error, please reach out to the Vercel team.`,
         { type: "config", subtype: "inference_failed" }
       );
@@ -1196,7 +1215,7 @@ If you suspect this is thrown in error, please reach out to the Vercel team.`,
   }
 }
 function inferMicrofrontendsLocation(opts) {
-  const cacheKey = `${opts.repositoryRoot}-${opts.applicationContext.name}`;
+  const cacheKey = `${opts.repositoryRoot}-${opts.applicationContext.name}${opts.customConfigFilename ? `-${opts.customConfigFilename}` : ""}`;
   if (configCache[cacheKey]) {
     return configCache[cacheKey];
   }
@@ -1262,8 +1281,13 @@ function findPackageRoot(startDir) {
 // src/config/microfrontends/utils/find-config.ts
 var import_node_fs5 = __toESM(require("fs"), 1);
 var import_node_path5 = require("path");
-function findConfig({ dir }) {
-  for (const filename of CONFIGURATION_FILENAMES) {
+function findConfig({
+  dir,
+  customConfigFilename
+}) {
+  for (const filename of getPossibleConfigurationFilenames({
+    customConfigFilename
+  })) {
     const maybeConfig = (0, import_node_path5.join)(dir, filename);
     if (import_node_fs5.default.existsSync(maybeConfig)) {
       return maybeConfig;
@@ -1695,7 +1719,11 @@ var MicrofrontendsServer = class {
         appName,
         packageRoot
       });
-      const maybeConfig = findConfig({ dir: packageRoot });
+      const customConfigFilename = process.env.VC_MICROFRONTENDS_CONFIG_FILE_NAME;
+      const maybeConfig = findConfig({
+        dir: packageRoot,
+        customConfigFilename
+      });
       if (maybeConfig) {
         return MicrofrontendsServer.fromFile({
           filePath: maybeConfig,
@@ -1704,11 +1732,9 @@ var MicrofrontendsServer = class {
       }
       const repositoryRoot = findRepositoryRoot();
       const isMonorepo2 = isMonorepo({ repositoryRoot });
-      if (typeof process.env.VC_MICROFRONTENDS_CONFIG === "string") {
-        const maybeConfigFromEnv = (0, import_node_path8.resolve)(
-          packageRoot,
-          process.env.VC_MICROFRONTENDS_CONFIG
-        );
+      const configFromEnv = process.env.VC_MICROFRONTENDS_CONFIG;
+      if (typeof configFromEnv === "string") {
+        const maybeConfigFromEnv = (0, import_node_path8.resolve)(packageRoot, configFromEnv);
         if (maybeConfigFromEnv) {
           return MicrofrontendsServer.fromFile({
             filePath: maybeConfigFromEnv,
@@ -1717,7 +1743,8 @@ var MicrofrontendsServer = class {
         }
       } else {
         const maybeConfigFromVercel = findConfig({
-          dir: (0, import_node_path8.join)(packageRoot, ".vercel")
+          dir: (0, import_node_path8.join)(packageRoot, ".vercel"),
+          customConfigFilename
         });
         if (maybeConfigFromVercel) {
           return MicrofrontendsServer.fromFile({
@@ -1728,9 +1755,13 @@ var MicrofrontendsServer = class {
         if (isMonorepo2) {
           const defaultPackage = inferMicrofrontendsLocation({
             repositoryRoot,
-            applicationContext
+            applicationContext,
+            customConfigFilename
+          });
+          const maybeConfigFromDefault = findConfig({
+            dir: defaultPackage,
+            customConfigFilename
           });
-          const maybeConfigFromDefault = findConfig({ dir: defaultPackage });
           if (maybeConfigFromDefault) {
             return MicrofrontendsServer.fromFile({
               filePath: maybeConfigFromDefault,
@@ -2112,12 +2143,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 +2155,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 +2178,9 @@ var ProxyRequestRouter = class {
       protocol,
       hostname,
       port,
-      application: applicationName
+      application: applicationName,
+      isLocal: useDev,
+      originalApplication: application.name
     };
   }
   /**
@@ -2225,8 +2254,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 +2271,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 +2291,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 +2308,9 @@ var ProxyRequestRouter = class {
                 return null;
               }
             }
+            console.log(
+              ` ${path7} - Matched ${childPath}. Routing to ${formatProxyTarget(target)}`
+            );
             return { path: path7, ...target };
           }
         }
@@ -2310,8 +2339,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 +2368,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 +2386,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 +2410,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 +2422,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 +2453,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 +2468,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 +2489,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 +2530,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 +2594,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 +2655,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 +2757,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 +2769,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 +2791,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`;