fix(cli): add viteReact plugin in tanstack start template

apps/cli/src/helpers/deployment/alchemy/alchemy-tanstack-start-setup.ts

@@ -54,6 +54,24 @@ export async function setupTanStackStartAlchemyDeploy(
 				alchemyImport.setModuleSpecifier("alchemy/cloudflare/tanstack-start");
 			}
 
+			const reactImport = sourceFile.getImportDeclaration(
+				"@vitejs/plugin-react",
+			);
+			let reactPluginIdentifier = "viteReact";
+			if (!reactImport) {
+				sourceFile.addImportDeclaration({
+					moduleSpecifier: "@vitejs/plugin-react",
+					defaultImport: "viteReact",
+				});
+			} else {
+				const defaultImport = reactImport.getDefaultImport();
+				if (defaultImport) {
+					reactPluginIdentifier = defaultImport.getText();
+				} else {
+					reactImport.setDefaultImport("viteReact");
+				}
+			}
+
 			const exportAssignment = sourceFile.getExportAssignment(
 				(d) => !d.isExportEquals(),
 			);
@@ -99,6 +117,7 @@ export async function setupTanStackStartAlchemyDeploy(
 							.getElements()
 							.filter((el) => el.getText().includes("tanstackStart"));
 
+						let needsReactPlugin = false;
 						tanstackElements.forEach((element) => {
 							if (Node.isCallExpression(element)) {
 								const args = element.getArguments();
@@ -107,6 +126,7 @@ export async function setupTanStackStartAlchemyDeploy(
       target: "cloudflare-module",
       customViteReactPlugin: true,
     }`);
+									needsReactPlugin = true;
 								} else if (
 									args.length === 1 &&
 									Node.isObjectLiteralExpression(args[0])
@@ -118,15 +138,30 @@ export async function setupTanStackStartAlchemyDeploy(
 											initializer: '"cloudflare-module"',
 										});
 									}
-									if (!configObj.getProperty("customViteReactPlugin")) {
+									const hasCustomViteReactPlugin = !!configObj.getProperty(
+										"customViteReactPlugin",
+									);
+									if (!hasCustomViteReactPlugin) {
 										configObj.addPropertyAssignment({
 											name: "customViteReactPlugin",
 											initializer: "true",
 										});
 									}
+									needsReactPlugin = true;
 								}
 							}
 						});
+
+						const hasReactPlugin = initializer
+							.getElements()
+							.some(
+								(el) =>
+									Node.isCallExpression(el) &&
+									el.getExpression().getText() === reactPluginIdentifier,
+							);
+						if (needsReactPlugin && !hasReactPlugin) {
+							initializer.addElement(`${reactPluginIdentifier}()`);
+						}
 					}
 				} else {
 					configObject.addPropertyAssignment({

apps/cli/src/helpers/deployment/server-deploy-setup.ts

@@ -48,7 +48,7 @@ async function setupWorkersServerDeploy(
 	await fs.writeJson(packageJsonPath, packageJson, { spaces: 2 });
 
 	await addPackageDependency({
-		devDependencies: ["wrangler", "@types/node", "@cloudflare/workers-types"],
+		devDependencies: ["wrangler", "@types/node"],
 		projectDir: serverDir,
 	});
 }
@@ -83,13 +83,7 @@ export async function setupAlchemyServerDeploy(
 	if (!(await fs.pathExists(serverDir))) return;
 
 	await addPackageDependency({
-		devDependencies: [
-			"alchemy",
-			"wrangler",
-			"@types/node",
-			"@cloudflare/workers-types",
-			"dotenv",
-		],
+		devDependencies: ["alchemy", "wrangler", "@types/node", "dotenv"],
 		projectDir: serverDir,
 	});
 

apps/cli/src/helpers/deployment/workers/workers-tanstack-start-setup.ts

@@ -39,6 +39,22 @@ export async function setupTanstackStartWorkersDeploy(
 	const sourceFile = tsProject.addSourceFileAtPathIfExists(viteConfigPath);
 	if (!sourceFile) return;
 
+	const reactImport = sourceFile.getImportDeclaration("@vitejs/plugin-react");
+	let reactPluginIdentifier = "viteReact";
+	if (!reactImport) {
+		sourceFile.addImportDeclaration({
+			moduleSpecifier: "@vitejs/plugin-react",
+			defaultImport: "viteReact",
+		});
+	} else {
+		const defaultImport = reactImport.getDefaultImport();
+		if (defaultImport) {
+			reactPluginIdentifier = defaultImport.getText();
+		} else {
+			reactImport.setDefaultImport("viteReact");
+		}
+	}
+
 	const defineCall = sourceFile
 		.getDescendantsOfKind(SyntaxKind.CallExpression)
 		.find((expr) => {
@@ -61,7 +77,8 @@ export async function setupTanstackStartWorkersDeploy(
 		.getElements()
 		.findIndex((el) => el.getText().includes("tanstackStart("));
 
-	const tanstackPluginText = 'tanstackStart({ target: "cloudflare-module" })';
+	const tanstackPluginText =
+		'tanstackStart({ target: "cloudflare-module", customViteReactPlugin: true })';
 
 	if (tanstackPluginIndex === -1) {
 		pluginsArray.addElement(tanstackPluginText);
@@ -71,5 +88,24 @@ export async function setupTanstackStartWorkersDeploy(
 			[tanstackPluginIndex].replaceWithText(tanstackPluginText);
 	}
 
+	const hasReactPlugin = pluginsArray
+		.getElements()
+		.some(
+			(el) =>
+				Node.isCallExpression(el) &&
+				el.getExpression().getText() === reactPluginIdentifier,
+		);
+	if (!hasReactPlugin) {
+		const nextIndex =
+			pluginsArray
+				.getElements()
+				.findIndex((el) => el.getText().includes("tanstackStart(")) + 1;
+		if (nextIndex > 0) {
+			pluginsArray.insertElement(nextIndex, `${reactPluginIdentifier}()`);
+		} else {
+			pluginsArray.addElement(`${reactPluginIdentifier}()`);
+		}
+	}
+
 	await tsProject.save();
 }