create-react-app: Hot reloading breaks when encountering Typescript error

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

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.

still happening

Having this same issue and the above commend unfortunately didn’t fix it

I have created a repo that is a fresh CRA install (4.0.3), that demos the bug: https://github.com/k-funk/cra-issue-8667

https://user-images.githubusercontent.com/1933021/124847551-57516400-df58-11eb-8335-4952ce3d0c2e.mp4

still happening

Solution posted by @sanojck works for me a lot of the time, but not always. It would be really nice if this issue was fixed entirely.

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

Same problem in macOS 10.15

Hi all, found a quick and effective fix that will hopefully work for all of you. Like others, I had found that re-saving the index.tsx would trigger the reload. I revisited the tsconfig.json and changed the ‘include’ parameter from:

"include": [
    "src/**/*"
]

to:

"include":[
    "src/**/*","src"
]

This ensured that the index file was being tracked as the root and then triggered the reload. Strange that this is necessary but it worked!

I am having the same issue as others, I tried all “solutions” and none of them work. If I make one small TS mistake, I have to restart npm just to see any new changes I make, every single time.

React: 17.0.1 and 17.0.2 TypeScript: 4.1.2 and 4.2.4

Update, I did further testing and discovered this which “fixed” it for me:

If I import a file but don’t actually implement it in my component, TS will report errors as usual if there are any, but any changes I make — whether or not I fix the error — will not hot reload.

However, when I do implement the imported file, such as putting it in my component as a var in a console.log, it will hot reload just fine.

This was confusing because I had imported a file that already had an error in it, but I never actually implemented it in my component because of the error, and at this point, hot reloading wouldn’t work.

It’s driving me crazy, at 04:44AM

Same with both .ts or .tsx files.

Me too having almost the same issue. In my case, changes saved on “normal” .tsx files, which would fix previous typescript errors, would fire HotReload; but the same scenario is not working in the case of *.stories.tsx files.

Hope the team fix these issues soon. Thanks 😃

Facing this same issue:

$> create-react-app --info

Environment Info:

  current version of create-react-app: 3.4.1
  running from ~/.nvm/versions/node/v10.13.0/lib/node_modules/create-react-app

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (4) x64 Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz
  Binaries:
    Node: 10.13.0 - ~/.nvm/versions/node/v10.13.0/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v10.13.0/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v10.13.0/bin/npm
  Browsers:
    Chrome: 83.0.4103.97
    Firefox: 68.9.0esr
  npmPackages:
    react: ^16.13.1 => 16.13.1 
    react-dom: ^16.13.1 => 16.13.1 
    react-scripts: 3.4.1 => 3.4.1 
  npmGlobalPackages:
    create-react-app: 3.4.1

I think the problem is that the TS loader did not generate a new .js file in this case due to syntax error, etc. therefore the webpack devserver did not pick up any file changes.

not sure what the best approach is to solving this. and possibly barking at the wrong tree here since it’s more of a TS and webpack issue.

Same issue, nothing worked for me except re-starting the development server.

Encountering the same error on .ts files, Hot reloading seems to work on .tsx however

linux mint, adding --reset-cache worked for me:

yarn start --reset-cache