Initial React Router support (#11498)

* Initial React Router support

* Fix tests

* cleanup

* Create slow-crabs-punch.md

* Handle React Router 7.10.0 changes

* Update packages/wrangler/src/autoconfig/frameworks/react-router.ts

Co-authored-by: Dario Piotrowicz <[email protected]>

* Update packages/wrangler/src/autoconfig/frameworks/react-router.ts

Co-authored-by: Dario Piotrowicz <[email protected]>

* Update packages/wrangler/src/autoconfig/frameworks/react-router.ts

Co-authored-by: Dario Piotrowicz <[email protected]>

---------

Co-authored-by: Dario Piotrowicz <[email protected]>

Author: penalosa

.changeset/slow-crabs-punch.md

@@ -0,0 +1,6 @@
+---
+"wrangler": minor
+"create-cloudflare": minor
+---
+
+Add React Router support in autoconfig

packages/create-cloudflare/e2e/tests/cli/cli.test.ts

@@ -555,7 +555,7 @@ describe("Create Cloudflare CLI", () => {
 					    npm create cloudflare -- --framework next -- --ts
 					    pnpm create cloudflare --framework next -- --ts
 					    Allowed Values:
-					      gatsby, svelte, docusaurus, astro, tanstack-start, angular, solid, qwik, vue, react
+					      gatsby, svelte, docusaurus, astro, tanstack-start, angular, solid, qwik, vue, react, react-router
 					  --platform=<value>
 					    Whether the application should be deployed to Pages or Workers. This is only applicable for Frameworks templates that support both Pages and Workers.
 					    Allowed Values:

packages/create-cloudflare/e2e/tests/frameworks/test-config.ts

@@ -866,6 +866,29 @@ function getExperimentalFrameworkTestConfig(
 			nodeCompat: false,
 			verifyTypes: false,
 		},
+		{
+			name: "react-router",
+			unsupportedOSs: ["win32"],
+			testCommitMessage: true,
+			timeout: LONG_TIMEOUT,
+			verifyDeploy: {
+				route: "/",
+				expectedText: "React Router",
+			},
+			verifyPreview: {
+				route: "/",
+				expectedText: "React Router",
+				previewArgs: ["--host=127.0.0.1"],
+			},
+			verifyDev: {
+				route: "/",
+				expectedText: "React Router",
+				devArgs: ["--host=127.0.0.1"],
+			},
+			nodeCompat: false,
+			flags: ["--no-install", "--no-git-init"],
+			verifyTypes: false,
+		},
 	];
 }
 

packages/create-cloudflare/src/templates.ts

@@ -246,6 +246,7 @@ export function getFrameworkMap({ experimental = false }): TemplateMap {
 			qwik: qwikTemplate,
 			vue: vueTemplate,
 			react: reactTemplate,
+			"react-router": reactRouterTemplate,
 		};
 	} else {
 		return {

packages/create-cloudflare/templates/react-router/c3.ts

@@ -9,9 +9,13 @@ const { npm } = detectPackageManager();
 const generate = async (ctx: C3Context) => {
 	await runFrameworkGenerator(ctx, [
 		ctx.project.name,
-		"--template",
-		// React-router deleted the template here
-		"https://github.com/remix-run/react-router-templates/tree/29ac272b9532fe26463a2d2693fc73ff3c1e884b/cloudflare",
+		...(ctx.args.experimental
+			? []
+			: [
+					"--template",
+					// React-router deleted the template here
+					"https://github.com/remix-run/react-router-templates/tree/29ac272b9532fe26463a2d2693fc73ff3c1e884b/cloudflare",
+				]),
 		// to prevent asking about git twice, just let c3 do it
 		"--no-git-init",
 		"--no-install",

packages/workers-utils/src/parse.ts

@@ -112,6 +112,7 @@ export function parseTOML<T>(input: string, file?: string): T | never {
  */
 export type PackageJSON = {
 	name?: string;
+	version?: string;
 	devDependencies?: Record<string, unknown>;
 	dependencies?: Record<string, unknown>;
 	scripts?: Record<string, unknown>;

packages/wrangler/package.json

@@ -148,7 +148,7 @@
 		"patch-console": "^1.0.0",
 		"pretty-bytes": "^6.0.0",
 		"prompts": "^2.4.2",
-		"recast": "0.22.0",
+		"recast": "0.23.11",
 		"resolve": "^1.22.8",
 		"rimraf": "catalog:default",
 		"semiver": "^1.1.0",

packages/wrangler/src/__tests__/autoconfig/get-installed-package-version.test.ts

@@ -0,0 +1,27 @@
+import { seed } from "@cloudflare/workers-utils/test-helpers";
+import { describe, expect, test } from "vitest";
+import { getInstalledPackageVersion } from "../../autoconfig/frameworks";
+import { runInTempDir } from "../helpers/run-in-tmp";
+
+describe("getInstalledPackageVersion()", () => {
+	runInTempDir();
+	test("happy path", async () => {
+		await seed({
+			"node_modules/react-router/package.json": JSON.stringify({
+				name: "react-router",
+				version: "1.2.3",
+				main: "index.js",
+			}),
+			"node_modules/react-router/index.js": "console.log(1)",
+		});
+		expect(getInstalledPackageVersion("react-router", process.cwd())).toBe(
+			"1.2.3"
+		);
+	});
+
+	test("no node_modules", async () => {
+		expect(
+			getInstalledPackageVersion("react-router", process.cwd())
+		).toBeUndefined();
+	});
+});

packages/wrangler/src/autoconfig/details.ts

@@ -124,6 +124,15 @@ export async function getDetailsForAutoConfig({
 
 	const buildSettings = await project.getBuildSettings();
 
+	// Workaround for https://github.com/netlify/build/pull/6806, and can be removed once merged
+	if (
+		buildSettings.length === 2 &&
+		buildSettings[0].framework.id === "react-router" &&
+		buildSettings[1].framework.id === "vite"
+	) {
+		buildSettings.pop();
+	}
+
 	// If we've detected multiple frameworks, it's too complex for us to try and configure—let's just bail
 	if (buildSettings && buildSettings?.length > 1) {
 		throw new MultipleFrameworksError(buildSettings.map((b) => b.name));

packages/wrangler/src/autoconfig/frameworks/get-framework.ts

@@ -1,6 +1,7 @@
 import { Angular } from "./angular";
 import { Astro } from "./astro";
 import { Qwik } from "./qwik";
+import { ReactRouter } from "./react-router";
 import { SolidStart } from "./solid-start";
 import { Static } from "./static";
 import { SvelteKit } from "./sveltekit";
@@ -18,6 +19,8 @@ export function getFramework(detectedFramework?: {
 			return new SvelteKit(detectedFramework.name);
 		case "tanstack-start":
 			return new TanstackStart(detectedFramework.name);
+		case "react-router":
+			return new ReactRouter(detectedFramework.name);
 		case "angular":
 			return new Angular(detectedFramework.name);
 		case "solid-start":