Merge pull request #181 from halfzebra/better-errors

Better error output

Author: halfzebra

config/webpack.config.dev.js

@@ -34,7 +34,8 @@ module.exports = {
     // the line below with these two lines if you prefer the stock client:
     // require.resolve('webpack-dev-server/client') + '?/',
     // require.resolve('webpack/hot/dev-server'),
-    require.resolve('react-dev-utils/webpackHotDevClient'),
+    // require.resolve('react-dev-utils/webpackHotDevClient'),
+    require.resolve('../scripts/utils/webpackHotDevClient'),
 
     // Errors should be considered fatal in development
     require.resolve('react-error-overlay'),
@@ -196,5 +197,15 @@ module.exports = {
     new HotModuleReplacementPlugin(),
 
     new NamedModulesPlugin()
-  ]
+  ],
+
+  // Some libraries import Node modules but don't use them in the browser.
+  // Tell Webpack to provide empty mocks for them so importing them works.
+  node: {
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
 };

config/webpack.config.prod.js

@@ -242,5 +242,14 @@ module.exports = {
       // Don't precache sourcemaps (they're large) and build asset manifest:
       staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/]
     })
-  ]
+  ],
+  // Some libraries import Node modules but don't use them in the browser.
+  // Tell Webpack to provide empty mocks for them so importing them works.
+  node: {
+    dgram: 'empty',
+    fs: 'empty',
+    net: 'empty',
+    tls: 'empty',
+    child_process: 'empty'
+  }
 };

scripts/build.js

@@ -22,7 +22,7 @@ const paths = require('../config/paths');
 const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
-const highlightElmCompilerErrors = require('./utils/highlightElmCompilerErrors');
+const formatElmCompilerErrors = require('./utils/formatElmCompilerErrors');
 
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild;
@@ -90,7 +90,7 @@ function build(previousFileSizes) {
       if (err) {
         return reject(err);
       }
-      const messages = highlightElmCompilerErrors(
+      const messages = formatElmCompilerErrors(
         formatWebpackMessages(stats.toJson({}, true))
       );
       if (messages.errors.length) {

scripts/eject.js

@@ -72,8 +72,8 @@ function performEject(pkg) {
     fs.copySync(path.resolve(__dirname, 'build.js'), './scripts/build.js');
     fs.copySync(path.resolve(__dirname, 'start.js'), './scripts/start.js');
     fs.copySync(
-      path.resolve(__dirname, './utils/highlightElmCompilerErrors.js'),
-      './scripts/utils/highlightElmCompilerErrors.js'
+      path.resolve(__dirname, './utils/formatElmCompilerErrors.js'),
+      './scripts/utils/formatElmCompilerErrors.js'
     );
     fs.copySync(path.resolve(__dirname, '../config'), './config');
   } catch (err) {

scripts/start.js

@@ -29,7 +29,7 @@ const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 const clearConsole = require('react-dev-utils/clearConsole');
 const openBrowser = require('react-dev-utils/openBrowser');
 const createDevServerConfig = require('../config/webpackDevServer.config');
-const highlightElmCompilerErrors = require('./utils/highlightElmCompilerErrors');
+const formatElmCompilerErrors = require('./utils/formatElmCompilerErrors');
 const paths = require('../config/paths');
 
 if (fs.existsSync('elm-package.json') === false) {
@@ -100,7 +100,7 @@ function createCompiler(webpack, config, appName, urls) {
     // 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.
-    const messages = highlightElmCompilerErrors(
+    const messages = formatElmCompilerErrors(
       formatWebpackMessages(stats.toJson({}, true))
     );
 

scripts/utils/formatElmCompilerErrors.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var chalk = require('chalk');
+var ctx = new chalk.constructor({ enabled: true });
+var error = ctx.bold.red;
+var filename = ctx.cyan;
+var isBrowser = typeof window === 'object';
+
+if (isBrowser) {
+  ctx.level = 1;
+  error = ctx.cyan;
+  filename = ctx.green;
+}
+
+function stripRedundantInfo(error) {
+  return error.replace(
+    /Module build failed: Error: Compiler process exited with error Compilation failed/g,
+    ''
+  );
+}
+
+module.exports = function formatElmCompilerErrors(messages) {
+  var errors = messages.errors;
+  var warnings = messages.warnings;
+  return errors.length > 0
+    ? {
+        errors: errors
+          .map(x =>
+            x
+              .replace(/(--\s[A-Z\s]+-+\s.*\.elm\n)/g, filename('$1'))
+              .replace(/(\n\s*)(\^+)/g, '$1' + error('$2'))
+              .replace(/(\d+)(\|>)/g, '$1' + error('$2'))
+          )
+          .map(stripRedundantInfo),
+        warnings: warnings
+      }
+    : messages;
+};

scripts/utils/highlightElmCompilerErrors.js

@@ -15,7 +15,7 @@ var url = require('url');
 var launchEditorEndpoint = require('react-dev-utils/launchEditorEndpoint');
 var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 var ErrorOverlay = require('react-error-overlay');
-var highlightElmCompilerErrors = require('./highlightElmCompilerErrors');
+var formatElmCompilerErrors = require('./formatElmCompilerErrors');
 
 ErrorOverlay.startReportingRuntimeErrors({
   launchEditorEndpoint: launchEditorEndpoint,
@@ -142,7 +142,7 @@ function handleErrors(errors) {
   hasCompileErrors = true;
 
   // "Massage" webpack messages.
-  var formatted = highlightElmCompilerErrors(
+  var formatted = formatElmCompilerErrors(
     formatWebpackMessages({
       errors: errors,
       warnings: []

scripts/utils/webpackHotDevClient.js

@@ -2327,6 +2327,7 @@ elm-test@^0.18.8:
     find-parent-dir "^0.3.0"
     firstline "1.2.1"
     fs-extra "0.30.0"
+    fsevents "1.1.2"
     glob "^7.1.1"
     lodash "4.13.1"
     minimist "^1.2.0"
@@ -2493,11 +2494,11 @@ escope@^3.6.0:
     estraverse "^4.1.1"
 
 eslint-plugin-prettier@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.2.0.tgz#f2837ad063903d73c621e7188fb3d41486434088"
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-2.3.1.tgz#e7a746c67e716f335274b88295a9ead9f544e44d"
   dependencies:
     fast-diff "^1.1.1"
-    jest-docblock "^20.0.1"
+    jest-docblock "^21.0.0"
 
 eslint-scope@^3.7.1:
   version "3.7.1"
@@ -2507,18 +2508,18 @@ eslint-scope@^3.7.1:
     estraverse "^4.1.1"
 
 eslint@^4.6.1:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.6.1.tgz#ddc7fc7fd70bf93205b0b3449bb16a1e9e7d4950"
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.7.2.tgz#ff6f5f5193848a27ee9b627be3e73fb9cb5e662e"
   dependencies:
     ajv "^5.2.0"
     babel-code-frame "^6.22.0"
     chalk "^2.1.0"
     concat-stream "^1.6.0"
     cross-spawn "^5.1.0"
-    debug "^2.6.8"
+    debug "^3.0.1"
     doctrine "^2.0.0"
     eslint-scope "^3.7.1"
-    espree "^3.5.0"
+    espree "^3.5.1"
     esquery "^1.0.0"
     estraverse "^4.2.0"
     esutils "^2.0.2"
@@ -2539,7 +2540,7 @@ eslint@^4.6.1:
     natural-compare "^1.4.0"
     optionator "^0.8.2"
     path-is-inside "^1.0.2"
-    pluralize "^4.0.0"
+    pluralize "^7.0.0"
     progress "^2.0.0"
     require-uncached "^1.0.3"
     semver "^5.3.0"
@@ -2548,9 +2549,9 @@ eslint@^4.6.1:
     table "^4.0.1"
     text-table "~0.2.0"
 
-espree@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.0.tgz#98358625bdd055861ea27e2867ea729faf463d8d"
+espree@^3.5.1:
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.1.tgz#0c988b8ab46db53100a1954ae4ba995ddd27d87e"
   dependencies:
     acorn "^5.1.1"
     acorn-jsx "^3.0.0"
@@ -3948,9 +3949,9 @@ [email protected], isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
 
-jest-docblock@^20.0.1:
-  version "20.0.3"
-  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-20.0.3.tgz#17bea984342cc33d83c50fbe1545ea0efaa44712"
+jest-docblock@^21.0.0:
+  version "21.1.0"
+  resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-21.1.0.tgz#43154be2441fb91403e36bb35cb791a5017cea81"
 
 js-base64@^2.1.9:
   version "2.1.9"
@@ -5210,9 +5211,9 @@ [email protected]:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.0.tgz#349dbb7ffd38081fcadc0853df687f0c7744cd65"
 
-pluralize@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-4.0.0.tgz#59b708c1c0190a2f692f1c7618c446b052fd1762"
+pluralize@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
 portfinder@^1.0.9:
   version "1.0.13"
@@ -7180,8 +7181,8 @@ webpack-dev-middleware@^1.11.0:
     range-parser "^1.0.3"
 
 webpack-dev-server@^2.8.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.8.1.tgz#344e312bf560498ee0c518f2fcc709951630f667"
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.8.2.tgz#abd61f410778cc4c843d7cebbf41465b1ab7734c"
   dependencies:
     ansi-html "0.0.7"
     array-includes "^3.0.3"
@@ -7203,10 +7204,10 @@ webpack-dev-server@^2.8.1:
     sockjs "0.3.18"
     sockjs-client "1.1.4"
     spdy "^3.4.1"
-    strip-ansi "^4.0.0"
+    strip-ansi "^3.0.1"
     supports-color "^4.2.1"
     webpack-dev-middleware "^1.11.0"
-    yargs "^8.0.2"
+    yargs "^6.6.0"
 
 webpack-sources@^1.0.1:
   version "1.0.1"
@@ -7216,8 +7217,8 @@ webpack-sources@^1.0.1:
     source-map "~0.5.3"
 
 webpack@^3.5.6:
-  version "3.5.6"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.6.tgz#a492fb6c1ed7f573816f90e00c8fbb5a20cc5c36"
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.6.0.tgz#a89a929fbee205d35a4fa2cc487be9cbec8898bc"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"
@@ -7383,7 +7384,7 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
-yargs@^6.5.0:
+yargs@^6.5.0, yargs@^6.6.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
   dependencies: