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

[leemun1]

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

[frbaroni]

Hello,

I have the same issue, but seems that this comment resolves it:
https://github.com/webpack-contrib/webpack-hot-middleware/issues/129#issuecomment-302310001

[kristojorg]

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

[Vindexus]

I'm having this issue as well. Linked comment above did not work on Windows.

[vldmrkl]

Can't reproduce it on macOS 10.15

[ivannovazzi]

Same problem in macOS 10.15

[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.

[frankleng]

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.

[Lisenish]

Similar to me.
If there is some errors with tags in tsx, but hot reload doesn't hang - it crashes and I have to restart it. Pretty annoying, it kills the purpose of hot reload.

Should I post to the TS repo?

Crash Error:
./src/App.tsx Line 25:4: Parsing error: '>' expected node(93250,0x10e074dc0) malloc: *** error for object 0x7c7c7c7c7c7c7c7c: pointer being freed was not allocated node(93250,0x10e074dc0) malloc: *** set a breakpoint in malloc_error_break to debug error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[koiralakiran1]

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

[louisgjohnson]

Having the same issue.

  System:
    OS: macOS 10.15.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 10.19.0 - /usr/local/bin/node
    Yarn: 1.22.0 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 83.0.4103.116
    Firefox: 75.0
    Safari: 13.1.1
  npmPackages:
    react: ^16.13.0 => 16.13.1 
    react-dom: ^16.13.0 => 16.13.1 
    react-scripts: 3.4.1 => 3.4.1 

[sanojck]

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 :)

[asimkt]

Having the same issue with .ts file.

[caseybaggz]

Same with both .ts or .tsx files.

[vctqs1]

Having the same issue with .tsx file.

[iyunusov]

Will that be fixed until next year at least?

[benyou1969]

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

[phuong]

So, is there any way for temporary fixing this issue?

[gastonmorixe]

Same

[joshtldr]

Works for me in macOS 10.15 when using sudo npm start instead of npm start.

[yyaremenko]

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

yarn start --reset-cache

[akhilmhdh]

Hey, any solution to windows. I added reset-cache and still not working. Its really hectic to restart on each error. 😢Is there any workaround, would be really helpfull

[antoniogamiz]

The same problem still happening...

[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

[andrestone]

Still happening.

[ymoon715]

same

[tombohub]

same here this worked for me: https://github.com/facebook/create-react-app/issues/8667#issuecomment-692652401

[truthseekers]

Can someone at least acknowledge the people here? I too am having this problem.

[mankutila]

Same issue