Ignore column from source map and only use pretty errors if file is r…

…ead (#696)

packages/razzle-dev-utils/package.json

@@ -16,8 +16,9 @@
     "prettyNodeErrors.js"
   ],
   "dependencies": {
+    "@babel/code-frame": "^7.0.0-beta.52",
     "chalk": "1.1.3",
-    "jest-message-util": "^23.2.0",
+    "jest-message-util": "^23.4.0",
     "react-dev-utils": "4.1.0",
     "sockjs-client": "1.1.4",
     "strip-ansi": "3.0.1"

packages/razzle-dev-utils/prettyNodeErrors.js

@@ -1,16 +1,32 @@
+const fs = require('fs');
 const {
-  formatExecError,
+  getTopFrame,
+  getStackTraceLines,
   separateMessageFromStack,
 } = require('jest-message-util');
+const { codeFrameColumns } = require('@babel/code-frame');
 
 function pretty(error) {
-  return `\n${formatExecError(
-    error,
-    { rootDir: process.cwd() },
-    {},
-    undefined,
-    true
-  )}`;
+  const { message, stack } = error;
+  const lines = getStackTraceLines(stack);
+  const topFrame = getTopFrame(lines);
+  const fallback = `${message}${stack}`;
+
+  if (!topFrame) {
+    return fallback;
+  }
+
+  const { file, line } = topFrame;
+  try {
+    const result = codeFrameColumns(
+      fs.readFileSync(file, 'utf8'),
+      { start: { line } },
+      { highlightCode: true }
+    );
+    return `\n${message}\n\n${result}\n${stack}\n`;
+  } catch (error) {
+    return fallback;
+  }
 }
 
 function usePrettyErrors(transform) {
@@ -21,12 +37,12 @@ function usePrettyErrors(transform) {
       ? separateMessageFromStack(prepareStackTrace(error, trace))
       : error;
     const transformed = transform ? transform(prepared) : prepared;
-
     return pretty(transformed);
   };
 }
 
-// Currently needed to fix sourcemap path
+// Clean up Webpack's sourcemap namespacing in error stacks
+// @see https://github.com/facebook/create-react-app/blob/next/packages/react-dev-utils/formatWebpackMessages.js#L112
 const stackTransform = ({ stack = '', ...rest }) => ({
   stack: stack.replace('/build/webpack:', ''),
   ...rest,

yarn.lock

@@ -18,6 +18,12 @@
   dependencies:
     "@babel/highlight" "7.0.0-beta.42"
 
+"@babel/code-frame@^7.0.0-beta.52":
+  version "7.0.0-beta.52"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.52.tgz#192483bfa0d1e467c101571c21029ccb74af2801"
+  dependencies:
+    "@babel/highlight" "7.0.0-beta.52"
+
 "@babel/generator@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
@@ -64,6 +70,14 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
+"@babel/highlight@7.0.0-beta.52":
+  version "7.0.0-beta.52"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.52.tgz#ef24931432f06155e7bc39cdb8a6b37b4a28b3d0"
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^3.0.0"
+
 "@babel/template@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@@ -4492,13 +4506,7 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
-file-loader@0.11.2:
-  version "0.11.2"
-  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-0.11.2.tgz#4ff1df28af38719a6098093b88c82c71d1794a34"
-  dependencies:
-    loader-utils "^1.0.2"
-
-file-loader@^1.1.11:
+file-loader@0.11.2, file-loader@1.1.11, file-loader@^1.1.11:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.11.tgz#6fe886449b0f2a936e43cabaac0cdbfb369506f8"
   dependencies:
@@ -6619,13 +6627,13 @@ jest-message-util@^23.1.0:
     slash "^1.0.0"
     stack-utils "^1.0.1"
 
-jest-message-util@^23.2.0:
-  version "23.2.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-23.2.0.tgz#591e8148fff69cf89b0414809c721756ebefe744"
+jest-message-util@^23.4.0:
+  version "23.4.0"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-23.4.0.tgz#17610c50942349508d01a3d1e0bda2c079086a9f"
   dependencies:
     "@babel/code-frame" "^7.0.0-beta.35"
     chalk "^2.0.1"
-    micromatch "^3.1.10"
+    micromatch "^2.3.11"
     slash "^1.0.0"
     stack-utils "^1.0.1"
 
@@ -8088,24 +8096,6 @@ micromatch@^2.1.5, micromatch@^2.3.11:
     parse-glob "^3.0.4"
     regex-cache "^0.4.2"
 
-micromatch@^3.1.10:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.10.tgz#70859bc95c9840952f359a068a3fc49f9ecfac23"
-  dependencies:
-    arr-diff "^4.0.0"
-    array-unique "^0.3.2"
-    braces "^2.3.1"
-    define-property "^2.0.2"
-    extend-shallow "^3.0.2"
-    extglob "^2.0.4"
-    fragment-cache "^0.2.1"
-    kind-of "^6.0.2"
-    nanomatch "^1.2.9"
-    object.pick "^1.3.0"
-    regex-not "^1.0.0"
-    snapdragon "^0.8.1"
-    to-regex "^3.0.2"
-
 micromatch@^3.1.4, micromatch@^3.1.8:
   version "3.1.9"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.9.tgz#15dc93175ae39e52e93087847096effc73efcf89"
@@ -11738,7 +11728,7 @@ to-regex-range@^2.1.0:
     is-number "^3.0.0"
     repeat-string "^1.6.1"
 
-to-regex@^3.0.1, to-regex@^3.0.2:
+to-regex@^3.0.1:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/to-regex/-/to-regex-3.0.2.tgz#13cfdd9b336552f30b51f33a8ae1b42a7a7599ce"
   dependencies: