codesandbox / codesandbox/codesandbox-client

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

Open
#2,090 9 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

🤔 Improvement UI
Dominant language
JavaScript
Stars
13.6k
Forks
2.4k
Avg merge
6d 19h
Merged PRs (30d)
2

Description

🐛 bug report

Description of the problem

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

Screen Shot 2019-06-24 at 18 43 49

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

Screen Shot 2019-06-24 at 18 37 50

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

Edit: Maybe this is the original PR? https://github.com/facebook/create-react-app/pull/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?): https://github.com/codesandbox/codesandbox-client/issues/1303

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the missing overlay errors with the linked create-react-app v3 sandbox, then compare the behavior with the referenced Create React App PRs and the related issue. Done means TypeScript errors from the sandbox appear in the browser error overlay, like the locally displayed CRA errors.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, typescript, webpack
Domain
devtools, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.