Hot reloading breaks when encountering Typescript error

Describe the bug

I am having exactly same issue as metioned in https://github.com/facebook/create-react-app/issues/8055

Since that issue is now closed, I will just re-describe the issue again here.

Hot reloading seems to stop working when a Typescript compilation error is encountered. Any subsequent code changes would not trigger hot reloading after that, even if I fix the lines that would cause compile errror.

I need to actually close and restart the dev server in order to see my changes reflected.

Which terms did you search for in User Guide?

Typescript, Hot reloading

Environment

  System:
    OS: Linux 4.19 Ubuntu 18.04.2 LTS (Bionic Beaver)
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
  Binaries:
    Node: 13.7.0 - /usr/bin/node
    Yarn: 1.21.1 - /mnt/c/Program Files (x86)/Yarn/bin/yarn
    npm: 6.14.2 - /usr/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    react: ^16.13.0 => 16.13.0 
    react-dom: ^16.13.0 => 16.13.0 
    react-scripts: 3.4.0 => 3.4.0 
  npmGlobalPackages:
    create-react-app: 3.4.0

Steps to reproduce

1. create-react-app react-app --template typescript
2. cd react-app
3. yarn start
4. Write invalid typescript code in src/App.tsx and save it to trigger compilation error
5. See TS compiler error message in terminal
6. Fix the code in src/App.tsx and save it
7. Note that hot reloading is now NOT triggered
8. Killing dev server and running yarn start again to see changes get reflected

Expected behavior

Re-compile and hot reload on every save, just like when using create-react-app without the --template typescript flag

[sanojck]

Guys, there seems to be a silly (but ugly) workaround. Anyway better than restarting the dev server I think. Please try the following:

1. Typescript compilation error on FileA.tsx
2. Fix the error on FileA.tsx and Save the file. If the error is still displayed continue to 3)
3. Pick some other tsx file, eg FileB.tsx (any file dependent on FileA.tsx but does NOT have any error in it, would be a good choice). Make a random change in that file, maybe add a space somewhere, which you can revert later.
4. Save FileB.tsx and wait for couple of seconds to check whether the error is gone. If the error is still displayed continue to 5)
5. Make a similar random change on our actual culprit (FileA.tsx) and Save.
6. If the error is still displayed, come back here, scold me, and add one more comment in this thread so that the CRA team takes takes due notice

[synchronos-t]

I have a similar problem, maybe not be the exact same problem, but I wonder if it’s related. My problem is that if I have a TypeScript error in a file which isn’t actually imported (yet or any more) by any other module descending from the entry point, saving it doesn’t trigger recompiling. For the recompiling to start, I have to go to a file that is actually imported somewhere in the import tree starting from index.tsx and just save it (without changes). A bit annoying, while not the biggest of problems.