Improve vercel build error msg (#201)

* improve vercel build error message

* add changeset

* run prettier:fix

* update varcel build error message and add new getCurrentPackageExecuter utility

* add missing newlines

* refactor getCurrentPackageManager tests and add getCurrentPackageExecuter tests

* add os to getCurrentPackageManager tests

* apply refactoring to package manager utils

.changeset/nervous-wolves-march.md

@@ -0,0 +1,5 @@
+---
+'@cloudflare/next-on-pages': patch
+---
+
+improve the error message shown when the Vercel build fails to make clearer that the issue is not next-on-pages related

src/buildApplication/buildApplication.ts

@@ -18,6 +18,7 @@ import {
 	getVercelStaticAssets,
 	processVercelOutput,
 } from './processVercelOutput';
+import { getCurrentPackageExecuter } from './packageManagerUtils';
 
 /**
  * Builds the _worker.js with static assets implementing the Next.js application
@@ -32,10 +33,13 @@ export async function buildApplication({
 	if (!skipBuild) {
 		try {
 			await buildVercelOutput();
-		} catch (err) {
+		} catch {
 			cliError(
-				(err as Error)?.message ??
-					'Error: The Vercel build failed. For more details see the Vercel logs above.'
+				`
+					The Vercel build (\`${await getCurrentPackageExecuter()} vercel build\`) command failed. For more details see the Vercel logs above.
+					If you need help solving the issue, refer to the Vercel or Next.js documentation or their repositories.
+				`,
+				{ spaced: true }
 			);
 			buildSuccess = false;
 		}

src/buildApplication/buildVercelOutput.ts

@@ -3,9 +3,12 @@ import { spawn } from 'child_process';
 import { join, resolve } from 'path';
 import { cliLog } from '../cli';
 import { validateDir, validateFile } from '../utils';
-import { getCurrentPackageManager } from './getCurrentPackageManager';
-import type { PackageManager } from '../utils/getSpawnCommand';
-import { getSpawnCommand } from '../utils/getSpawnCommand';
+import type { PackageManager } from './packageManagerUtils';
+import {
+	getCurrentPackageExecuter,
+	getCurrentPackageManager,
+	getPackageManagerSpawnCommand,
+} from './packageManagerUtils';
 
 /**
  * Builds the Next.js output via the Vercel CLI
@@ -25,7 +28,7 @@ export async function buildVercelOutput(): Promise<void> {
 	await generateProjectJsonFileIfNeeded();
 	cliLog('Project is ready');
 	await runVercelBuild(pkgMng);
-	cliLog('Completed `npx vercel build`.\n');
+	cliLog(`Completed \`${await getCurrentPackageExecuter()} vercel build\`.`);
 }
 
 /**
@@ -44,7 +47,7 @@ async function generateProjectJsonFileIfNeeded(): Promise<void> {
 }
 
 async function runVercelBuild(pkgMng: PackageManager): Promise<void> {
-	const pkgMngCMD = getSpawnCommand(pkgMng);
+	const pkgMngCMD = getPackageManagerSpawnCommand(pkgMng);
 
 	if (pkgMng === 'yarn (classic)') {
 		cliLog(

src/buildApplication/getCurrentPackageManager.ts → src/buildApplication/packageManagerUtils.ts

@@ -1,9 +1,8 @@
 import YAML from 'js-yaml';
 import { spawn } from 'child_process';
 import { readFile } from 'fs/promises';
-import type { PackageManager } from '../utils';
-import { validateFile, getSpawnCommand } from '../utils';
 import { cliError } from '../cli';
+import { validateFile } from '../utils';
 
 export async function getCurrentPackageManager(): Promise<PackageManager> {
 	const userAgent = process.env.npm_config_user_agent;
@@ -14,7 +13,7 @@ export async function getCurrentPackageManager(): Promise<PackageManager> {
 	if ((userAgent && userAgent.startsWith('pnpm')) || hasPnpmLock) return 'pnpm';
 
 	if ((userAgent && userAgent.startsWith('yarn')) || hasYarnLock) {
-		const yarn = getSpawnCommand('yarn');
+		const yarn = getPackageManagerSpawnCommand('yarn');
 		const getYarnV = spawn(yarn, ['-v']);
 		let yarnV = '';
 		getYarnV.stdout.on('data', data => {
@@ -49,3 +48,41 @@ export async function getCurrentPackageManager(): Promise<PackageManager> {
 	}
 	return 'npm';
 }
+
+export async function getCurrentPackageExecuter(): Promise<string> {
+	const cmd = isWindows() ? '.cmd' : '';
+	const packageManager = await getCurrentPackageManager();
+	switch (packageManager) {
+		case 'npm':
+			return `npx${cmd}`;
+		case 'pnpm':
+			return `pnpx${cmd}`;
+		case 'yarn (berry)':
+			return `yarn${cmd} dlx`;
+		case 'yarn (classic)':
+			return `yarn${cmd}`;
+		default:
+			return `npx${cmd}`;
+	}
+}
+
+const packageManagers = {
+	pnpm: 'pnpx',
+	'yarn (berry)': 'yarn',
+	'yarn (classic)': 'yarn',
+	yarn: 'yarn',
+	npm: 'npx',
+};
+
+export type PackageManager = keyof typeof packageManagers;
+
+export function getPackageManagerSpawnCommand(
+	pkgMng: keyof typeof packageManagers
+): string {
+	const winCMD = isWindows() ? '.cmd' : '';
+	return `${packageManagers[pkgMng]}${winCMD}`;
+}
+
+function isWindows(): boolean {
+	return process.platform === 'win32';
+}

src/cli.ts

@@ -5,9 +5,12 @@ import { z } from 'zod';
 import { argumentParser } from 'zodcli';
 import type { ChalkInstance } from 'chalk';
 import chalk from 'chalk';
-import { getCurrentPackageManager } from './buildApplication/getCurrentPackageManager';
-import { getSpawnCommand, nextOnPagesVersion } from './utils';
-import type { PackageManager } from './utils';
+import { nextOnPagesVersion } from './utils';
+import type { PackageManager } from './buildApplication/packageManagerUtils';
+import {
+	getCurrentPackageManager,
+	getPackageManagerSpawnCommand,
+} from './buildApplication/packageManagerUtils';
 
 // A helper type to handle command line flags. Defaults to false
 const flag = z
@@ -219,7 +222,7 @@ export async function printEnvInfo(): Promise<void> {
 
 function getPackageVersion(packageName: string): string {
 	try {
-		const command = process.platform === 'win32' ? 'npm.cmd' : 'npm';
+		const command = getPackageManagerSpawnCommand('npm');
 		const commandOutput = execFileSync(
 			command,
 			['list', packageName, '--json', '--depth=0'],
@@ -237,7 +240,7 @@ function getPackageVersion(packageName: string): string {
 function getBinaryVersion(binaryName: PackageManager): string {
 	const commandArgs = ['--version'];
 	try {
-		return execFileSync(getSpawnCommand(binaryName), commandArgs)
+		return execFileSync(getPackageManagerSpawnCommand(binaryName), commandArgs)
 			.toString()
 			.trim();
 	} catch {

src/utils/index.ts

@@ -1,4 +1,3 @@
 export * from './fs';
 export * from './version';
-export * from './getSpawnCommand';
 export * from './routing';