feat($scripts): Clean-up errors from Elm Compiler before showing them

Added a function for stripping redundant text from error messages

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'),

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,27 @@
+'use strict';
+
+var chalk = require('chalk');
+
+function stripRedundantInfo(error) {
+  console.log(error);
+  return error.replace(
+    /(Module build failed: Error: Compiler process exited with error Compilation failed)\n--/g,
+    '\n--'
+  );
+}
+
+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, chalk.cyan('$1'))
+        .replace(/(\n\s*)(\^+)/g, '$1' + chalk.red('$2'))
+        .replace(/(\d+\|)(>)/g, '$1' + chalk.bold(chalk.red('$2')))
+    ).map(stripRedundantInfo),
+    warnings: warnings
+  }
+  : messages;
+};

scripts/utils/webpackHotDevClient.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: []