Hot reloading breaks when encountering Typescript error

[mikemklee]

Describe the bug

I am having exactly same issue as metioned in #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:
webpack-contrib/webpack-hot-middleware#129 (comment)

[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

[louiidev]

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: #8667 (comment)

[truthseekers]

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

[mankutila]

Same issue

[DarthMikeSundays]

I have the same issue aswell. But the solution from @sanojck seems to work:

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

Although i would love if the create react app fixed this as fast as possible

[nleco]

sanockj's solution worked. Then I realized that it was not auto-loading when the edited files were the 'index' files, such as ../../MyComponent/index.ts.

Edit: this was not true. It was happening on other files. I could be wrong, but it mainly happened on newer files. Or also on files not being used elsewhere in the project?

[JamesScript]

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

[hatched-danny]

+1

[danielo515]

I

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

While I appreciate the effort from everybody to provide workarounds, at that point it will probably take me less time to hit control+c up arrow and then enter than start playing with file modifications

[JustinHorn]

still happening

[NINNiT]

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

[shamseerahammedm]

still happening

[danjguzman]

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.

[Gonusi]

@danjguzman Thanks for the follow up. I my case, the issue occurred while I was working on a file I didn't even import anywhere at all.

Typescript was finding issues on save, making me forget the module is still not imported anywhere.
Hot reloading was then (naturally) not working.

After importing the module causing the issues, hot reloading, as expected, works again.

[k-funk]

Looks like this issue was started during react-scripts 3.x, and all of the comments above that mention a version mention 3.x. However, this is happening for me on 4.0.3. Can anyone else confirm if they are having this issue in 4.x?

npx: installed 67 in 5.032s

Environment Info:

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

  System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.12.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Edge: Not Found
    Firefox: 85.0
    Safari: 14.1.1
  npmPackages:
    react: ^16.13.1 => 16.14.0 (17.0.1)
    react-dom: ^16.13.1 => 16.14.0
    react-scripts: 4.0.3 => 4.0.3
  npmGlobalPackages:
    create-react-app: Not Found

[chrisvoo]

I've tested it again with the latest scripts, using the default files generated by create-react-app (used through npx), trying different things:

• syntax errors
• importing an empty CSS
• returning void for the App component
  The above items didn't affect the hot reloading, however I've found an issue that doesn't reload the app:

// file index.tsx
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

If you add and remove a non-existent prop to App, the app doesn't get reloaded in the browser, despite the terminal gets updated with Compiled successfully!.

Environment Info:

  current version of create-react-app: 4.0.3
  running from /home/christian/.npm/_npx/388464/lib/node_modules/create-react-app

  System:
    OS: Linux 5.11 Ubuntu 21.04 (Hirsute Hippo)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11700 @ 2.50GHz
  Binaries:
    Node: 14.17.2 - ~/.nvm/versions/node/v14.17.2/bin/node
    Yarn: Not Found
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.2/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: Not Found
  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

[k-funk]

The above items didn't affect the hot reloading, however I've found an issue that doesn't reload the app:

By "didn't affect" do you mean that your 4.x usage didn't change what is for you, currently broken behavior (it's "still" not working)? Or that those 3 things were working for you, and they still are working?

// file index.tsx
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

If you add and remove a non-existent prop to App, the app doesn't get reloaded in the browser, despite the terminal gets updated with Compiled successfully!.

If your changes are in an index.{js,tsx,etc}, you may be experiencing this very specific issue.

[chrisvoo]

By "didn't affect" do you mean that your 4.x usage didn't change what is for you, currently broken behavior (it's "still" not working)? Or that those 3 things were working for you, and they still are working?

They were working, that is once the error was fixed, the CSS filled again and App returning a real component, the changes were reflected in the browser. However, it was just a quick trying, I have the feeling you're right, maybe there's something that stops to make it work.

If your changes are in an index.{js,tsx,etc}, you may be experiencing this very specific issue.

Thanks, I'll investigate a bit further.

[k-funk]

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

cra-bug.mp4

[judygab]

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

[ulises-castro]

Well guys I wrote a simple script applying the @sanojck 's solution.

So it is working in my projects almost all time, So I do not have to pressing Ctrl + c and run the project again every time the app frozen...

The script:
https://gist.github.com/ulises-castro/a86cd67fcbab0220db9660a2f8516c02

[D-Nugent]

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!

[k-funk]

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!

For those encountering index.* not reloading, that is a separate issue: #9984

[D-Nugent]

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!

For those encountering index.* not reloading, that is a separate issue: #9984

To be clear - I was experiencing the issue with none of of my components/pages hot reloading. Could be I misunderstood my issue versus others however - thanks for highlighting.

[mc-alt]

I am encountering what appears to be the same issue. I am using WIndows

Environment Info:

  current version of create-react-app: 4.0.3

  System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz
  Binaries:
    Node: 16.13.0 - C:\Program Files\Node.js\node.EXE
    Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.0 - C:\Program Files\Node.js\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (98.0.1108.43)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    react:  17.0.2
    react-dom:  17.0.2
    react-scripts: 4.0.3 => 4.0.3
  npmGlobalPackages:
    create-react-app: Not Found

[gmoniava]

Same issue (4.03). Ubuntu.
Solution in the first comment didn't help.
No fix?