fixtures/nodejs-hybrid-app/src/index.ts

@@ -208,8 +208,16 @@ async function testTls() {
 	assert.strictEqual(typeof tls.connect, "function");
 	assert.strictEqual(typeof tls.TLSSocket, "function");
 	assert.strictEqual(typeof tls.checkServerIdentity, "function");
-	assert.strictEqual(typeof tls.createSecureContext, "function");
+	assert.strictEqual(
+		tls.checkServerIdentity("a.com", { subject: { CN: "a.com" } }),
+		undefined
+	);
 	assert.strictEqual(typeof tls.SecureContext, "function");
+	assert.strictEqual(typeof tls.createSecureContext, "function");
+	assert.strictEqual(
+		tls.createSecureContext({}) instanceof tls.SecureContext,
+		true
+	);
 
 	return new Response("OK");
 }

packages/vite-plugin-cloudflare/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @cloudflare/vite-plugin
 
+## 0.1.17
+
+### Patch Changes
+
+- [#8652](https://github.com/cloudflare/workers-sdk/pull/8652) [`a18155f`](https://github.com/cloudflare/workers-sdk/commit/a18155fb81f0399528a40f843736ff6565dc5579) Thanks [@jamesopstad](https://github.com/jamesopstad)! - 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.
+
+- Updated dependencies [[`8e3688f`](https://github.com/cloudflare/workers-sdk/commit/8e3688f27209edeac6241bf240ee5eec62d7ddb2), [`f043b74`](https://github.com/cloudflare/workers-sdk/commit/f043b74c715ebd7ca1e3f62139ad43e57cec8f05), [`14602d9`](https://github.com/cloudflare/workers-sdk/commit/14602d9f39f3fb1df7303dab5c91a77fa21e46f9)]:
+  - wrangler@4.5.0
+  - @cloudflare/unenv-preset@2.3.1
+
 ## 0.1.16
 
 ### Patch Changes

packages/vite-plugin-cloudflare/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@cloudflare/vite-plugin",
-	"version": "0.1.16",
+	"version": "0.1.17",
 	"description": "Cloudflare plugin for Vite",
 	"keywords": [
 		"cloudflare",

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" }
+}

packages/vite-plugin-cloudflare/playground/external-workflows/__tests__/workflows.spec.ts

@@ -2,7 +2,7 @@ import { expect, test, vi } from "vitest";
 import { getJsonResponse } from "../../__test-utils__";
 
 test("creates a Workflow with an ID", async () => {
-	const instanceId = "test-id";
+	const instanceId = "external-workflows-test-id";
 
 	expect(await getJsonResponse(`/create?id=${instanceId}`)).toEqual({
 		id: instanceId,

packages/vite-plugin-cloudflare/playground/partyserver/package.json

@@ -18,9 +18,11 @@
 		"@cloudflare/vite-plugin": "workspace:*",
 		"@cloudflare/workers-tsconfig": "workspace:*",
 		"@cloudflare/workers-types": "^4.20250321.0",
+		"@tailwindcss/vite": "^4.0.15",
 		"@types/react": "^19.0.0",
 		"@types/react-dom": "^19.0.0",
 		"@vitejs/plugin-react": "^4.3.4",
+		"tailwindcss": "^4.0.15",
 		"typescript": "catalog:default",
 		"vite": "catalog:vite-plugin",
 		"wrangler": "workspace:*"

packages/vite-plugin-cloudflare/playground/partyserver/src/App.tsx

@@ -1,5 +1,6 @@
 import { usePartySocket } from "partysocket/react";
 import { useState } from "react";
+import "./tailwind.css";
 
 function App() {
 	const [message, setMessage] = useState();

packages/vite-plugin-cloudflare/playground/partyserver/src/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";

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

@@ -1,7 +1,12 @@
 import { cloudflare } from "@cloudflare/vite-plugin";
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-	plugins: [react(), cloudflare({ inspectorPort: false, persistState: false })],
+	plugins: [
+		react(),
+		cloudflare({ inspectorPort: false, persistState: false }),
+		tailwindcss(),
+	],
 });

packages/vite-plugin-cloudflare/playground/workflows/__tests__/workflows.spec.ts

@@ -2,7 +2,7 @@ import { expect, test, vi } from "vitest";
 import { getJsonResponse } from "../../__test-utils__";
 
 test("creates a Workflow with an ID", async () => {
-	const instanceId = "test-id";
+	const instanceId = "workflows-test-id";
 
 	expect(await getJsonResponse(`/create?id=${instanceId}`)).toEqual({
 		id: instanceId,

packages/vite-plugin-cloudflare/src/index.ts

@@ -46,10 +46,12 @@ import { getWarningForWorkersConfigs } from "./workers-configs";
 import type { PluginConfig, ResolvedPluginConfig } from "./plugin-config";
 import type { Unstable_RawConfig } from "wrangler";
 
+export type { PluginConfig } from "./plugin-config";
+
 // this flag is used to show the workers configs warning only once
 let workersConfigsWarningShown = false;
 
-export type { PluginConfig } from "./plugin-config";
+let miniflare: Miniflare | undefined;
 
 /**
  * Vite plugin that enables a full-featured integration between Vite and the Cloudflare Workers runtime.
@@ -61,7 +63,6 @@ export type { PluginConfig } from "./plugin-config";
 export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 	let resolvedPluginConfig: ResolvedPluginConfig;
 	let resolvedViteConfig: vite.ResolvedConfig;
-	let miniflare: Miniflare | undefined;
 
 	const additionalModulePaths = new Set<string>();
 
@@ -284,22 +285,19 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 					writeDeployConfig(resolvedPluginConfig, resolvedViteConfig);
 				}
 			},
-			handleHotUpdate(options) {
+			hotUpdate(options) {
 				if (
-					resolvedPluginConfig.configPaths.has(options.file) ||
+					// Vite normalizes `options.file` so we use `path.resolve` for Windows compatibility
+					resolvedPluginConfig.configPaths.has(path.resolve(options.file)) ||
 					hasAssetsConfigChanged(
 						resolvedPluginConfig,
 						resolvedViteConfig,
 						options.file
 					)
 				) {
+					// It's OK for this to be called multiple times as Vite prevents concurrent execution
 					options.server.restart();
-				}
-			},
-			async buildEnd() {
-				if (miniflare) {
-					await miniflare.dispose();
-					miniflare = undefined;
+					return [];
 				}
 			},
 			async configureServer(viteDevServer) {
@@ -308,23 +306,36 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 					"Unexpected error: No Vite HTTP server"
 				);
 
-				miniflare = new Miniflare(
-					getDevMiniflareOptions(resolvedPluginConfig, viteDevServer)
-				);
+				if (miniflare) {
+					await miniflare.setOptions(
+						getDevMiniflareOptions(resolvedPluginConfig, viteDevServer)
+					);
+				} else {
+					miniflare = new Miniflare(
+						getDevMiniflareOptions(resolvedPluginConfig, viteDevServer)
+					);
+				}
 
 				await initRunners(resolvedPluginConfig, viteDevServer, miniflare);
-				const routerWorker = await getRouterWorker(miniflare);
 
 				const middleware = createMiddleware(
-					({ request }) => {
+					async ({ request }) => {
+						assert(miniflare, `Miniflare not defined`);
+						const routerWorker = await getRouterWorker(miniflare);
+
 						return routerWorker.fetch(toMiniflareRequest(request), {
 							redirect: "manual",
 						}) as any;
 					},
 					{ alwaysCallNext: false }
 				);
 
-				handleWebSocket(viteDevServer.httpServer, routerWorker.fetch);
+				handleWebSocket(viteDevServer.httpServer, async () => {
+					assert(miniflare, `Miniflare not defined`);
+					const routerWorker = await getRouterWorker(miniflare);
+
+					return routerWorker.fetch;
+				});
 
 				return () => {
 					viteDevServer.middlewares.use((req, res, next) => {
@@ -353,7 +364,10 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 					{ alwaysCallNext: false }
 				);
 
-				handleWebSocket(vitePreviewServer.httpServer, miniflare.dispatchFetch);
+				handleWebSocket(
+					vitePreviewServer.httpServer,
+					() => miniflare.dispatchFetch
+				);
 
 				// In preview mode we put our middleware at the front of the chain so that all assets are handled in Miniflare
 				vitePreviewServer.middlewares.use((req, res, next) => {
@@ -421,6 +435,7 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 			hotUpdate(options) {
 				if (additionalModulePaths.has(options.file)) {
 					options.server.restart();
+					return [];
 				}
 			},
 			async renderChunk(code, chunk) {

packages/vite-plugin-cloudflare/src/miniflare-options.ts

@@ -572,6 +572,8 @@ export function getPreviewMiniflareOptions(
 	};
 }
 
+const removedMessages = [/^Ready on http/, /^Updated and ready on http/];
+
 /**
  * A Miniflare logger that forwards messages onto a Vite logger.
  */
@@ -583,9 +585,12 @@ class ViteMiniflareLogger extends Log {
 	}
 
 	override logWithLevel(level: LogLevel, message: string) {
-		if (/^Ready on http/.test(message)) {
-			level = LogLevel.DEBUG;
+		for (const removedMessage of removedMessages) {
+			if (removedMessage.test(message)) {
+				return;
+			}
 		}
+
 		switch (level) {
 			case LogLevel.ERROR:
 				return this.logger.error(message);

packages/vite-plugin-cloudflare/src/utils.ts

@@ -59,3 +59,5 @@ export function cleanUrl(url: string): string {
 }
 
 export type Optional<T, K extends keyof T> = Omit<T, K> & Pick<Partial<T>, K>;
+
+export type MaybePromise<T> = Promise<T> | T;