Check for errors and warnings in build script as well (facebook#440)

scripts/build.js

@@ -17,6 +17,7 @@ var filesize = require('filesize');
 var gzipSize = require('gzip-size').sync;
 var rimrafSync = require('rimraf').sync;
 var webpack = require('webpack');
+var logCompileProblems = require('./utils/logCompileProblems');
 var config = require('../config/webpack.config.prod');
 var paths = require('../config/paths');
 var recursive = require('recursive-readdir');
@@ -111,6 +112,11 @@ function build(previousSizeMap) {
       process.exit(1);
     }
 
+    if (stats.hasErrors() || stats.hasWarnings()) {
+      logCompileProblems(stats);
+      process.exit(1);
+    }
+
     console.log(chalk.green('Compiled successfully.'));
     console.log();
 

scripts/start.js

@@ -18,6 +18,7 @@ var httpProxyMiddleware = require('http-proxy-middleware');
 var execSync = require('child_process').execSync;
 var opn = require('opn');
 var detect = require('detect-port');
+var logCompileProblems = require('./utils/logCompileProblems');
 var prompt = require('./utils/prompt');
 var config = require('../config/webpack.config.dev');
 var paths = require('../config/paths');
@@ -40,32 +41,6 @@ if (isSmokeTest) {
   };
 }
 
-// Some custom utilities to prettify Webpack output.
-// This is a little hacky.
-// It would be easier if webpack provided a rich error object.
-var friendlySyntaxErrorLabel = 'Syntax error:';
-function isLikelyASyntaxError(message) {
-  return message.indexOf(friendlySyntaxErrorLabel) !== -1;
-}
-function formatMessage(message) {
-  return message
-    // Make some common errors shorter:
-    .replace(
-      // Babel syntax error
-      'Module build failed: SyntaxError:',
-      friendlySyntaxErrorLabel
-    )
-    .replace(
-      // Webpack file not found error
-      /Module not found: Error: Cannot resolve 'file' or 'directory'/,
-      'Module not found:'
-    )
-    // Internal stacks are generally useless so we strip them
-    .replace(/^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '') // at ... ...:x:y
-    // Webpack loader names obscure CSS filenames
-    .replace('./~/css-loader!./~/postcss-loader!', '');
-}
-
 function clearConsole() {
   // This seems to work best on Windows and other systems.
   // The intention is to clear the output so you can focus on most recent build.
@@ -96,46 +71,7 @@ function setupCompiler(port) {
       console.log(chalk.green('Compiled successfully!'));
     }
     else {
-      // We have switched off the default Webpack output in WebpackDevServer
-      // options so we are going to "massage" the warnings and errors and present
-      // them in a readable focused way.
-      // We use stats.toJson({}, true) to make output more compact and readable:
-      // https://github.com/facebookincubator/create-react-app/issues/401#issuecomment-238291901
-      var json = stats.toJson({}, true);
-      var formattedErrors = json.errors.map(message =>
-        'Error in ' + formatMessage(message)
-      );
-      var formattedWarnings = json.warnings.map(message =>
-        'Warning in ' + formatMessage(message)
-      );
-      if (hasErrors) {
-        console.log(chalk.red('Failed to compile.'));
-        console.log();
-        if (formattedErrors.some(isLikelyASyntaxError)) {
-          // If there are any syntax errors, show just them.
-          // This prevents a confusing ESLint parsing error
-          // preceding a much more useful Babel syntax error.
-          formattedErrors = formattedErrors.filter(isLikelyASyntaxError);
-        }
-        formattedErrors.forEach(message => {
-          console.log(message);
-          console.log();
-        });
-        // If errors exist, ignore warnings.
-        return;
-      }
-      if (hasWarnings) {
-        console.log(chalk.yellow('Compiled with warnings.'));
-        console.log();
-        formattedWarnings.forEach(message => {
-          console.log(message);
-          console.log();
-        });
-        // Teach some ESLint tricks.
-        console.log('You may use special comments to disable some warnings.');
-        console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
-        console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
-      }
+      logCompileProblems(stats);
     }
 
     if (!hasErrors) {

scripts/utils/logCompileProblems.js

@@ -0,0 +1,79 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+var chalk = require('chalk');
+
+// Some custom utilities to prettify Webpack output.
+// This is a little hacky.
+// It would be easier if webpack provided a rich error object.
+var friendlySyntaxErrorLabel = 'Syntax error:';
+function isLikelyASyntaxError(message) {
+  return message.indexOf(friendlySyntaxErrorLabel) !== -1;
+}
+function formatMessage(message) {
+  return message
+    // Make some common errors shorter:
+    .replace(
+      // Babel syntax error
+      'Module build failed: SyntaxError:',
+      friendlySyntaxErrorLabel
+    )
+    .replace(
+      // Webpack file not found error
+      /Module not found: Error: Cannot resolve 'file' or 'directory'/,
+      'Module not found:'
+    )
+    // Internal stacks are generally useless so we strip them
+    .replace(/^\s*at\s.*:\d+:\d+[\s\)]*\n/gm, '') // at ... ...:x:y
+    // Webpack loader names obscure CSS filenames
+    .replace('./~/css-loader!./~/postcss-loader!', '');
+}
+
+module.exports = function (stats) {
+  // We have switched off the default Webpack output in WebpackDevServer
+  // options so we are going to "massage" the warnings and errors and present
+  // them in a readable focused way.
+  // We use stats.toJson({}, true) to make output more compact and readable:
+  // https://github.com/facebookincubator/create-react-app/issues/401#issuecomment-238291901
+  var json = stats.toJson({}, true);
+  var formattedErrors = json.errors.map(message =>
+    'Error in ' + formatMessage(message)
+  );
+  var formattedWarnings = json.warnings.map(message =>
+    'Warning in ' + formatMessage(message)
+  );
+  if (stats.hasErrors()) {
+    console.log(chalk.red('Failed to compile.'));
+    console.log();
+    if (formattedErrors.some(isLikelyASyntaxError)) {
+      // If there are any syntax errors, show just them.
+      // This prevents a confusing ESLint parsing error
+      // preceding a much more useful Babel syntax error.
+      formattedErrors = formattedErrors.filter(isLikelyASyntaxError);
+    }
+    formattedErrors.forEach(message => {
+      console.log(message);
+      console.log();
+    });
+    // If errors exist, ignore warnings.
+    return;
+  }
+  if (stats.hasWarnings()) {
+    console.log(chalk.yellow('Compiled with warnings.'));
+    console.log();
+    formattedWarnings.forEach(message => {
+      console.log(message);
+      console.log();
+    });
+    // Teach some ESLint tricks.
+    console.log('You may use special comments to disable some warnings.');
+    console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
+    console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
+  }
+};