fix(wrangler): Watch for external dependencies changes in pages dev

packages/wrangler/src/pages/dev.ts

@@ -455,9 +455,17 @@ export const Handler = async (args: PagesDevArguments) => {
 		logger.debug(`Compiling worker to "${scriptPath}"...`);
 
 		const onEnd = () => scriptReadyResolve();
+		const watching = new Set();
+
+		// always watch the `functions` directory
+		const watcher = watch([functionsDirectory], {
+			persistent: true,
+			ignoreInitial: true,
+		});
+
 		try {
 			const buildFn = async () => {
-				await buildFunctions({
+				const bundle = await buildFunctions({
 					outfile: scriptPath,
 					functionsDirectory,
 					sourcemap: true,
@@ -469,15 +477,34 @@ export const Handler = async (args: PagesDevArguments) => {
 					routesModule,
 					defineNavigatorUserAgent,
 				});
+
 				await metrics.sendMetricsEvent("build pages functions");
+
+				// external dependencies as returned by ESBuild
+				for (const dep in bundle.dependencies) {
+					const resolvedDep = resolve(functionsDirectory, dep);
+					if (
+						!resolvedDep.match(/\/functions\/./) &&
+						!resolvedDep.match(/\.wrangler\/tmp\/*/) &&
+						// TODO (@Carmen) revisit this condition
+						resolvedDep.match(resolve(process.cwd()))
+					) {
+						if (!watching.has(resolvedDep)) {
+							watching.add(resolvedDep);
+							watcher.add(resolvedDep);
+						}
+					}
+				}
 			};
 
 			await buildFn();
 			// If Functions found routes, continue using Functions
-			watch([functionsDirectory], {
-				persistent: true,
-				ignoreInitial: true,
-			}).on("all", async () => {
+			// TODO (@Carmen) could use some debouncing for bulk
+			// changes here
+			watcher.on("all", async () => {
+				// TODO (@Carmen) consider turning this into proper
+				// verbiage we can display to users
+				logger.warn("[chokidar-add] Rebuilding functions");
 				try {
 					await buildFn();
 				} catch (e) {
@@ -490,6 +517,8 @@ export const Handler = async (args: PagesDevArguments) => {
 							getFunctionsBuildWarning(functionsDirectory, e.message)
 						);
 					} else {
+						// TODO (@Carmen) do we really want to throw for everything
+						// else here?
 						throw e;
 					}
 				}

packages/wrangler/src/pages/functions/buildWorker.ts

@@ -349,17 +349,34 @@ export function buildNotifierPlugin(onEnd: () => void): Plugin {
 		name: "wrangler notifier and monitor",
 		setup(pluginBuild) {
 			pluginBuild.onEnd((result) => {
-				if (result.errors.length > 0) {
-					logger.error(
-						`${result.errors.length} error(s) and ${result.warnings.length} warning(s) when compiling Worker.`
-					);
-				} else if (result.warnings.length > 0) {
-					logger.warn(
-						`${result.warnings.length} warning(s) when compiling Worker.`
-					);
+				if (!result.errors.length && !result.warnings.length) {
+					logger.log("✨ Compiled Worker successfully");
 					onEnd();
 				} else {
-					logger.log("✨ Compiled Worker successfully");
+					if (result.errors.length > 0) {
+						const errorMessages = result.errors.reduce(
+							(acc, err) => `${acc}\n` + `▶︎ ${err.text}`,
+							""
+						);
+
+						logger.error(
+							`Got ${result.errors.length} error${result.errors.length > 1 ? "s" : ""} when compiling Worker:\n` +
+								`${errorMessages}`
+						);
+					}
+
+					if (result.warnings.length > 0) {
+						const warningMessages = result.warnings.reduce(
+							(acc, warning) => `${acc}\n` + `▶︎ ${warning.text}`,
+							""
+						);
+
+						logger.warn(
+							`Got ${result.warnings.length} warning${result.warnings.length > 1 ? "s" : ""} when compiling Worker:\n` +
+								`${warningMessages}`
+						);
+					}
+
 					onEnd();
 				}
 			});