diff --git a/packages/razzle-dev-utils/package.json b/packages/razzle-dev-utils/package.json index 3c6067dbd..4641333fd 100644 --- a/packages/razzle-dev-utils/package.json +++ b/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" diff --git a/packages/razzle-dev-utils/prettyNodeErrors.js b/packages/razzle-dev-utils/prettyNodeErrors.js index 5374b78a8..7dd99d7db 100644 --- a/packages/razzle-dev-utils/prettyNodeErrors.js +++ b/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, diff --git a/yarn.lock b/yarn.lock index e8d25ba41..b079bb3a2 100644 --- a/yarn.lock +++ b/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: