@vercel/microfrontends 1.5.0 → 2.0.0-canary.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @vercel/microfrontends
 
+## 2.0.0-canary.0
+
+> **Check out our [Public Beta](https://vercel.com/changelog/microfrontends-are-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`
+  - Remove project names and flag names from the Microfrontends client configuration.
+
 ## 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: "1.5.0",
+  version: "2.0.0-canary.0",
   private: false,
   description: "Defines configuration and utilities for microfrontends development",
   keywords: [
@@ -165,12 +165,14 @@ var package_default = {
   },
   dependencies: {
     "@next/env": "15.4.0-canary.41",
+    "@types/md5": "^2.3.5",
     ajv: "^8.17.1",
     commander: "^12.1.0",
     cookie: "0.4.0",
     "fast-glob": "^3.3.2",
     "http-proxy": "^1.18.1",
     "jsonc-parser": "^3.3.1",
+    md5: "^2.3.0",
     nanoid: "^3.3.9",
     "path-to-regexp": "6.2.1",
     semver: "^7.7.2"
@@ -242,7 +244,7 @@ var http = __toESM(require("http"), 1);
 var https = __toESM(require("https"), 1);
 var import_node_url = require("url");
 var import_cookie = require("cookie");
-var import_path_to_regexp3 = require("path-to-regexp");
+var import_path_to_regexp2 = require("path-to-regexp");
 var import_http_proxy = __toESM(require("http-proxy"), 1);
 
 // src/config/microfrontends-config/isomorphic/index.ts
@@ -357,84 +359,6 @@ function isDefaultApp(a) {
   return !("routing" in a);
 }
 
-// src/config/microfrontends-config/client/index.ts
-var import_path_to_regexp = require("path-to-regexp");
-var regexpCache = /* @__PURE__ */ new Map();
-var getRegexp = (path7) => {
-  const existing = regexpCache.get(path7);
-  if (existing) {
-    return existing;
-  }
-  const regexp = (0, import_path_to_regexp.pathToRegexp)(path7);
-  regexpCache.set(path7, regexp);
-  return regexp;
-};
-var MicrofrontendConfigClient = class {
-  constructor(config, opts) {
-    this.pathCache = {};
-    this.serialized = config;
-    if (opts?.removeFlaggedPaths) {
-      for (const app of Object.values(config.applications)) {
-        if (app.routing) {
-          app.routing = app.routing.filter((match) => !match.flag);
-        }
-      }
-    }
-    this.applications = config.applications;
-  }
-  /**
-   * Create a new `MicrofrontendConfigClient` from a JSON string.
-   * Config must be passed in to remain framework agnostic
-   */
-  static fromEnv(config, opts) {
-    if (!config) {
-      throw new Error(
-        "Could not construct MicrofrontendConfigClient: configuration is empty or undefined. Did you set up your application with `withMicrofrontends`?"
-      );
-    }
-    return new MicrofrontendConfigClient(
-      JSON.parse(config),
-      opts
-    );
-  }
-  isEqual(other) {
-    return this === other || JSON.stringify(this.applications) === JSON.stringify(other.applications);
-  }
-  getApplicationNameForPath(path7) {
-    if (!path7.startsWith("/")) {
-      throw new Error(`Path must start with a /`);
-    }
-    if (this.pathCache[path7]) {
-      return this.pathCache[path7];
-    }
-    const pathname = new URL(path7, "https://example.com").pathname;
-    for (const [name, application] of Object.entries(this.applications)) {
-      if (application.routing) {
-        for (const group of application.routing) {
-          for (const childPath of group.paths) {
-            const regexp = getRegexp(childPath);
-            if (regexp.test(pathname)) {
-              this.pathCache[path7] = name;
-              return name;
-            }
-          }
-        }
-      }
-    }
-    const defaultApplication = Object.entries(this.applications).find(
-      ([, application]) => application.default
-    );
-    if (!defaultApplication) {
-      return null;
-    }
-    this.pathCache[path7] = defaultApplication[0];
-    return defaultApplication[0];
-  }
-  serialize() {
-    return this.serialized;
-  }
-};
-
 // src/config/overrides/constants.ts
 var OVERRIDES_COOKIE_PREFIX = "vercel-micro-frontends-override";
 var OVERRIDES_ENV_COOKIE_PREFIX = `${OVERRIDES_COOKIE_PREFIX}:env:`;
@@ -469,11 +393,12 @@ function parseOverrides(cookies) {
 }
 
 // src/config/microfrontends-config/isomorphic/validation.ts
-var import_path_to_regexp2 = require("path-to-regexp");
+var import_path_to_regexp = require("path-to-regexp");
 var LIST_FORMATTER = new Intl.ListFormat("en", {
   style: "long",
   type: "conjunction"
 });
+var VALID_ASSET_PREFIX_REGEXP = /^[a-z](?:[a-z0-9-]*[a-z0-9])?$/;
 var validateConfigPaths = (applicationConfigsById) => {
   if (!applicationConfigsById) {
     return;
@@ -496,7 +421,7 @@ var validateConfigPaths = (applicationConfigsById) => {
           } else {
             pathsByApplicationId.set(path7, {
               applications: [id],
-              matcher: (0, import_path_to_regexp2.pathToRegexp)(path7),
+              matcher: (0, import_path_to_regexp.pathToRegexp)(path7),
               applicationId: id
             });
           }
@@ -543,7 +468,7 @@ var validateConfigPaths = (applicationConfigsById) => {
 var PATH_DEFAULT_PATTERN = "[^\\/#\\?]+?";
 function validatePathExpression(path7) {
   try {
-    const tokens = (0, import_path_to_regexp2.parse)(path7);
+    const tokens = (0, import_path_to_regexp.parse)(path7);
     if (/(?<!\\)\{/.test(path7)) {
       return `Optional paths are not supported: ${path7}`;
     }
@@ -600,6 +525,22 @@ var validateAppPaths = (name, app) => {
       }
     }
   }
+  if (app.assetPrefix) {
+    if (!VALID_ASSET_PREFIX_REGEXP.test(app.assetPrefix)) {
+      throw new MicrofrontendError(
+        `Invalid asset prefix for application "${name}". ${app.assetPrefix} must start with a lowercase letter and contain only lowercase letters, numbers, and hyphens.`,
+        { type: "application", subtype: "invalid_asset_prefix" }
+      );
+    }
+    if (app.assetPrefix !== `vc-ap-${name}` && !app.routing.some(
+      (group) => group.paths.includes(`/${app.assetPrefix}/:path*`) && !group.flag
+    )) {
+      throw new MicrofrontendError(
+        `When \`assetPrefix\` is specified, \`/${app.assetPrefix}/:path*\` must be added the routing paths for the application. Changing the asset prefix is not a forwards and backwards compatible change, and the custom asset prefix should be added to \`paths\` and deployed before setting the \`assetPrefix\` field.`,
+        { type: "application", subtype: "invalid_asset_prefix" }
+      );
+    }
+  }
 };
 var validateConfigDefaultApplication = (applicationConfigsById) => {
   if (!applicationConfigsById) {
@@ -631,6 +572,15 @@ var validateConfigDefaultApplication = (applicationConfigsById) => {
   }
 };
 
+// src/config/microfrontends-config/isomorphic/utils/hash-application-name.ts
+var import_md5 = __toESM(require("md5"), 1);
+function hashApplicationName(name) {
+  if (!name) {
+    throw new Error("Application name is required to generate hash");
+  }
+  return (0, import_md5.default)(name).substring(0, 6).padStart(6, "0");
+}
+
 // src/config/microfrontends-config/isomorphic/utils/generate-asset-prefix.ts
 var PREFIX = "vc-ap";
 function generateAssetPrefixFromName({
@@ -639,7 +589,7 @@ function generateAssetPrefixFromName({
   if (!name) {
     throw new Error("Name is required to generate an asset prefix");
   }
-  return `${PREFIX}-${name}`;
+  return `${PREFIX}-${hashApplicationName(name)}`;
 }
 
 // src/config/microfrontends-config/isomorphic/utils/generate-port.ts
@@ -799,7 +749,13 @@ var Application = class {
     return this.default;
   }
   getAssetPrefix() {
-    return generateAssetPrefixFromName({ name: this.name });
+    const generatedAssetPrefix = generateAssetPrefixFromName({
+      name: this.name
+    });
+    if ("assetPrefix" in this.serialized) {
+      return this.serialized.assetPrefix ?? generatedAssetPrefix;
+    }
+    return generatedAssetPrefix;
   }
   getAutomationBypassEnvVarName() {
     return generateAutomationBypassEnvVarName({ name: this.name });
@@ -933,7 +889,7 @@ var MicrofrontendConfigIsomorphic = class {
     );
     if (!app) {
       throw new MicrofrontendError(
-        `Could not find microfrontends configuration for application "${name}"`,
+        `Could not find microfrontends configuration for application "${name}". If the name in package.json differs from your Vercel Project name, set the \`packageName\` field for the application in \`microfrontends.json\` to ensure that the configuration can be found locally.`,
         {
           type: "application",
           subtype: "not_found"
@@ -978,23 +934,6 @@ var MicrofrontendConfigIsomorphic = class {
   toSchemaJson() {
     return this.serialized.config;
   }
-  toClientConfig() {
-    const applications = Object.fromEntries(
-      Object.entries(this.childApplications).map(([name, application]) => [
-        name,
-        {
-          default: false,
-          routing: application.routing
-        }
-      ])
-    );
-    applications[this.defaultApplication.name] = {
-      default: true
-    };
-    return new MicrofrontendConfigClient({
-      applications
-    });
-  }
   serialize() {
     return this.serialized;
   }
@@ -1057,8 +996,9 @@ var CONFIGURATION_FILENAMES = [
 var configCache = {};
 function findPackageWithMicrofrontendsConfig({
   repositoryRoot,
-  applicationName
+  applicationContext
 }) {
+  const applicationName = applicationContext.name;
   try {
     const microfrontendsJsonPaths = import_fast_glob.default.globSync(
       `**/{${CONFIGURATION_FILENAMES.join(",")}}`,
@@ -1100,26 +1040,45 @@ ${matchingPaths.join("\n  \u2022 ")}`,
       );
     }
     if (matchingPaths.length === 0) {
+      let additionalErrorMessage = "";
+      if (microfrontendsJsonPaths.length > 0) {
+        if (!applicationContext.projectName) {
+          additionalErrorMessage = `
+
+If the name in package.json (${applicationContext.packageJsonName}) differs from your Vercel Project name, set the \`packageName\` field for the application in \`microfrontends.json\` to ensure that the configuration can be found locally.`;
+        } else {
+          additionalErrorMessage = `
+
+Names of applications in \`microfrontends.json\` must match the Vercel Project name (${applicationContext.projectName}).`;
+        }
+      }
       throw new MicrofrontendError(
-        `Could not find a \`microfrontends.json\` file in the repository that contains "applications.${applicationName}". 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 you suspect this is thrown in error, please reach out to the Vercel team.`,
+        `Could not find a \`microfrontends.json\` file in the repository that contains the "${applicationName}" application.${additionalErrorMessage}
+
+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 you suspect this is thrown in error, please reach out to the Vercel team.`,
         { type: "config", subtype: "inference_failed" }
       );
     }
     const [packageJsonPath] = matchingPaths;
     return (0, import_node_path2.dirname)(packageJsonPath);
   } catch (error) {
+    if (error instanceof MicrofrontendError) {
+      throw error;
+    }
     return null;
   }
 }
 function inferMicrofrontendsLocation(opts) {
-  const cacheKey = `${opts.repositoryRoot}-${opts.applicationName}`;
+  const cacheKey = `${opts.repositoryRoot}-${opts.applicationContext.name}`;
   if (configCache[cacheKey]) {
     return configCache[cacheKey];
   }
   const result = findPackageWithMicrofrontendsConfig(opts);
   if (!result) {
     throw new MicrofrontendError(
-      `Could not infer the location of the \`microfrontends.json\` file for application "${opts.applicationName}" starting in directory "${opts.repositoryRoot}".`,
+      `Could not infer the location of the \`microfrontends.json\` file for application "${opts.applicationContext.name}" starting in directory "${opts.repositoryRoot}".`,
       { type: "config", subtype: "inference_failed" }
     );
   }
@@ -1195,8 +1154,31 @@ function getApplicationContext(opts) {
   if (opts?.appName) {
     return { name: opts.appName };
   }
+  if (process.env.VERCEL_PROJECT_NAME) {
+    return {
+      name: process.env.VERCEL_PROJECT_NAME,
+      projectName: process.env.VERCEL_PROJECT_NAME
+    };
+  }
   if (process.env.NX_TASK_TARGET_PROJECT) {
-    return { name: process.env.NX_TASK_TARGET_PROJECT };
+    return {
+      name: process.env.NX_TASK_TARGET_PROJECT,
+      packageJsonName: process.env.NX_TASK_TARGET_PROJECT
+    };
+  }
+  try {
+    const vercelProjectJsonPath = import_node_fs6.default.readFileSync(
+      import_node_path6.default.join(opts?.packageRoot || ".", ".vercel", "project.json"),
+      "utf-8"
+    );
+    const projectJson = JSON.parse(vercelProjectJsonPath);
+    if (projectJson.projectName) {
+      return {
+        name: projectJson.projectName,
+        projectName: projectJson.projectName
+      };
+    }
+  } catch (_) {
   }
   try {
     const packageJsonString = import_node_fs6.default.readFileSync(
@@ -1214,7 +1196,7 @@ function getApplicationContext(opts) {
         }
       );
     }
-    return { name: packageJson.name };
+    return { name: packageJson.name, packageJsonName: packageJson.name };
   } catch (err) {
     throw MicrofrontendError.handle(err, {
       fileName: "package.json"
@@ -1354,6 +1336,10 @@ var schema_default = {
         routing: {
           $ref: "#/definitions/Routing",
           description: "Groups of path expressions that are routed to this application."
+        },
+        assetPrefix: {
+          type: "string",
+          description: "The name of the asset prefix to use instead of the auto-generated name.\n\nThe asset prefix is used to prefix all paths to static assets, such as JS, CSS, or images that are served by a specific application. It is necessary to ensure there are no conflicts with other applications on the same domain.\n\nAn auto-generated asset prefix of the form `vc-ap-<hash>` is used when this field is not provided.\n\nWhen this field is provided, `/${assetPrefix}/:path*` must also be added to the list of paths in the `routing` field. Changing the asset prefix after a microfrontend application has already been deployed is not a forwards and backwards compatible change, and the asset prefix should be added to the `routing` field and deployed before setting the `assetPrefix` field."
         }
       },
       required: [
@@ -1579,7 +1565,7 @@ var MicrofrontendsServer = class {
     }
     try {
       const packageRoot = findPackageRoot(directory);
-      const { name: appName } = getApplicationContext({ packageRoot });
+      const applicationContext = getApplicationContext({ packageRoot });
       const maybeConfig = findConfig({ dir: packageRoot });
       if (maybeConfig) {
         return MicrofrontendsServer.fromFile({
@@ -1613,7 +1599,7 @@ var MicrofrontendsServer = class {
         if (isMonorepo2) {
           const defaultPackage = inferMicrofrontendsLocation({
             repositoryRoot,
-            applicationName: appName
+            applicationContext
           });
           const maybeConfigFromDefault = findConfig({ dir: defaultPackage });
           if (maybeConfigFromDefault) {
@@ -2145,7 +2131,7 @@ var ProxyRequestRouter = class {
       }
       for (const group of application.routing) {
         for (const childPath of group.paths) {
-          const regexp = (0, import_path_to_regexp3.pathToRegexp)(childPath);
+          const regexp = (0, import_path_to_regexp2.pathToRegexp)(childPath);
           if (regexp.test(url.pathname)) {
             mfeDebug(
               `routing ${path7} to '${target.application}' at ${target.hostname}`
@@ -2188,7 +2174,7 @@ var ProxyRequestRouter = class {
     const pathname = url.pathname;
     const target = this.getApplicationTarget(app);
     for (const rewrite of rewrites) {
-      if ((0, import_path_to_regexp3.pathToRegexp)(`/${app.getAssetPrefix()}${rewrite}`).test(pathname)) {
+      if ((0, import_path_to_regexp2.pathToRegexp)(`/${app.getAssetPrefix()}${rewrite}`).test(pathname)) {
         mfeDebug(
           `routing ${pathname} to '${target.application}' at ${target.hostname}`
         );
@@ -2205,8 +2191,8 @@ var ProxyRequestRouter = class {
     referer = void 0,
     applications
   }) {
-    const isStackFrame = (0, import_path_to_regexp3.pathToRegexp)("/__nextjs_original-stack-frame").test(url.pathname) || // Plural form was introduced in https://github.com/vercel/next.js/pull/75557
-    (0, import_path_to_regexp3.pathToRegexp)("/__nextjs_original-stack-frames").test(url.pathname);
+    const isStackFrame = (0, import_path_to_regexp2.pathToRegexp)("/__nextjs_original-stack-frame").test(url.pathname) || // Plural form was introduced in https://github.com/vercel/next.js/pull/75557
+    (0, import_path_to_regexp2.pathToRegexp)("/__nextjs_original-stack-frames").test(url.pathname);
     if (!referer || !isStackFrame) {
       return null;
     }
@@ -2226,7 +2212,7 @@ var ProxyRequestRouter = class {
     } : null;
   }
   checkNextSourceMap({ url }) {
-    const isSourceMap = (0, import_path_to_regexp3.pathToRegexp)("/__nextjs_source-map").test(url.pathname);
+    const isSourceMap = (0, import_path_to_regexp2.pathToRegexp)("/__nextjs_source-map").test(url.pathname);
     if (!isSourceMap) {
       return null;
     }
@@ -2246,7 +2232,7 @@ var ProxyRequestRouter = class {
     url,
     applications
   }) {
-    const isNextImage = (0, import_path_to_regexp3.pathToRegexp)("/_next/image").test(url.pathname);
+    const isNextImage = (0, import_path_to_regexp2.pathToRegexp)("/_next/image").test(url.pathname);
     if (!isNextImage) {
       return null;
     }

package/dist/config.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/config/microfrontends-config/isomorphic/index.ts
@@ -134,84 +144,6 @@ function isDefaultApp(a) {
   return !("routing" in a);
 }
 
-// src/config/microfrontends-config/client/index.ts
-var import_path_to_regexp = require("path-to-regexp");
-var regexpCache = /* @__PURE__ */ new Map();
-var getRegexp = (path) => {
-  const existing = regexpCache.get(path);
-  if (existing) {
-    return existing;
-  }
-  const regexp = (0, import_path_to_regexp.pathToRegexp)(path);
-  regexpCache.set(path, regexp);
-  return regexp;
-};
-var MicrofrontendConfigClient = class {
-  constructor(config, opts) {
-    this.pathCache = {};
-    this.serialized = config;
-    if (opts?.removeFlaggedPaths) {
-      for (const app of Object.values(config.applications)) {
-        if (app.routing) {
-          app.routing = app.routing.filter((match) => !match.flag);
-        }
-      }
-    }
-    this.applications = config.applications;
-  }
-  /**
-   * Create a new `MicrofrontendConfigClient` from a JSON string.
-   * Config must be passed in to remain framework agnostic
-   */
-  static fromEnv(config, opts) {
-    if (!config) {
-      throw new Error(
-        "Could not construct MicrofrontendConfigClient: configuration is empty or undefined. Did you set up your application with `withMicrofrontends`?"
-      );
-    }
-    return new MicrofrontendConfigClient(
-      JSON.parse(config),
-      opts
-    );
-  }
-  isEqual(other) {
-    return this === other || JSON.stringify(this.applications) === JSON.stringify(other.applications);
-  }
-  getApplicationNameForPath(path) {
-    if (!path.startsWith("/")) {
-      throw new Error(`Path must start with a /`);
-    }
-    if (this.pathCache[path]) {
-      return this.pathCache[path];
-    }
-    const pathname = new URL(path, "https://example.com").pathname;
-    for (const [name, application] of Object.entries(this.applications)) {
-      if (application.routing) {
-        for (const group of application.routing) {
-          for (const childPath of group.paths) {
-            const regexp = getRegexp(childPath);
-            if (regexp.test(pathname)) {
-              this.pathCache[path] = name;
-              return name;
-            }
-          }
-        }
-      }
-    }
-    const defaultApplication = Object.entries(this.applications).find(
-      ([, application]) => application.default
-    );
-    if (!defaultApplication) {
-      return null;
-    }
-    this.pathCache[path] = defaultApplication[0];
-    return defaultApplication[0];
-  }
-  serialize() {
-    return this.serialized;
-  }
-};
-
 // src/config/overrides/constants.ts
 var OVERRIDES_COOKIE_PREFIX = "vercel-micro-frontends-override";
 var OVERRIDES_ENV_COOKIE_PREFIX = `${OVERRIDES_COOKIE_PREFIX}:env:`;
@@ -246,11 +178,12 @@ function parseOverrides(cookies) {
 }
 
 // src/config/microfrontends-config/isomorphic/validation.ts
-var import_path_to_regexp2 = require("path-to-regexp");
+var import_path_to_regexp = require("path-to-regexp");
 var LIST_FORMATTER = new Intl.ListFormat("en", {
   style: "long",
   type: "conjunction"
 });
+var VALID_ASSET_PREFIX_REGEXP = /^[a-z](?:[a-z0-9-]*[a-z0-9])?$/;
 var validateConfigPaths = (applicationConfigsById) => {
   if (!applicationConfigsById) {
     return;
@@ -273,7 +206,7 @@ var validateConfigPaths = (applicationConfigsById) => {
           } else {
             pathsByApplicationId.set(path, {
               applications: [id],
-              matcher: (0, import_path_to_regexp2.pathToRegexp)(path),
+              matcher: (0, import_path_to_regexp.pathToRegexp)(path),
               applicationId: id
             });
           }
@@ -320,7 +253,7 @@ var validateConfigPaths = (applicationConfigsById) => {
 var PATH_DEFAULT_PATTERN = "[^\\/#\\?]+?";
 function validatePathExpression(path) {
   try {
-    const tokens = (0, import_path_to_regexp2.parse)(path);
+    const tokens = (0, import_path_to_regexp.parse)(path);
     if (/(?<!\\)\{/.test(path)) {
       return `Optional paths are not supported: ${path}`;
     }
@@ -377,6 +310,22 @@ var validateAppPaths = (name, app) => {
       }
     }
   }
+  if (app.assetPrefix) {
+    if (!VALID_ASSET_PREFIX_REGEXP.test(app.assetPrefix)) {
+      throw new MicrofrontendError(
+        `Invalid asset prefix for application "${name}". ${app.assetPrefix} must start with a lowercase letter and contain only lowercase letters, numbers, and hyphens.`,
+        { type: "application", subtype: "invalid_asset_prefix" }
+      );
+    }
+    if (app.assetPrefix !== `vc-ap-${name}` && !app.routing.some(
+      (group) => group.paths.includes(`/${app.assetPrefix}/:path*`) && !group.flag
+    )) {
+      throw new MicrofrontendError(
+        `When \`assetPrefix\` is specified, \`/${app.assetPrefix}/:path*\` must be added the routing paths for the application. Changing the asset prefix is not a forwards and backwards compatible change, and the custom asset prefix should be added to \`paths\` and deployed before setting the \`assetPrefix\` field.`,
+        { type: "application", subtype: "invalid_asset_prefix" }
+      );
+    }
+  }
 };
 var validateConfigDefaultApplication = (applicationConfigsById) => {
   if (!applicationConfigsById) {
@@ -408,6 +357,15 @@ var validateConfigDefaultApplication = (applicationConfigsById) => {
   }
 };
 
+// src/config/microfrontends-config/isomorphic/utils/hash-application-name.ts
+var import_md5 = __toESM(require("md5"), 1);
+function hashApplicationName(name) {
+  if (!name) {
+    throw new Error("Application name is required to generate hash");
+  }
+  return (0, import_md5.default)(name).substring(0, 6).padStart(6, "0");
+}
+
 // src/config/microfrontends-config/isomorphic/utils/generate-asset-prefix.ts
 var PREFIX = "vc-ap";
 function generateAssetPrefixFromName({
@@ -416,7 +374,7 @@ function generateAssetPrefixFromName({
   if (!name) {
     throw new Error("Name is required to generate an asset prefix");
   }
-  return `${PREFIX}-${name}`;
+  return `${PREFIX}-${hashApplicationName(name)}`;
 }
 
 // src/config/microfrontends-config/isomorphic/utils/generate-port.ts
@@ -576,7 +534,13 @@ var Application = class {
     return this.default;
   }
   getAssetPrefix() {
-    return generateAssetPrefixFromName({ name: this.name });
+    const generatedAssetPrefix = generateAssetPrefixFromName({
+      name: this.name
+    });
+    if ("assetPrefix" in this.serialized) {
+      return this.serialized.assetPrefix ?? generatedAssetPrefix;
+    }
+    return generatedAssetPrefix;
   }
   getAutomationBypassEnvVarName() {
     return generateAutomationBypassEnvVarName({ name: this.name });
@@ -710,7 +674,7 @@ var MicrofrontendConfigIsomorphic = class {
     );
     if (!app) {
       throw new MicrofrontendError(
-        `Could not find microfrontends configuration for application "${name}"`,
+        `Could not find microfrontends configuration for application "${name}". If the name in package.json differs from your Vercel Project name, set the \`packageName\` field for the application in \`microfrontends.json\` to ensure that the configuration can be found locally.`,
         {
           type: "application",
           subtype: "not_found"
@@ -755,23 +719,6 @@ var MicrofrontendConfigIsomorphic = class {
   toSchemaJson() {
     return this.serialized.config;
   }
-  toClientConfig() {
-    const applications = Object.fromEntries(
-      Object.entries(this.childApplications).map(([name, application]) => [
-        name,
-        {
-          default: false,
-          routing: application.routing
-        }
-      ])
-    );
-    applications[this.defaultApplication.name] = {
-      default: true
-    };
-    return new MicrofrontendConfigClient({
-      applications
-    });
-  }
   serialize() {
     return this.serialized;
   }