create-react-app v3 doesn't show TypeScript errors in overlay

[karlhorky]

🐛 bug report

Description of the problem

TypeScript errors in a create-react-app sandbox are not displayed in the browser in the error overlay:

As a counter-example, the CRA errors in the overlay displayed locally:

I didn't find the original PR introducing this in CRA, but I found this PR discussing the feature: facebook/create-react-app#7091

Edit: Maybe this is the original PR? facebook/create-react-app#5903

This code from the PR looks like it could plausibly be the async handling of TypeScript errors (with modifying the webpack compilation stats and sending the errors and warnings to the webpack socket):

const messages = await tsMessagesPromise;
clearTimeout(delayedMsg);
statsData.errors.push(...messages.errors);
statsData.warnings.push(...messages.warnings);

// Push errors and warnings into compilation result
// to show them after page refresh triggered by user.
stats.compilation.errors.push(...messages.errors);
stats.compilation.warnings.push(...messages.warnings);

if (messages.errors.length > 0) {
  devSocket.errors(messages.errors);
} else if (messages.warnings.length > 0) {
  devSocket.warnings(messages.warnings);
}

How has this issue affected you? What are you trying to accomplish?

If possible, I would like to see TypeScript error messages in the error overlay in the browser (like in normal CRA locally).

Link to sandbox: link

Your Environment

Software	Name/Version
Сodesandbox	PROD-1561199685-a102c8493
Browser	Chrome 75.0.3770.100
Operating System	macOS 10.14.5

Ref (maybe related?): #1303

[karlhorky]

Well, after trolling around with the TypeScript compiler today, I've found a hacky way to show the errors in the browser.

I've got it running here:

https://codesandbox.io/s/create-react-app-v3-with-typescript-overlay-errors-colix

References for what I was trying to do (type checking TypeScript code in create-react-app and Jest tests):

https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API#a-minimal-compiler

microsoft/TypeScript#29226 (comment)

https://gist.github.com/teppeis/6e0f2d823a94de4ae442

dsherret/ts-morph#358 (comment)

https://stackoverflow.com/questions/52969177/typescript-createprogram-throwing-ts-sys-is-undefined (with the error "Cannot read property 'useCaseSensitiveFileNames' of undefined")

---

Note that there are still significant problems with this approach:

• If not filtered out, all the errors with the DOM APIs appear:
  Cannot find global type 'Array'.
Cannot find global type 'Boolean'.
Cannot find name 'console'. Do you need to change your target library? Try changing the lib compiler option to include 'dom'.
  etc..

[github-actions]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[karlhorky]

not stale

[github-actions]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.

[karlhorky]

not stale

[github-actions]

This issue has automatically been marked stale because there has been no activity in a while. Please leave a comment if the issue has not been resolved, or if it is not stale for any other reason. After 2 weeks, this issue will automatically be closed, unless a comment is made or the stale label is removed.