From a22b6d5f7102a62f531672c6571b081cb3678793 Mon Sep 17 00:00:00 2001
From: Swashata Ghosh <swashata@wpquark.com>
Date: Sat, 3 Nov 2018 16:55:43 +0530
Subject: [PATCH] feat: show first-time build errors (if any)

Fixes #41
---
 packages/scripts/src/bin/serve.ts      | 33 +++++++++++++++++++++++++-
 packages/scripts/src/scripts/Server.ts |  6 ++---
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/scripts/src/bin/serve.ts b/packages/scripts/src/bin/serve.ts
index 528e352b1..7723ba080 100644
--- a/packages/scripts/src/bin/serve.ts
+++ b/packages/scripts/src/bin/serve.ts
@@ -5,6 +5,8 @@ import ora from 'ora';
 import path from 'path';
 import PrettyError from 'pretty-error';
 import clearConsole from 'react-dev-utils/clearConsole';
+import formatWebpackMessages from 'react-dev-utils/formatWebpackMessages';
+import webpack from 'webpack';
 import { getProjectAndServerConfig } from '../config/getProjectAndServerConfig';
 import { WpackioError } from '../errors/WpackioError';
 import { Server } from '../scripts/Server';
@@ -116,13 +118,42 @@ export function serve(options: ProgramOptions | undefined): void {
 					`${watchSymbol} watching for changes${watchEllipsis}`
 				);
 			},
-			firstCompile: () => {
+			firstCompile: (stats: webpack.Stats) => {
 				spinner.stop();
+				const raw = stats.toJson('verbose');
+				const messages = formatWebpackMessages(raw);
 				clearConsole();
 				serverInfo(server.getServerUrl(), server.getBsUiUrl());
 				console.log(
 					`${logSymbols.success} ${chalk.dim('server started!')}`
 				);
+				if (stats.hasErrors()) {
+					console.log(
+						`${chalk.bgRed.black(' ERROR ')} please review`
+					);
+					messages.errors.forEach(e => console.log(e));
+					console.log('');
+					console.error(
+						`${logSymbols.error} ${chalk.dim(
+							'failed to compile'
+						)}\n`
+					);
+				} else {
+					if (stats.hasWarnings()) {
+						console.log(
+							`${logSymbols.warning} ${chalk.dim(
+								'compiled with warnings...'
+							)}\n`
+						);
+						messages.warnings.forEach(e => console.log(e));
+					} else {
+						console.log(
+							`${logSymbols.success} ${chalk.dim(
+								'compiled successfully'
+							)}\n`
+						);
+					}
+				}
 				console.log(
 					`${watchSymbol} watching for changes${watchEllipsis}`
 				);
diff --git a/packages/scripts/src/scripts/Server.ts b/packages/scripts/src/scripts/Server.ts
index d5ff973e3..45a74b356 100644
--- a/packages/scripts/src/scripts/Server.ts
+++ b/packages/scripts/src/scripts/Server.ts
@@ -16,7 +16,7 @@ import { ServerConfig } from '../config/server.config.default';
 interface Callbacks {
 	invalid(): void;
 	done(stats: webpack.Stats): void;
-	firstCompile(): void;
+	firstCompile(stats: webpack.Stats): void;
 	onError(err: { errors: string[]; warnings: string[] }): void;
 	onWarn(warn: { errors: string[]; warnings: string[] }): void;
 }
@@ -141,9 +141,9 @@ export class Server {
 		});
 
 		// Open browser on first build
-		devMiddleware.waitUntilValid(() => {
+		devMiddleware.waitUntilValid(stats => {
 			if (!this.firstCompileCompleted) {
-				this.callbacks.firstCompile();
+				this.callbacks.firstCompile(stats);
 				this.firstCompileCompleted = true;
 			}
 			this.openBrowser();