Improve autoconfig detection handling for monorepos / multi framework (#12545)

Co-authored-by: Matt Kane <m@mk.gg>
Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: 3 people

.changeset/smart-frameworks-detect.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+Improve framework detection when multiple frameworks are found
+
+When autoconfig detects multiple frameworks in a project, Wrangler now applies smarter logic to select the most appropriate one. Selecting the wrong one is acceptable locally where the user can change the detected framework, in CI an error is instead thrown.

.changeset/workspace-root-error.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+Throw actionable error when autoconfig is run in the root of a workspace
+
+When running Wrangler commands that trigger auto-configuration (like `wrangler dev` or `wrangler deploy`) in the root directory of a monorepo workspace, a helpful error is now shown directing users to run the command in a specific project's directory instead.

packages/wrangler/src/__tests__/autoconfig/details/get-details-for-auto-config.test.ts

@@ -5,26 +5,35 @@ import { seed } from "@cloudflare/workers-utils/test-helpers";
 import { afterEach, beforeEach, describe, it, vi } from "vitest";
 import * as details from "../../../autoconfig/details";
 import * as configCache from "../../../config-cache";
+import * as isInteractiveModule from "../../../is-interactive";
 import { clearOutputFilePath } from "../../../output";
+import { getPackageManager, NpmPackageManager } from "../../../package-manager";
 import { PAGES_CONFIG_CACHE_FILENAME } from "../../../pages/constants";
 import { mockConsoleMethods } from "../../helpers/mock-console";
 import { mockConfirm } from "../../helpers/mock-dialogs";
 import { useMockIsTTY } from "../../helpers/mock-istty";
 import { runInTempDir } from "../../helpers/run-in-tmp";
 import type { Config } from "@cloudflare/workers-utils";
+import type { Mock, MockInstance } from "vitest";
 
 describe("autoconfig details - getDetailsForAutoConfig()", () => {
 	runInTempDir();
 	const { setIsTTY } = useMockIsTTY();
 	mockConsoleMethods();
+	let isNonInteractiveOrCISpy: MockInstance;
 
 	beforeEach(() => {
 		setIsTTY(true);
+		(getPackageManager as Mock).mockResolvedValue(NpmPackageManager);
+		isNonInteractiveOrCISpy = vi
+			.spyOn(isInteractiveModule, "isNonInteractiveOrCI")
+			.mockReturnValue(false);
 	});
 
 	afterEach(() => {
 		vi.unstubAllGlobals();
 		clearOutputFilePath();
+		isNonInteractiveOrCISpy.mockRestore();
 	});
 
 	it("should set configured: true if a configPath exists", async ({
@@ -74,9 +83,10 @@ describe("autoconfig details - getDetailsForAutoConfig()", () => {
 		}
 	);
 
-	it("should bail when multiple frameworks are detected", async ({
+	it("should select the known framework when multiple frameworks are detected but only one is known", async ({
 		expect,
 	}) => {
+		// Gatsby is not in allKnownFrameworks, so only Astro should be considered
 		await writeFile(
 			"package.json",
 			JSON.stringify({
@@ -87,10 +97,28 @@ describe("autoconfig details - getDetailsForAutoConfig()", () => {
 			})
 		);
 
+		const result = await details.getDetailsForAutoConfig();
+
+		// Should select Astro since it's the only known framework
+		expect(result.framework?.id).toBe("astro");
+		expect(result.framework?.name).toBe("Astro");
+	});
+
+	it("should bail when run in the root of a workspace", async ({ expect }) => {
+		await seed({
+			"pnpm-workspace.yaml": "packages:\n  - 'packages/*'\n",
+			"package.json": JSON.stringify({
+				name: "my-workspace",
+				workspaces: ["packages/*"],
+			}),
+			"packages/my-app/package.json": JSON.stringify({ name: "my-app" }),
+			"packages/my-app/index.html": "<h1>Hello World</h1>",
+		});
+
 		await expect(
 			details.getDetailsForAutoConfig()
 		).rejects.toThrowErrorMatchingInlineSnapshot(
-			`[Error: Wrangler was unable to automatically configure your project to work with Cloudflare, since multiple frameworks were found: Astro, Gatsby]`
+			`[Error: The Wrangler application detection logic has been run in the root of a workspace, this is not supported. Change your working directory to one of the applications in the workspace and try again.]`
 		);
 	});
 
@@ -341,4 +369,132 @@ describe("autoconfig details - getDetailsForAutoConfig()", () => {
 			expect(result.framework?.id).toBe("astro");
 		});
 	});
+
+	describe("multiple frameworks detected", () => {
+		describe("local environment (non-CI)", () => {
+			beforeEach(() => {
+				isNonInteractiveOrCISpy.mockReturnValue(false);
+			});
+
+			it("should return a single framework when multiple frameworks are detected", async ({
+				expect,
+			}) => {
+				await writeFile(
+					"package.json",
+					JSON.stringify({
+						dependencies: {
+							astro: "5",
+							"@angular/core": "18",
+						},
+					})
+				);
+
+				const result = await details.getDetailsForAutoConfig();
+
+				// Should return a framework (either astro or angular)
+				expect(result.framework).toBeDefined();
+				expect(["astro", "angular"]).toContain(result.framework?.id);
+			});
+		});
+
+		describe("CI environment", () => {
+			beforeEach(() => {
+				isNonInteractiveOrCISpy.mockReturnValue(true);
+			});
+
+			it("should throw MultipleFrameworksCIError when multiple known frameworks are detected in CI", async ({
+				expect,
+			}) => {
+				await writeFile(
+					"package.json",
+					JSON.stringify({
+						dependencies: {
+							astro: "5",
+							nuxt: "3",
+						},
+					})
+				);
+
+				await expect(details.getDetailsForAutoConfig()).rejects.toThrowError(
+					/Wrangler was unable to automatically configure your project to work with Cloudflare, since multiple frameworks were found/
+				);
+			});
+
+			it("should NOT throw when Vite and another known framework are detected in CI (Vite is filtered out)", async ({
+				expect,
+			}) => {
+				await writeFile(
+					"package.json",
+					JSON.stringify({
+						dependencies: {
+							astro: "5",
+							vite: "5",
+						},
+					})
+				);
+
+				const result = await details.getDetailsForAutoConfig();
+				expect(result.framework?.id).toBe("astro");
+			});
+
+			it("should throw MultipleFrameworksCIError when multiple unknown frameworks are detected in CI", async ({
+				expect,
+			}) => {
+				await writeFile(
+					"package.json",
+					JSON.stringify({
+						dependencies: {
+							gatsby: "5",
+							gridsome: "1",
+						},
+					})
+				);
+
+				await expect(
+					details.getDetailsForAutoConfig()
+				).rejects.toThrowErrorMatchingInlineSnapshot(
+					`
+					[Error: Wrangler was unable to automatically configure your project to work with Cloudflare, since multiple frameworks were found: Gatsby, Gridsome.
+
+					To fix this issue either:
+					  - check your project's configuration to make sure that the target framework
+					    is the only configured one and try again
+					  - run \`wrangler setup\` locally to get an interactive user experience where
+					    you can specify what framework you want to target
+					]
+				`
+				);
+			});
+		});
+
+		it("should return non-Vite framework when Vite and another known framework are detected", async ({
+			expect,
+		}) => {
+			await writeFile(
+				"package.json",
+				JSON.stringify({
+					dependencies: {
+						next: "14",
+						vite: "5",
+					},
+				})
+			);
+
+			const result = await details.getDetailsForAutoConfig();
+			expect(result.framework?.id).toBe("next");
+		});
+
+		it("should fallback to static framework when no frameworks detected", async ({
+			expect,
+		}) => {
+			await seed({
+				"index.html": "<h1>Hello World</h1>",
+				"package.json": JSON.stringify({}),
+			});
+
+			const result = await details.getDetailsForAutoConfig();
+
+			expect(result.framework?.id).toBe("static");
+		});
+	});
 });