Fix dev server crashing on config changes (#8652)

* Added config-changes playground

* Moved miniflare.dispose into createServer and added tests

* Revered vitest config

* Simplified tests

* Added changeset

* Fix workers-types version

* Increase waitFor timeout

* Skip config errors test

* Use path.resolve

* Log in tests

* Normalize Worker config paths to support Windows

* Use path.resolve in handleHotUpdate hook

* Add tailwindcss to playground to reproduce error

* Use hotUpdate and miniflare.setOptions

* Filter logs

* Remove inspectorPort in playground

* Set unique Workflows IDs

* Remove unnecessary async

* Assert Miniflare

Author: jamesopstad

.changeset/shy-singers-kiss.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+Fix a bug where updating config files would crash the dev server. This occurred because the previous Miniflare instance was not disposed before creating a new one. This would lead to a port collision because of the `inspectorPort` introduced by the new debugging features.

packages/vite-plugin-cloudflare/playground/config-changes/__tests__/config-changes.spec.ts

@@ -0,0 +1,84 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { expect, test, vi } from "vitest";
+import { getTextResponse, isBuild, serverLogs } from "../../__test-utils__";
+
+test.runIf(!isBuild)(
+	"successfully updates when a var is updated in the Worker config",
+	async ({ onTestFinished }) => {
+		const workerConfigPath = path.join(__dirname, "../wrangler.json");
+		const originalWorkerConfig = fs.readFileSync(workerConfigPath, "utf-8");
+
+		onTestFinished(async () => {
+			fs.writeFileSync(workerConfigPath, originalWorkerConfig);
+			// We need to ensure that the original config is restored before the next test runs
+			await vi.waitFor(
+				async () => {
+					const revertedResponse = await getTextResponse();
+					expect(revertedResponse).toBe('The value of MY_VAR is "one"');
+				},
+				{ timeout: 5000 }
+			);
+		});
+
+		const originalResponse = await getTextResponse();
+		expect(originalResponse).toBe('The value of MY_VAR is "one"');
+
+		const updatedWorkerConfig = JSON.stringify({
+			...JSON.parse(originalWorkerConfig),
+			vars: {
+				MY_VAR: "two",
+			},
+		});
+		fs.writeFileSync(workerConfigPath, updatedWorkerConfig);
+		await vi.waitFor(
+			async () => {
+				const updatedResponse = await getTextResponse();
+				expect(updatedResponse).toBe('The value of MY_VAR is "two"');
+			},
+			{ timeout: 5000 }
+		);
+	}
+);
+
+test.runIf(!isBuild)(
+	"reports errors in updates to the Worker config",
+	async ({ onTestFinished }) => {
+		const workerConfigPath = path.join(__dirname, "../wrangler.json");
+		const originalWorkerConfig = fs.readFileSync(workerConfigPath, "utf-8");
+
+		onTestFinished(async () => {
+			fs.writeFileSync(workerConfigPath, originalWorkerConfig);
+			// We need to ensure that the original config is restored before the next test runs
+			await vi.waitFor(
+				async () => {
+					const revertedResponse = await getTextResponse();
+					expect(revertedResponse).toBe('The value of MY_VAR is "one"');
+				},
+				{ timeout: 5000 }
+			);
+		});
+
+		const originalResponse = await getTextResponse();
+		expect(originalResponse).toBe('The value of MY_VAR is "one"');
+
+		const updatedWorkerConfig = JSON.stringify({
+			...JSON.parse(originalWorkerConfig),
+			main: "./src/non-existing-file.ts",
+			vars: {
+				MY_VAR: "two",
+			},
+		});
+		fs.writeFileSync(workerConfigPath, updatedWorkerConfig);
+		await vi.waitFor(
+			async () => {
+				const newResponse = await getTextResponse();
+				expect(serverLogs.errors.join()).toMatch(
+					/.*The provided Wrangler config main field .+? doesn't point to an existing file.*/
+				);
+				expect(newResponse).toBe('The value of MY_VAR is "one"');
+			},
+			{ timeout: 5000 }
+		);
+	}
+);

packages/vite-plugin-cloudflare/playground/config-changes/package.json

@@ -0,0 +1,19 @@
+{
+	"name": "@playground/config-changes",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "vite build --app",
+		"check:types": "tsc --build",
+		"dev": "vite dev",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@cloudflare/vite-plugin": "workspace:*",
+		"@cloudflare/workers-tsconfig": "workspace:*",
+		"@cloudflare/workers-types": "^4.20250321.0",
+		"typescript": "catalog:default",
+		"vite": "catalog:vite-plugin",
+		"wrangler": "workspace:*"
+	}
+}

packages/vite-plugin-cloudflare/playground/config-changes/src/index.ts

@@ -0,0 +1,9 @@
+interface Env {
+	MY_VAR: string;
+}
+
+export default {
+	async fetch(_, env) {
+		return new Response(`The value of MY_VAR is "${env.MY_VAR}"`);
+	},
+} satisfies ExportedHandler<Env>;

packages/vite-plugin-cloudflare/playground/config-changes/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"files": [],
+	"references": [
+		{ "path": "./tsconfig.node.json" },
+		{ "path": "./tsconfig.worker.json" }
+	]
+}

packages/vite-plugin-cloudflare/playground/config-changes/tsconfig.node.json

@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/base.json"],
+	"include": ["vite.config.ts", "__tests__"]
+}

packages/vite-plugin-cloudflare/playground/config-changes/tsconfig.worker.json

@@ -0,0 +1,4 @@
+{
+	"extends": ["@cloudflare/workers-tsconfig/worker.json"],
+	"include": ["src"]
+}

packages/vite-plugin-cloudflare/playground/config-changes/turbo.json

@@ -0,0 +1,9 @@
+{
+	"$schema": "http://turbo.build/schema.json",
+	"extends": ["//"],
+	"tasks": {
+		"build": {
+			"outputs": ["dist/**"]
+		}
+	}
+}

packages/vite-plugin-cloudflare/playground/config-changes/vite.config.ts

@@ -0,0 +1,7 @@
+import { cloudflare } from "@cloudflare/vite-plugin";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	// We should enable `inspectorPort` in this playground when it's possible to do so to verify that there are no port collisions on server restarts
+	plugins: [cloudflare({ inspectorPort: false, persistState: false })],
+});

packages/vite-plugin-cloudflare/playground/config-changes/wrangler.json

@@ -0,0 +1,7 @@
+{
+	"$schema": "node_modules/wrangler/config-schema.json",
+	"name": "worker",
+	"compatibility_date": "2024-12-30",
+	"main": "./src/index.ts",
+	"vars": { "MY_VAR": "one" }
+}