[create-cloudflare] Fix scaffolding when @cloudflare/workers-types v5 is installed (#14544)

Author: petebacondarwin

.changeset/c3-qwik-workers-types-v5.md

@@ -0,0 +1,9 @@
+---
+"create-cloudflare": patch
+---
+
+Fix scaffolding of Qwik projects when `@cloudflare/workers-types` v5 is installed
+
+`@cloudflare/workers-types` v5 removed the date-versioned entrypoints (e.g. `@cloudflare/workers-types/2024-01-01`) in favour of a single bare package import. C3 previously only added a date-versioned entrypoint to `tsconfig.json` and skipped updating the config entirely when none could be found, leaving templates that install workers-types (such as Qwik) without any Cloudflare types.
+
+C3 now falls back to adding the bare `@cloudflare/workers-types` entry when no date-versioned entrypoint is available, so the correct types are always configured regardless of the installed version.

packages/create-cloudflare/e2e/helpers/framework-helpers.ts

@@ -367,13 +367,13 @@ export async function verifyTypes(
 		return;
 	}
 
-	const tsconfigTypes = tsconfig.compilerOptions?.types;
+	const tsconfigTypes: string[] = tsconfig.compilerOptions?.types ?? [];
 	if (workersTypes === "generated") {
 		expect(tsconfigTypes).toContain(typesPath);
 	}
 	if (workersTypes === "installed") {
 		expect(
-			tsconfigTypes.some((x: string) => x.includes("@cloudflare/workers-types"))
+			tsconfigTypes.some((x) => x.includes("@cloudflare/workers-types"))
 		).toBe(true);
 	}
 	if (nodeCompat) {

packages/create-cloudflare/src/__tests__/workers.test.ts

@@ -53,13 +53,37 @@ describe("updateTsConfig", () => {
 		expect(writeFile).not.toHaveBeenCalled();
 	});
 
-	test("latest entrypoint not found", async ({ expect }) => {
+	test("falls back to bare workers-types when no date-versioned entrypoint is available", async ({
+		expect,
+	}) => {
 		ctx.template.workersTypes = "installed";
 
+		// `@cloudflare/workers-types` v5+ has no date-versioned entrypoints, but the
+		// package (mocked as existing via existsSync) is still installed.
 		vi.mocked(getLatestTypesEntrypoint).mockReturnValue(null);
 		await updateTsConfig(ctx, { usesNodeCompat: false });
 
-		expect(writeFile).not.toHaveBeenCalled();
+		const written = vi.mocked(writeFile).mock.calls[0][1];
+		expect(written).toContain(`"@cloudflare/workers-types"`);
+		expect(written).not.toContain(`@cloudflare/workers-types/`);
+	});
+
+	test("does not add bare workers-types when the package is not installed", async ({
+		expect,
+	}) => {
+		ctx.template.workersTypes = "installed";
+		vi.mocked(getLatestTypesEntrypoint).mockReturnValue(null);
+		vi.mocked(readFile).mockImplementation(
+			() => `{ "compilerOptions": { "types": [] } }`
+		);
+		// tsconfig.json exists, but node_modules/@cloudflare/workers-types does not.
+		vi.mocked(existsSync).mockImplementation((p) =>
+			String(p).includes("tsconfig.json")
+		);
+		await updateTsConfig(ctx, { usesNodeCompat: false });
+
+		const written = vi.mocked(writeFile).mock.calls[0][1];
+		expect(written).not.toContain("@cloudflare/workers-types");
 	});
 
 	test("don't clobber existing entrypoints", async ({ expect }) => {

packages/create-cloudflare/src/workers.ts

@@ -116,18 +116,31 @@ export async function updateTsConfig(
 		let newTypes = new Set(currentTypes);
 		if (ctx.template.workersTypes === "installed") {
 			const entrypointVersion = getLatestTypesEntrypoint(ctx);
-			if (entrypointVersion === null) {
-				return;
-			}
-			const typesEntrypoint = `@cloudflare/workers-types/${entrypointVersion}`;
 			const explicitEntrypoint = currentTypes.some((t) =>
 				t.match(/@cloudflare\/workers-types\/\d{4}-\d{2}-\d{2}/)
 			);
 			// If a type declaration with an explicit entrypoint exists, leave the types as is.
-			// Otherwise, add the latest entrypoint
+			// Otherwise add the workers-types entry:
+			// - `@cloudflare/workers-types` v4 and earlier ship date-versioned entrypoints,
+			//   so use the latest one (e.g. `@cloudflare/workers-types/2024-01-01`).
+			// - v5+ dropped the date-versioned entrypoints (getLatestTypesEntrypoint returns
+			//   null), so fall back to the bare package import when it is actually installed.
 			if (!explicitEntrypoint) {
 				newTypes.delete("@cloudflare/workers-types");
-				newTypes.add(typesEntrypoint);
+				if (entrypointVersion !== null) {
+					newTypes.add(`@cloudflare/workers-types/${entrypointVersion}`);
+				} else if (
+					existsSync(
+						join(
+							ctx.project.path,
+							"node_modules",
+							"@cloudflare",
+							"workers-types"
+						)
+					)
+				) {
+					newTypes.add("@cloudflare/workers-types");
+				}
 			}
 		} else if (ctx.template.workersTypes === "generated") {
 			newTypes.add(ctx.template.typesPath ?? "./worker-configuration.d.ts");