react-error-overlay fails to parse typescript errors

Created by: kaykayehnn

Is this a bug report?

yes

Which terms did you search for in User Guide?

react-error-overlay

Environment

System: OS: macOS 10.14.5 CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz Binaries: Node: 12.2.0 - /usr/local/bin/node Yarn: 1.13.0 - /usr/local/bin/yarn npm: 6.9.0 - /usr/local/bin/npm Browsers: Chrome: 74.0.3729.157 Firefox: 66.0.5 Safari: 12.1.1 npmPackages: react: ^16.8.6 => 16.8.6 react-dom: ^16.8.6 => 16.8.6 react-scripts: 3.0.1 => 3.0.1 npmGlobalPackages: create-react-app: 3.0.0

Steps to Reproduce

In a create-react-app typescript project:

Start the development server
Make a typescript error in any file (let a: string = 0 for example).
The error overlay displays the error, however clicking on the exception does not navigate to the file in the text editor as with other webpack errors.

Expected Behavior

Clicking on the error overlay navigates to the file in a text editor.

Actual Behavior

The error overlay isn't clickable.

Details

React-error-overlay tries parsing the exception by looking for a filepath in the error message. This is handled in parseCompileError.js, where the filepath regex matches only relative paths:

const filePathRegex = /^\.(\/[^/\n ]+)+\.[^/\n ]+$/;

whereas typescript errors use absolute paths. As discussed in https://github.com/facebook/create-react-app/pull/6502#discussion_r259686344 making the paths relative has some drawbacks so it would be best to keep them absolute. Also TS error locations are specified like (line,colon) so we would need to add that format to the lineNumberRegexes array.

I can submit a PR for this if that's okay.