formatWebpackMessages.js 4.44 KiB
/**
 * 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.
 */
'use strict';
// WARNING: this code is untranspiled and is used in browser too.
// Please make sure any changes are in ES5 or contribute a Babel compile step.
// Some custom utilities to prettify Webpack output.
// This is quite hacky and hopefully won't be needed when Webpack fixes this.
// https://github.com/webpack/webpack/issues/2878
var chalk = require('chalk');
var friendlySyntaxErrorLabel = 'Syntax error:';
function isLikelyASyntaxError(message) {
  return message.indexOf(friendlySyntaxErrorLabel) !== -1;
// Cleans up webpack error messages.
function formatMessage(message, isError) {
  var lines = message.split('\n');
  if (lines.length > 2 && lines[1] === '') {
    // Remove extra newline.
    lines.splice(1, 1);
  // Remove webpack-specific loader notation from filename.
  // Before:
  // ./~/css-loader!./~/postcss-loader!./src/App.css
  // After:
  // ./src/App.css
  if (lines[0].lastIndexOf('!') !== -1) {
    lines[0] = lines[0].substr(lines[0].lastIndexOf('!') + 1);
  lines = lines.filter(function(line) {
    // Webpack adds a list of entry points to warning messages:
    //  @ ./src/index.js
    //  @ multi react-scripts/~/react-dev-utils/webpackHotDevClient.js ...
    // It is misleading (and unrelated to the warnings) so we clean it up.
    // It is only useful for syntax errors but we have beautiful frames for them.
    return line.indexOf(' @ ') !== 0;
  });
  // line #0 is filename
  // line #1 is the main error message
  if (!lines[0] || !lines[1]) {
    return lines.join('\n');
  // Cleans up verbose "module not found" messages for files and packages.
  if (lines[1].indexOf('Module not found: ') === 0) {
    lines = [
      lines[0],
      // Clean up message because "Module not found: " is descriptive enough.
      lines[1]
        .replace("Cannot resolve 'file' or 'directory' ", '')
        .replace('Cannot resolve module ', '')
        .replace('Error: ', ''),
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
// Cleans up syntax error messages. if (lines[1].indexOf('Module build failed: ') === 0) { lines[1] = lines[1].replace( 'Module build failed: SyntaxError:', friendlySyntaxErrorLabel ); } // Clean up export errors. // TODO: we should really send a PR to Webpack for this. var exportError = /\s*(.+?)\s*(")?export '(.+?)' was not found in '(.+?)'/; if (lines[1].match(exportError)) { lines[1] = lines[1].replace( exportError, "$1 '$4' does not contain an export named '$3'." ); } // Make filename nicer. var slashIndex = Math.max( lines[0].lastIndexOf('/'), lines[0].lastIndexOf('\\') ); var fileName = lines[0].substring(slashIndex + 1); var path = lines[0].substring(0, slashIndex + 1); lines[0] = chalk.dim(isError ? 'Found errors in ' : 'Found warnings in ') + path + (isError ? chalk.red : chalk.yellow)(fileName) + chalk.dim(':'); // Reassemble the message. message = lines.join('\n'); // Internal stacks are generally useless so we strip them... with the // exception of stacks containing `webpack:` because they're normally // from user code generated by WebPack. For more information see // https://github.com/facebookincubator/create-react-app/pull/1050 message = message.replace( /^\s*at\s((?!webpack:).)*:\d+:\d+[\s\)]*(\n|$)/gm, '' ); // at ... ...:x:y return message.trim(); } function formatWebpackMessages(json) { var formattedErrors = json.errors.map(function(message) { return formatMessage(message, true); }); var formattedWarnings = json.warnings.map(function(message) { return formatMessage(message, false); }); var result = { errors: formattedErrors, warnings: formattedWarnings, }; if (result.errors.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. result.errors = result.errors.filter(isLikelyASyntaxError); } // Only keep the first error. Others are often indicative // of the same problem, but confuse the reader with noise. if (result.errors.length > 1) { result.errors.length = 1; } return result; } module.exports = formatWebpackMessages;
141