From 962042f82713b7d8fc61165cf4480801cbbd1f67 Mon Sep 17 00:00:00 2001
From: Soo Jae Hwang <misoguy1985@gmail.com>
Date: Sun, 19 Nov 2017 23:23:33 +0900
Subject: [PATCH] Improve formatting of errors when building (#11456)

* Improve formatting of errors when building

* Remove undefined from the header when error.plugin is undefined

* Add babel-code-frame and syntax highlighting in error message

* Run yarn prettier and fix code format
---
 package.json            |  1 +
 scripts/rollup/build.js | 18 +++++++++++++++---
 yarn.lock               | 10 +++++++++-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 26fc0fc411..901af480d2 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "art": "^0.10.1",
     "async": "^1.5.0",
     "babel-cli": "^6.6.5",
+    "babel-code-frame": "^6.26.0",
     "babel-core": "^6.0.0",
     "babel-eslint": "^7.1.0",
     "babel-jest": "^21.3.0-beta.4",
diff --git a/scripts/rollup/build.js b/scripts/rollup/build.js
index a842086209..35e5fbb94b 100644
--- a/scripts/rollup/build.js
+++ b/scripts/rollup/build.js
@@ -25,6 +25,7 @@ const syncReactNative = require('./sync').syncReactNative;
 const syncReactNativeRT = require('./sync').syncReactNativeRT;
 const syncReactNativeCS = require('./sync').syncReactNativeCS;
 const Packaging = require('./packaging');
+const codeFrame = require('babel-code-frame');
 const Wrappers = require('./wrappers');
 
 const UMD_DEV = Bundles.bundleTypes.UMD_DEV;
@@ -407,10 +408,21 @@ function createBundle(bundle, bundleType) {
     })
     .catch(error => {
       if (error.code) {
-        console.error(`\x1b[31m-- ${error.code} (${error.plugin}) --`);
+        console.error(
+          `\x1b[31m-- ${error.code}${
+            error.plugin ? ` (${error.plugin})` : ''
+          } --`
+        );
         console.error(error.message);
-        console.error(error.loc);
-        console.error(error.codeFrame);
+
+        const {file, line, column} = error.loc;
+        const rawLines = fs.readFileSync(file, 'utf-8');
+        // column + 1 is required due to rollup counting column start position from 0
+        // whereas babel-code-frame counts from 1
+        const frame = codeFrame(rawLines, line, column + 1, {
+          highlightCode: true,
+        });
+        console.error(frame);
       } else {
         console.error(error);
       }
diff --git a/yarn.lock b/yarn.lock
index d8e631a8bb..1e87c197a4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -274,6 +274,14 @@ babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+babel-code-frame@^6.26.0:
+  version "6.26.0"
+  resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.26.0.tgz#63fd43f7dc1e3bb7ce35947db8fe369a3f58c74b"
+  dependencies:
+    chalk "^1.1.3"
+    esutils "^2.0.2"
+    js-tokens "^3.0.2"
+
 babel-core@6, babel-core@^6.0.0, babel-core@^6.24.1:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.24.1.tgz#8c428564dce1e1f41fb337ec34f4c3b022b5ad83"
@@ -2930,7 +2938,7 @@ js-tokens@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-1.0.1.tgz#cc435a5c8b94ad15acb7983140fc80182c89aeae"
 
-js-tokens@^3.0.0:
+js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"