Error Overlay appears on TS compilation errors when TSC_COMPILE_ON_ERROR=true

[signal-intrusion]

Describe the bug

The error overlay appears when TS compiles with errors when you force compilation on errors TSC_COMPILE_ON_ERROR=true.
The error overlay is also NOT dismissible either with the esc key or by clicking the close button that does not appear as it does for warnings. This is unexpected.

I can confirm that the compilation succeeds, albeit with error messages. I can also confirm that when I manually delete the iframe from the DOM or hide it with CSS that my app works 💯 . The only problem is that the error overlay blocks my page.

Expected behavior: TSC_COMPILE_ON_ERROR=true either disables the error overlay entirely OR it allows the error banner to be dismissed.

Use Case: So let's say I wanted to work fast in a development environment and ignore TS compilation errors, maybe I'm refactoring. I disable TS errors from blocking compilations with TSC_COMPILE_ON_ERROR=true so that I can move quickly. The compiler is outputting files as expected, but the error overlay covers my page. This effectively stops my work as I cannot see the page, even though the assets compiled just fine, and there is no simple way to disable it.

Other reports:

• Adds TSC_COMPILE_ON_ERROR env var... #6931 (comment)
• https://stackoverflow.com/questions/46589819/disable-error-overlay-in-development-mode (in the comments for the accepted "answer")

Did you try recovering your dependencies?

Yes... although this isn't really relevant to this particular issue.

Which terms did you search for in User Guide?

I searched most of these in Stack overflow and the issues here too:

overlay, error overlay, TSC_COMPILE_ON_ERROR, disable error overlay, disable TS errors, disable typescript errors, enable overlay, enable error overlay, hide error overlay, etc.

Environment

Environment Info:

  current version of create-react-app: 4.0.3
  running from /Users/plummer/.npm/_npx/3218/lib/node_modules/create-react-app

  System:
    OS: macOS 11.5.2
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
  Binaries:
    Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm
  Browsers:
    Chrome: 93.0.4577.63
    Edge: Not Found
    Firefox: 78.10.1
    Safari: 14.1.2
  npmPackages:
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    react-scripts: 4.0.3 => 4.0.3
  npmGlobalPackages:
    create-react-app: Not Found

Steps to reproduce

1. create a react app with CRA using TS
2. add TSC_COMPILE_ON_ERROR=true to your .env file or as a CLI arg
3. create some component with a type error
4. see the typechecking error in your console, see that the assets build as expected
5. view the app in the browser and see the error overlay with the typechecking error
6. see the missing "close" "x" button, try to close with the esc key
7. see the typechecking error in the console
8. find the error overlay iframe in the inspector, delete it, see that the app works

Expected behavior

TSC_COMPILE_ON_ERROR=true either:

• disables the error overlay entirely
• it allows the error overlay to appear as a warning and may still be dismissed

Actual behavior

When setting TSC_COMPILE_ON_ERROR=true:

• the error overlay appears, even when the compiler succeeds
• the error overlay is NOT dismissable

Reproducible demo

[signal-intrusion]

@iansu @ianschmitz Has anyone had a chance to look at this issue yet?

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.