Make autoconfig work better for Next.js apps (#11704)

* Make autoconfig work better for Next.js apps

* Update packages/wrangler/src/autoconfig/c3-vendor/packages.ts

Co-authored-by: Matt Kane <m@mk.gg>

* fail on older version of next

* update changeset

---------

Co-authored-by: Matt Kane <m@mk.gg>

Author: dario-piotrowicz

.changeset/chilly-sites-remain.md

@@ -0,0 +1,7 @@
+---
+"wrangler": patch
+---
+
+Fix autoconfig handling of Next.js apps with CJS config files and incompatible Next.js versions
+
+Previously, `wrangler setup` and `wrangler deploy --x-autoconfig` would fail when working with Next.js applications that use CommonJS config files (next.config.cjs) or have versions of Next.js that don't match the required peer dependencies. The autoconfig process now uses dynamic imports and forced installation to handle these scenarios gracefully.

packages/wrangler/src/autoconfig/c3-vendor/packages.ts

@@ -10,6 +10,7 @@ type InstallConfig = {
 	startText?: string;
 	doneText?: string;
 	dev?: boolean;
+	force?: boolean;
 };
 
 /**
@@ -19,11 +20,14 @@ type InstallConfig = {
  * @param config.dev - Add packages as `devDependencies`
  * @param config.startText - Spinner start text
  * @param config.doneText - Spinner done text
+ * @param config.force - Whether to install with `--force` or not
  */
 export const installPackages = async (
 	packages: string[],
 	config: InstallConfig = {}
 ) => {
+	const { force, dev, startText, doneText } = config;
+
 	if (packages.length === 0) {
 		const { type } = await getPackageManager();
 
@@ -44,9 +48,11 @@ export const installPackages = async (
 				...(cmd ? [cmd] : []),
 				...packages,
 				...(type === "pnpm" ? ["--no-frozen-lockfile"] : []),
+				...(force === true ? ["--force"] : []),
 			],
 			{
-				...config,
+				startText,
+				doneText,
 				silent: true,
 			}
 		);
@@ -60,20 +66,30 @@ export const installPackages = async (
 	switch (type) {
 		case "yarn":
 			cmd = "add";
-			saveFlag = config.dev ? "-D" : "";
+			saveFlag = dev ? "-D" : "";
 			break;
 		case "npm":
 		case "pnpm":
 		default:
 			cmd = "install";
-			saveFlag = config.dev ? "--save-dev" : "";
+			saveFlag = dev ? "--save-dev" : "";
 			break;
 	}
 
-	await runCommand([type, cmd, ...(saveFlag ? [saveFlag] : []), ...packages], {
-		...config,
-		silent: true,
-	});
+	await runCommand(
+		[
+			type,
+			cmd,
+			...(saveFlag ? [saveFlag] : []),
+			...packages,
+			...(force === true ? ["--force"] : []),
+		],
+		{
+			startText,
+			doneText,
+			silent: true,
+		}
+	);
 
 	if (type === "npm") {
 		// Npm install will update the package.json with a caret-range rather than the exact version/range we asked for.

packages/wrangler/src/autoconfig/frameworks/next.ts

@@ -2,12 +2,14 @@ import { statSync } from "node:fs";
 import { readFile, writeFile } from "node:fs/promises";
 import { brandColor, dim } from "@cloudflare/cli/colors";
 import { spinner } from "@cloudflare/cli/interactive";
+import semiver from "semiver";
 import { getPackageManager } from "../../package-manager";
 import { dedent } from "../../utils/dedent";
 import { installPackages } from "../c3-vendor/packages";
 import { AutoConfigFrameworkConfigurationError } from "../errors";
 import { appendToGitIgnore } from "../git";
 import { usesTypescript } from "../uses-typescript";
+import { getInstalledPackageVersion } from "./utils/packages";
 import { Framework } from ".";
 import type { ConfigurationOptions, ConfigurationResults } from ".";
 
@@ -22,14 +24,33 @@ export class NextJs extends Framework {
 		const nextConfigPath = findNextConfigPath(usesTs);
 		if (!nextConfigPath) {
 			throw new AutoConfigFrameworkConfigurationError(
-				"No Next.js configuration file could be detected. Note: only next.config.ts and next.config.mjs files are supported."
+				"No Next.js configuration file could be detected."
+			);
+		}
+
+		const firstNextVersionSupportedByOpenNext = "14.2.35";
+		const installedNextVersion = getInstalledPackageVersion(
+			"next",
+			projectPath
+		);
+
+		if (
+			installedNextVersion &&
+			semiver(installedNextVersion, firstNextVersionSupportedByOpenNext) < 0
+		) {
+			throw new AutoConfigFrameworkConfigurationError(
+				`The detected Next.js version (${installedNextVersion}) is too old, please update the \`next\` dependency to at least ${firstNextVersionSupportedByOpenNext} and try again.`
 			);
 		}
 
 		if (!dryRun) {
 			await installPackages(["@opennextjs/cloudflare@^1.12.0"], {
 				startText: "Installing @opennextjs/cloudflare adapter",
 				doneText: `${brandColor("installed")}`,
+				// Note: we force install open-next so that even if an incompatible version of
+				//       Next.js is used this installation still succeeds, moving users to
+				//       (hopefully) the right direction (instead of failing at this step)
+				force: true,
 			});
 
 			await updateNextConfig(nextConfigPath);
@@ -81,7 +102,9 @@ function findNextConfigPath(usesTs: boolean): string | undefined {
 	const pathsToCheck = [
 		...(usesTs ? ["next.config.ts"] : []),
 		"next.config.mjs",
-	];
+		"next.config.js",
+		"next.config.cjs",
+	] as const;
 
 	for (const path of pathsToCheck) {
 		const stats = statSync(path, {
@@ -102,10 +125,7 @@ async function updateNextConfig(nextConfigPath: string) {
 
 	const updatedConfigFile =
 		configContent +
-		`
-		import { initOpenNextCloudflareForDev } from '@opennextjs/cloudflare';
-		initOpenNextCloudflareForDev();
-		`.replace(/\n\t*/g, "\n");
+		"\n\nimport('@opennextjs/cloudflare').then(m => m.initOpenNextCloudflareForDev());\n";
 
 	await writeFile(nextConfigPath, updatedConfigFile);