@module-federation/vite 1.14.1 → 1.14.3

package/lib/index.cjs

@@ -234,11 +234,11 @@ const addEntry = ({ entryName, entryPath, fileName, inject = "entry" }) => {
 				if (!injectHtml()) return;
 				clientInjected = true;
 				const base = viteConfig.base.replace(/\/$/, "");
-				const stripBase = (p) => base && p.startsWith(base) ? p.slice(base.length) : p;
+				const stripBase = (p) => base && p.startsWith(base + "/") ? p.slice(base.length) : p;
 				const html = rewriteEntryScripts(c, (originalSrc) => {
 					return `/@id/${DEV_HTML_PROXY_PREFIX}${new URLSearchParams({
 						init: sanitizeDevEntryPath(stripBase(devEntryPath)),
-						entry: originalSrc
+						entry: sanitizeDevEntryPath(stripBase(originalSrc))
 					}).toString()}`;
 				});
 				return html === c ? injectEntryScript(c, stripBase(devEntryPath)) : html;
@@ -253,11 +253,7 @@ const addEntry = ({ entryName, entryPath, fileName, inject = "entry" }) => {
 			const initSrc = params.get("init");
 			const entrySrc = params.get("entry");
 			if (!initSrc || !entrySrc) return;
-			return `
-const baseUrl = document.baseURI || window.location.href;
-await import(new URL(${JSON.stringify(initSrc)}, baseUrl).href);
-await import(new URL(${JSON.stringify(entrySrc)}, baseUrl).href);
-`;
+			return `import ${JSON.stringify(initSrc)};\nimport ${JSON.stringify(entrySrc)};\n`;
 		},
 		transform(code, id) {
 			if (id.includes("node_modules") || inject !== "html" || htmlFilePath) return;
@@ -1243,6 +1239,16 @@ function generateExposes(options) {
 	return `
     const cssAssetMap = ${JSON.stringify(options.bundleAllCSS ? EXPOSES_CSS_MAP_PLACEHOLDER : {})};
     const injectedCssHrefs = new Set();
+    let exposeLoadQueue = Promise.resolve();
+
+    async function importExposedModule(loader) {
+      const currentLoad = exposeLoadQueue.then(loader, loader);
+      exposeLoadQueue = currentLoad.then(
+        () => undefined,
+        () => undefined
+      );
+      return currentLoad;
+    }
 
     async function injectCssAssets(exposeKey) {
       if (typeof document === "undefined") {
@@ -1287,7 +1293,9 @@ function generateExposes(options) {
 		return `
         ${JSON.stringify(key)}: async () => {
           await injectCssAssets(${JSON.stringify(key)})
-          const importModule = await import(${JSON.stringify(options.exposes[key].import)})
+          const importModule = await importExposedModule(
+            () => import(${JSON.stringify(options.exposes[key].import)})
+          )
           const exportModule = {}
           Object.assign(exportModule, importModule)
           Object.defineProperty(exportModule, "__esModule", {
@@ -2623,6 +2631,37 @@ var PromiseStore = class {
 function getPrebuildResolutionSource(pkgName, shareItem) {
 	return getConcreteSharedImportSource(pkgName, shareItem) || pkgName;
 }
+/**
+* Reads the dependencies of an installed package from its package.json.
+*/
+function getPackageDependencies(pkg) {
+	const packageName = removePathFromNpmPackage(pkg);
+	const cwd = getPackageDetectionCwd();
+	const candidates = [pathe.default.join(cwd, "node_modules", packageName, "package.json")];
+	for (const candidate of candidates) if ((0, fs.existsSync)(candidate)) try {
+		const json = JSON.parse((0, fs.readFileSync)(candidate, "utf-8"));
+		return Object.keys(json.dependencies || {});
+	} catch {}
+	return [];
+}
+/**
+* In dev mode, detects shared packages that are sub-dependencies of other
+* shared packages and removes them to avoid initialization order issues.
+* For example, `lit` depends on `lit-html`, `lit-element`, and
+* `@lit/reactive-element` — sharing them separately causes the child modules
+* to load before their parent, resulting in `undefined` class extends errors.
+*/
+function excludeSharedSubDependencies(shared) {
+	const sharedKeys = new Set(Object.keys(shared));
+	for (const parentKey of sharedKeys) {
+		const deps = getPackageDependencies(parentKey);
+		for (const dep of deps) if (sharedKeys.has(dep) && dep !== parentKey) {
+			mfWarn(`"${dep}" is a dependency of shared package "${parentKey}" and is also shared separately. This may cause initialization order issues in dev mode. Consider sharing only "${parentKey}".\n  Auto-excluding "${dep}" from shared modules for dev mode.`);
+			delete shared[dep];
+			sharedKeys.delete(dep);
+		}
+	}
+}
 function proxySharedModule(options) {
 	const { shared = {} } = options;
 	let _config;
@@ -2648,6 +2687,7 @@ function proxySharedModule(options) {
 			const isRolldown = getIsRolldown(this);
 			_command = command;
 			useDirectReactImport = isVinext || isAstro;
+			if (command === "serve") excludeSharedSubDependencies(shared);
 			config.resolve.alias.push(...Object.keys(shared).filter((key) => !(useDirectReactImport && key === "react")).map((key) => {
 				const keyBase = key.endsWith("/") ? key.slice(0, -1) : key;
 				const escapeRegex = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -3245,6 +3285,44 @@ function escapeUnsafeJsSourceChars(str) {
 		return UNSAFE_JS_SOURCE_CHAR_MAP[char] ?? char;
 	});
 }
+function insertAfterLastTopLevelImport(code, snippet) {
+	let cursor = 0;
+	let lastImportEnd = -1;
+	const skipTrivia = () => {
+		while (cursor < code.length) {
+			if (/\s/.test(code[cursor])) {
+				cursor++;
+				continue;
+			}
+			if (code.startsWith("//", cursor)) {
+				const lineEnd = code.indexOf("\n", cursor);
+				cursor = lineEnd === -1 ? code.length : lineEnd + 1;
+				continue;
+			}
+			if (code.startsWith("/*", cursor)) {
+				const commentEnd = code.indexOf("*/", cursor + 2);
+				cursor = commentEnd === -1 ? code.length : commentEnd + 2;
+				continue;
+			}
+			break;
+		}
+	};
+	while (cursor < code.length) {
+		skipTrivia();
+		if (!code.startsWith("import", cursor) || !/[\s"'*{]/.test(code[cursor + 6] ?? "")) break;
+		const statementEnd = code.indexOf(";", cursor);
+		if (statementEnd !== -1) {
+			lastImportEnd = statementEnd + 1;
+			cursor = statementEnd + 1;
+			continue;
+		}
+		const lineEnd = code.indexOf("\n", cursor);
+		lastImportEnd = lineEnd === -1 ? code.length : lineEnd + 1;
+		cursor = lastImportEnd;
+	}
+	if (lastImportEnd === -1) return;
+	return code.slice(0, lastImportEnd) + snippet + code.slice(lastImportEnd);
+}
 /**
 * Plugin that runs FIRST to create virtual module files in the config hook.
 * This prevents 504 "Outdated Optimize Dep" errors by ensuring files exist
@@ -3479,11 +3557,9 @@ function federation(mfUserOptions) {
 					for (const v of importedFromLoadShare) if (new RegExp("\\(" + v + "\\(\\)\\s*,\\s*\\w+\\(\\w+\\)\\)").test(code)) allInits.push(v);
 					if (allInits.length === 0) continue;
 					const awaits = allInits.map((v) => `await ${v}();`).join("");
-					const lastFromRegex = /\bfrom\s*["'][^"']*["']\s*;?/g;
-					let lastFromEnd = -1;
-					while ((m = lastFromRegex.exec(code)) !== null) lastFromEnd = m.index + m[0].length;
-					if (lastFromEnd !== -1) {
-						chunk.code = code.slice(0, lastFromEnd) + awaits + code.slice(lastFromEnd);
+					const codeWithAwaits = insertAfterLastTopLevelImport(code, awaits);
+					if (codeWithAwaits) {
+						chunk.code = codeWithAwaits;
 						continue;
 					}
 					const exportIdx = code.search(/\bexport\s*[{d]/);
@@ -3614,14 +3690,7 @@ function federation(mfUserOptions) {
 				})) return;
 				if (/await\s+init_\w+__loadShare__/.test(code)) return;
 				if (code.includes("__esmMin")) return;
-				const awaits = [...initFns].map((fn) => `await ${fn}();`).join("\n");
-				const topLevelImportRe = /^import\s/gm;
-				let lastImportIdx = -1;
-				let importMatch;
-				while ((importMatch = topLevelImportRe.exec(code)) !== null) lastImportIdx = importMatch.index;
-				if (lastImportIdx === -1) return;
-				const lineEnd = code.indexOf("\n", lastImportIdx);
-				return code.slice(0, lineEnd + 1) + awaits + "\n" + code.slice(lineEnd + 1);
+				return insertAfterLastTopLevelImport(code, [...initFns].map((fn) => `await ${fn}();`).join("\n") + "\n");
 			}
 		},
 		PluginDevProxyModuleTopLevelAwait(),

package/lib/index.mjs

@@ -212,11 +212,11 @@ const addEntry = ({ entryName, entryPath, fileName, inject = "entry" }) => {
 				if (!injectHtml()) return;
 				clientInjected = true;
 				const base = viteConfig.base.replace(/\/$/, "");
-				const stripBase = (p) => base && p.startsWith(base) ? p.slice(base.length) : p;
+				const stripBase = (p) => base && p.startsWith(base + "/") ? p.slice(base.length) : p;
 				const html = rewriteEntryScripts(c, (originalSrc) => {
 					return `/@id/${DEV_HTML_PROXY_PREFIX}${new URLSearchParams({
 						init: sanitizeDevEntryPath(stripBase(devEntryPath)),
-						entry: originalSrc
+						entry: sanitizeDevEntryPath(stripBase(originalSrc))
 					}).toString()}`;
 				});
 				return html === c ? injectEntryScript(c, stripBase(devEntryPath)) : html;
@@ -231,11 +231,7 @@ const addEntry = ({ entryName, entryPath, fileName, inject = "entry" }) => {
 			const initSrc = params.get("init");
 			const entrySrc = params.get("entry");
 			if (!initSrc || !entrySrc) return;
-			return `
-const baseUrl = document.baseURI || window.location.href;
-await import(new URL(${JSON.stringify(initSrc)}, baseUrl).href);
-await import(new URL(${JSON.stringify(entrySrc)}, baseUrl).href);
-`;
+			return `import ${JSON.stringify(initSrc)};\nimport ${JSON.stringify(entrySrc)};\n`;
 		},
 		transform(code, id) {
 			if (id.includes("node_modules") || inject !== "html" || htmlFilePath) return;
@@ -1220,6 +1216,16 @@ function generateExposes(options) {
 	return `
     const cssAssetMap = ${JSON.stringify(options.bundleAllCSS ? EXPOSES_CSS_MAP_PLACEHOLDER : {})};
     const injectedCssHrefs = new Set();
+    let exposeLoadQueue = Promise.resolve();
+
+    async function importExposedModule(loader) {
+      const currentLoad = exposeLoadQueue.then(loader, loader);
+      exposeLoadQueue = currentLoad.then(
+        () => undefined,
+        () => undefined
+      );
+      return currentLoad;
+    }
 
     async function injectCssAssets(exposeKey) {
       if (typeof document === "undefined") {
@@ -1264,7 +1270,9 @@ function generateExposes(options) {
 		return `
         ${JSON.stringify(key)}: async () => {
           await injectCssAssets(${JSON.stringify(key)})
-          const importModule = await import(${JSON.stringify(options.exposes[key].import)})
+          const importModule = await importExposedModule(
+            () => import(${JSON.stringify(options.exposes[key].import)})
+          )
           const exportModule = {}
           Object.assign(exportModule, importModule)
           Object.defineProperty(exportModule, "__esModule", {
@@ -2600,6 +2608,37 @@ var PromiseStore = class {
 function getPrebuildResolutionSource(pkgName, shareItem) {
 	return getConcreteSharedImportSource(pkgName, shareItem) || pkgName;
 }
+/**
+* Reads the dependencies of an installed package from its package.json.
+*/
+function getPackageDependencies(pkg) {
+	const packageName = removePathFromNpmPackage(pkg);
+	const cwd = getPackageDetectionCwd();
+	const candidates = [path.join(cwd, "node_modules", packageName, "package.json")];
+	for (const candidate of candidates) if (existsSync(candidate)) try {
+		const json = JSON.parse(readFileSync(candidate, "utf-8"));
+		return Object.keys(json.dependencies || {});
+	} catch {}
+	return [];
+}
+/**
+* In dev mode, detects shared packages that are sub-dependencies of other
+* shared packages and removes them to avoid initialization order issues.
+* For example, `lit` depends on `lit-html`, `lit-element`, and
+* `@lit/reactive-element` — sharing them separately causes the child modules
+* to load before their parent, resulting in `undefined` class extends errors.
+*/
+function excludeSharedSubDependencies(shared) {
+	const sharedKeys = new Set(Object.keys(shared));
+	for (const parentKey of sharedKeys) {
+		const deps = getPackageDependencies(parentKey);
+		for (const dep of deps) if (sharedKeys.has(dep) && dep !== parentKey) {
+			mfWarn(`"${dep}" is a dependency of shared package "${parentKey}" and is also shared separately. This may cause initialization order issues in dev mode. Consider sharing only "${parentKey}".\n  Auto-excluding "${dep}" from shared modules for dev mode.`);
+			delete shared[dep];
+			sharedKeys.delete(dep);
+		}
+	}
+}
 function proxySharedModule(options) {
 	const { shared = {} } = options;
 	let _config;
@@ -2625,6 +2664,7 @@ function proxySharedModule(options) {
 			const isRolldown = getIsRolldown(this);
 			_command = command;
 			useDirectReactImport = isVinext || isAstro;
+			if (command === "serve") excludeSharedSubDependencies(shared);
 			config.resolve.alias.push(...Object.keys(shared).filter((key) => !(useDirectReactImport && key === "react")).map((key) => {
 				const keyBase = key.endsWith("/") ? key.slice(0, -1) : key;
 				const escapeRegex = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
@@ -3222,6 +3262,44 @@ function escapeUnsafeJsSourceChars(str) {
 		return UNSAFE_JS_SOURCE_CHAR_MAP[char] ?? char;
 	});
 }
+function insertAfterLastTopLevelImport(code, snippet) {
+	let cursor = 0;
+	let lastImportEnd = -1;
+	const skipTrivia = () => {
+		while (cursor < code.length) {
+			if (/\s/.test(code[cursor])) {
+				cursor++;
+				continue;
+			}
+			if (code.startsWith("//", cursor)) {
+				const lineEnd = code.indexOf("\n", cursor);
+				cursor = lineEnd === -1 ? code.length : lineEnd + 1;
+				continue;
+			}
+			if (code.startsWith("/*", cursor)) {
+				const commentEnd = code.indexOf("*/", cursor + 2);
+				cursor = commentEnd === -1 ? code.length : commentEnd + 2;
+				continue;
+			}
+			break;
+		}
+	};
+	while (cursor < code.length) {
+		skipTrivia();
+		if (!code.startsWith("import", cursor) || !/[\s"'*{]/.test(code[cursor + 6] ?? "")) break;
+		const statementEnd = code.indexOf(";", cursor);
+		if (statementEnd !== -1) {
+			lastImportEnd = statementEnd + 1;
+			cursor = statementEnd + 1;
+			continue;
+		}
+		const lineEnd = code.indexOf("\n", cursor);
+		lastImportEnd = lineEnd === -1 ? code.length : lineEnd + 1;
+		cursor = lastImportEnd;
+	}
+	if (lastImportEnd === -1) return;
+	return code.slice(0, lastImportEnd) + snippet + code.slice(lastImportEnd);
+}
 /**
 * Plugin that runs FIRST to create virtual module files in the config hook.
 * This prevents 504 "Outdated Optimize Dep" errors by ensuring files exist
@@ -3456,11 +3534,9 @@ function federation(mfUserOptions) {
 					for (const v of importedFromLoadShare) if (new RegExp("\\(" + v + "\\(\\)\\s*,\\s*\\w+\\(\\w+\\)\\)").test(code)) allInits.push(v);
 					if (allInits.length === 0) continue;
 					const awaits = allInits.map((v) => `await ${v}();`).join("");
-					const lastFromRegex = /\bfrom\s*["'][^"']*["']\s*;?/g;
-					let lastFromEnd = -1;
-					while ((m = lastFromRegex.exec(code)) !== null) lastFromEnd = m.index + m[0].length;
-					if (lastFromEnd !== -1) {
-						chunk.code = code.slice(0, lastFromEnd) + awaits + code.slice(lastFromEnd);
+					const codeWithAwaits = insertAfterLastTopLevelImport(code, awaits);
+					if (codeWithAwaits) {
+						chunk.code = codeWithAwaits;
 						continue;
 					}
 					const exportIdx = code.search(/\bexport\s*[{d]/);
@@ -3591,14 +3667,7 @@ function federation(mfUserOptions) {
 				})) return;
 				if (/await\s+init_\w+__loadShare__/.test(code)) return;
 				if (code.includes("__esmMin")) return;
-				const awaits = [...initFns].map((fn) => `await ${fn}();`).join("\n");
-				const topLevelImportRe = /^import\s/gm;
-				let lastImportIdx = -1;
-				let importMatch;
-				while ((importMatch = topLevelImportRe.exec(code)) !== null) lastImportIdx = importMatch.index;
-				if (lastImportIdx === -1) return;
-				const lineEnd = code.indexOf("\n", lastImportIdx);
-				return code.slice(0, lineEnd + 1) + awaits + "\n" + code.slice(lineEnd + 1);
+				return insertAfterLastTopLevelImport(code, [...initFns].map((fn) => `await ${fn}();`).join("\n") + "\n");
 			}
 		},
 		PluginDevProxyModuleTopLevelAwait(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/vite",
-  "version": "1.14.1",
+  "version": "1.14.3",
   "description": "Vite plugin for Module Federation",
   "type": "module",
   "main": "./lib/index.cjs",
@@ -70,9 +70,9 @@
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "dependencies": {
-    "@module-federation/dts-plugin": "2.3.1",
-    "@module-federation/runtime": "2.3.1",
-    "@module-federation/sdk": "2.3.1",
+    "@module-federation/dts-plugin": "2.3.2",
+    "@module-federation/runtime": "2.3.2",
+    "@module-federation/sdk": "2.3.2",
     "@rollup/pluginutils": "^5.3.0",
     "defu": "^6.1.4",
     "es-module-lexer": "^2.0.0",