fix: support function-based Vite configs in autoconfig setup (#12562)

Author: MattieTK

.changeset/function-vite-config.md

@@ -0,0 +1,21 @@
+---
+"wrangler": patch
+---
+
+Support function-based Vite configs in autoconfig setup
+
+`wrangler setup` and `wrangler deploy --x-autoconfig` can now automatically add the Cloudflare Vite plugin to projects that use function-based `defineConfig()` patterns. Previously, autoconfig would fail with "Cannot modify Vite config: expected an object literal but found ArrowFunctionExpression" for configs like:
+
+```ts
+export default defineConfig(({ isSsrBuild }) => ({
+  plugins: [reactRouter(), tsconfigPaths()],
+}));
+```
+
+This pattern is used by several official framework templates, including React Router's `node-postgres` and `node-custom-server` templates. The following `defineConfig()` patterns are now supported:
+
+- `defineConfig({ ... })` (object literal, already worked)
+- `defineConfig(() => ({ ... }))` (arrow function with expression body)
+- `defineConfig(({ isSsrBuild }) => ({ ... }))` (arrow function with destructured params)
+- `defineConfig(() => { return { ... }; })` (arrow function with block body)
+- `defineConfig(function() { return { ... }; })` (function expression)

packages/wrangler/src/__tests__/autoconfig/vite-config.test.ts

@@ -1,3 +1,4 @@
+import { readFileSync } from "node:fs";
 import { writeFile } from "node:fs/promises";
 import { beforeEach, describe, it } from "vitest";
 import {
@@ -17,7 +18,26 @@ describe("vite-config utils", () => {
 	});
 
 	describe("checkIfViteConfigUsesCloudflarePlugin", () => {
-		it("should handle vite config with function-based defineConfig", async ({
+		it("should detect cloudflare plugin in function-based defineConfig", async ({
+			expect,
+		}) => {
+			await writeFile(
+				"vite.config.ts",
+				`
+import { defineConfig } from 'vite';
+import { cloudflare } from '@cloudflare/vite-plugin';
+
+export default defineConfig(() => ({
+  plugins: [cloudflare()]
+}));
+`
+			);
+
+			const result = checkIfViteConfigUsesCloudflarePlugin(".");
+			expect(result).toBe(true);
+		});
+
+		it("should return false for function-based defineConfig without cloudflare plugin", async ({
 			expect,
 		}) => {
 			await writeFile(
@@ -33,7 +53,6 @@ export default defineConfig(() => ({
 
 			const result = checkIfViteConfigUsesCloudflarePlugin(".");
 			expect(result).toBe(false);
-			expect(std.debug).toContain("Vite config uses a non-object expression");
 		});
 
 		it("should handle vite config without plugins array", async ({
@@ -76,7 +95,7 @@ export default defineConfig({
 	});
 
 	describe("transformViteConfig", () => {
-		it("should throw UserError for function-based defineConfig", async ({
+		it("should successfully transform function-based defineConfig with arrow expression body", async ({
 			expect,
 		}) => {
 			await writeFile(
@@ -90,9 +109,142 @@ export default defineConfig(() => ({
 `
 			);
 
-			expect(() => transformViteConfig(".")).toThrowError(
-				/Cannot modify Vite config: expected an object literal/
+			expect(() => transformViteConfig(".")).not.toThrow();
+			const result = readFileSync("vite.config.ts", "utf-8");
+			expect(result).toContain(
+				'import { cloudflare } from "@cloudflare/vite-plugin"'
+			);
+			expect(result).toContain("cloudflare()");
+		});
+
+		it("should successfully transform function-based defineConfig with destructured params", async ({
+			expect,
+		}) => {
+			// This is the exact pattern from the React Router node-postgres template
+			await writeFile(
+				"vite.config.ts",
+				`
+import { reactRouter } from "@react-router/dev/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig(({ isSsrBuild }) => ({
+  build: {
+    rollupOptions: isSsrBuild
+      ? {
+          input: "./server/app.ts",
+        }
+      : undefined,
+  },
+  plugins: [tailwindcss(), reactRouter(), tsconfigPaths()],
+}));
+`
+			);
+
+			expect(() => transformViteConfig(".")).not.toThrow();
+			const result = readFileSync("vite.config.ts", "utf-8");
+			expect(result).toContain(
+				'import { cloudflare } from "@cloudflare/vite-plugin"'
+			);
+			expect(result).toContain("cloudflare()");
+			// The existing plugins should be preserved
+			expect(result).toContain("tailwindcss()");
+			expect(result).toContain("reactRouter()");
+			expect(result).toContain("tsconfigPaths()");
+			// The function structure should be preserved
+			expect(result).toContain("isSsrBuild");
+		});
+
+		it("should successfully transform function-based defineConfig with block body", async ({
+			expect,
+		}) => {
+			await writeFile(
+				"vite.config.ts",
+				`
+import { defineConfig } from 'vite';
+
+export default defineConfig(() => {
+  return {
+    plugins: []
+  };
+});
+`
+			);
+
+			expect(() => transformViteConfig(".")).not.toThrow();
+			const result = readFileSync("vite.config.ts", "utf-8");
+			expect(result).toContain(
+				'import { cloudflare } from "@cloudflare/vite-plugin"'
+			);
+			expect(result).toContain("cloudflare()");
+		});
+
+		it("should successfully transform function expression defineConfig", async ({
+			expect,
+		}) => {
+			await writeFile(
+				"vite.config.ts",
+				`
+import { defineConfig } from 'vite';
+
+export default defineConfig(function() {
+  return {
+    plugins: []
+  };
+});
+`
+			);
+
+			expect(() => transformViteConfig(".")).not.toThrow();
+			const result = readFileSync("vite.config.ts", "utf-8");
+			expect(result).toContain(
+				'import { cloudflare } from "@cloudflare/vite-plugin"'
+			);
+			expect(result).toContain("cloudflare()");
+		});
+
+		it("should pass viteEnvironmentName option with function-based config", async ({
+			expect,
+		}) => {
+			await writeFile(
+				"vite.config.ts",
+				`
+import { defineConfig } from 'vite';
+
+export default defineConfig(() => ({
+  plugins: []
+}));
+`
+			);
+
+			expect(() =>
+				transformViteConfig(".", { viteEnvironmentName: "ssr" })
+			).not.toThrow();
+			const result = readFileSync("vite.config.ts", "utf-8");
+			expect(result).toContain("viteEnvironment");
+			expect(result).toContain('"ssr"');
+		});
+
+		it("should remove incompatible plugins from function-based config", async ({
+			expect,
+		}) => {
+			await writeFile(
+				"vite.config.ts",
+				`
+import { defineConfig } from 'vite';
+
+export default defineConfig(() => ({
+  plugins: [nitro(), someOther()]
+}));
+`
 			);
+
+			expect(() => transformViteConfig(".")).not.toThrow();
+			const result = readFileSync("vite.config.ts", "utf-8");
+			expect(result).not.toContain("nitro()");
+			expect(result).toContain("someOther()");
+			expect(result).toContain("cloudflare()");
 		});
 
 		it("should throw UserError when plugins array is missing", async ({
@@ -114,6 +266,25 @@ export default defineConfig({
 			);
 		});
 
+		it("should throw UserError when plugins array is missing in function-based config", async ({
+			expect,
+		}) => {
+			await writeFile(
+				"vite.config.ts",
+				`
+import { defineConfig } from 'vite';
+
+export default defineConfig(() => ({
+  server: { port: 3000 }
+}));
+`
+			);
+
+			expect(() => transformViteConfig(".")).toThrowError(
+				/Cannot modify Vite config: could not find a valid plugins array/
+			);
+		});
+
 		it("should successfully transform valid vite config", async ({
 			expect,
 		}) => {

packages/wrangler/src/autoconfig/frameworks/utils/vite-config.ts

@@ -10,6 +10,57 @@ import type { types } from "recast";
 const b = recast.types.builders;
 const t = recast.types.namedTypes;
 
+/**
+ * Extracts the ObjectExpression from the first argument of defineConfig().
+ *
+ * Handles:
+ *   - defineConfig({ ... })
+ *   - defineConfig(() => ({ ... }))
+ *   - defineConfig(({ isSsrBuild }) => ({ ... }))
+ *   - defineConfig(() => { return { ... }; })
+ *   - defineConfig(function() { return { ... }; })
+ */
+function extractConfigObject(
+	node: recast.types.ASTNode
+): types.namedTypes.ObjectExpression | null {
+	// Direct object: defineConfig({ ... })
+	if (t.ObjectExpression.check(node)) {
+		return node;
+	}
+
+	// Arrow function: defineConfig(() => ({ ... })) or defineConfig(() => { return { ... }; })
+	if (t.ArrowFunctionExpression.check(node)) {
+		if (t.ObjectExpression.check(node.body)) {
+			return node.body;
+		}
+		if (t.BlockStatement.check(node.body)) {
+			return extractFromBlockStatement(node.body);
+		}
+	}
+
+	// Function expression: defineConfig(function() { return { ... }; })
+	if (t.FunctionExpression.check(node)) {
+		return extractFromBlockStatement(node.body);
+	}
+
+	return null;
+}
+
+function extractFromBlockStatement(
+	block: types.namedTypes.BlockStatement
+): types.namedTypes.ObjectExpression | null {
+	const returnStmt = block.body.find((s) => t.ReturnStatement.check(s));
+	if (
+		returnStmt &&
+		t.ReturnStatement.check(returnStmt) &&
+		returnStmt.argument &&
+		t.ObjectExpression.check(returnStmt.argument)
+	) {
+		return returnStmt.argument;
+	}
+	return null;
+}
+
 export function checkIfViteConfigUsesCloudflarePlugin(
 	projectPath: string
 ): boolean {
@@ -39,15 +90,17 @@ export function checkIfViteConfigUsesCloudflarePlugin(
 				return this.traverse(n);
 			}
 
-			const config = n.node.arguments[0];
-			if (!t.ObjectExpression.check(config)) {
+			const configObject = extractConfigObject(n.node.arguments[0]);
+			if (!configObject) {
 				logger.debug(
-					`Vite config uses a non-object expression (e.g., function). Skipping Cloudflare plugin check.`
+					`Vite config uses an unsupported expression type. Skipping Cloudflare plugin check.`
 				);
 				return this.traverse(n);
 			}
 
-			const pluginsProp = config.properties.find((prop) => isPluginsProp(prop));
+			const pluginsProp = configObject.properties.find((prop) =>
+				isPluginsProp(prop)
+			);
 			if (!pluginsProp || !t.ArrayExpression.check(pluginsProp.value)) {
 				logger.debug(
 					`Vite config does not have a valid plugins array. Skipping Cloudflare plugin check.`
@@ -139,18 +192,29 @@ export function transformViteConfig(
 			// defineConfig({
 			//   plugins: [cloudflare({ viteEnvironment: { name: 'ssr' } })],
 			// });
+			// ```
+			// Also handles function-based configs like:
+			// ```
+			// defineConfig(({ isSsrBuild }) => ({
+			//   plugins: [...]
+			// }));
+			// ```
 			const callee = n.node.callee as types.namedTypes.Identifier;
 			if (callee.name !== "defineConfig") {
 				return this.traverse(n);
 			}
 
-			const config = n.node.arguments[0];
-			if (!t.ObjectExpression.check(config)) {
+			const configObject = extractConfigObject(n.node.arguments[0]);
+			if (!configObject) {
+				const argType = n.node.arguments[0]?.type ?? "unknown";
 				throw new UserError(dedent`
-					Cannot modify Vite config: expected an object literal but found ${config.type}.
+					Cannot modify Vite config: could not extract a config object (found ${argType}).
 
-					The Cloudflare plugin can only be automatically added to Vite configs that use a simple object.
-					If your config uses a function or other dynamic configuration, please manually add the plugin:
+					The Cloudflare plugin can only be automatically added to Vite configs that use:
+					  - A simple object: defineConfig({ plugins: [...] })
+					  - An arrow function returning an object: defineConfig(() => ({ plugins: [...] }))
+
+					If your config uses a more complex pattern, please manually add the plugin:
 
 					  import { cloudflare } from "@cloudflare/vite-plugin";
 
@@ -160,7 +224,9 @@ export function transformViteConfig(
 				`);
 			}
 
-			const pluginsProp = config.properties.find((prop) => isPluginsProp(prop));
+			const pluginsProp = configObject.properties.find((prop) =>
+				isPluginsProp(prop)
+			);
 			if (!pluginsProp || !t.ArrayExpression.check(pluginsProp.value)) {
 				throw new UserError(dedent`
 					Cannot modify Vite config: could not find a valid plugins array.