codesandbox / codesandbox/codesandbox-client
create-react-app v3 doesn't show TypeScript errors in overlay
Nobody has claimed this yet.
- 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:
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: 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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