Check ESLint warnings and errors in npm run build

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/eject.js

@@ -46,6 +46,7 @@ prompt(
     path.join('scripts', 'build.js'),
     path.join('scripts', 'start.js'),
     path.join('scripts', 'utils', 'chrome.applescript'),
+    path.join('scripts', 'utils', 'logCompileProblems.js'),
     path.join('scripts', 'utils', 'prompt.js'),
     path.join('scripts', 'utils', 'WatchMissingNodeModulesPlugin.js')
   ];

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.
@@ -94,6 +69,12 @@ function setupCompiler(port) {
     var hasWarnings = stats.hasWarnings();
     if (!hasErrors && !hasWarnings) {
       console.log(chalk.green('Compiled successfully!'));
+    }
+    else {
+      logCompileProblems(stats);
+    }
+
+    if (!hasErrors) {
       console.log();
       console.log('The app is running at:');
       console.log();
@@ -102,48 +83,6 @@ function setupCompiler(port) {
       console.log('Note that the development build is not optimized.');
       console.log('To create a production build, use ' + chalk.cyan('npm run build') + '.');
       console.log();
-      return;
-    }
-
-    // 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.');
     }
   });
 }

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.');
+  }
+};