From 6d1c55cb506f7d072c0de27494524b46523676e2 Mon Sep 17 00:00:00 2001 From: Andres Kalle Date: Mon, 22 Aug 2016 16:55:14 +0300 Subject: [PATCH 1/3] Show "The app is running at..." even if there are warnings (#440) --- scripts/start.js | 87 +++++++++++++++++++++++++----------------------- 1 file changed, 45 insertions(+), 42 deletions(-) diff --git a/scripts/start.js b/scripts/start.js index aa68ab40ff3..a31c24e6186 100644 --- a/scripts/start.js +++ b/scripts/start.js @@ -94,6 +94,51 @@ function setupCompiler(port) { var hasWarnings = stats.hasWarnings(); if (!hasErrors && !hasWarnings) { 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.'); + } + } + + if (!hasErrors) { console.log(); console.log('The app is running at:'); console.log(); @@ -102,48 +147,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.'); } }); } From 084280f9480c73b1e3198d2f493242dfdddece27 Mon Sep 17 00:00:00 2001 From: Andres Kalle Date: Mon, 22 Aug 2016 17:09:00 +0300 Subject: [PATCH 2/3] Check for errors and warnings in build script as well (#440) --- scripts/build.js | 6 +++ scripts/start.js | 68 +------------------------ scripts/utils/logCompileProblems.js | 79 +++++++++++++++++++++++++++++ 3 files changed, 87 insertions(+), 66 deletions(-) create mode 100644 scripts/utils/logCompileProblems.js diff --git a/scripts/build.js b/scripts/build.js index b02d8dc3200..8b606f15b88 100644 --- a/scripts/build.js +++ b/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(); diff --git a/scripts/start.js b/scripts/start.js index a31c24e6186..12ae971e1af 100644 --- a/scripts/start.js +++ b/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) { diff --git a/scripts/utils/logCompileProblems.js b/scripts/utils/logCompileProblems.js new file mode 100644 index 00000000000..0c394a4f6ce --- /dev/null +++ b/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.'); + } +}; From 0849cd7ad0c97ec5a6da25e77e2077a1ffae0389 Mon Sep 17 00:00:00 2001 From: Andres Kalle Date: Mon, 22 Aug 2016 18:24:15 +0300 Subject: [PATCH 3/3] Include logCompileProblems.js in ejected project (#440) --- scripts/eject.js | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/eject.js b/scripts/eject.js index 55661d19285..11a97033f83 100644 --- a/scripts/eject.js +++ b/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') ];