Webstorm React autocompile and live-server not working

So I have this React project I set up using the integrated installer. The page that opens after launching the npm start task promts to edit and save the src/App.js file to see the changes instantly, but it only works one time. If I add another change and save it does not recompile.

I tried using the command prompt as well: I "npm start"-ed the project and edited the files via sublime text which worked flawlessly but I just can't get the webstorm-integration to work. Any ideas? I have already followed along the tutorials I found to set up a Javascript Debug Session in Webstorm but that did not work for me either.

1
12 comments

Please try disabling 'Use "safe write"' in Settings | Appearance & Behavior | System Settings - does it make things any better? WebPack 'hot reload' doesn't correctly support 'safe writes' (when changes are not written directly to original file but to temporary one instead, which is renamed and replaces original file when save operation is completed), and it can break watching. 

4

Thank you very much! :) I already assumend it had something todo with the way Webstorm saves files. JetBrains' Support and Community rulez! <3

0
Avatar
Permanently deleted user

Im having the same issue but inside of a docker container running node. I have the volume shared and when I edit the file with safe writes disabled it still doesnt trigger an update on the  node side. If I edit the file from within the container it updates as expected. 

0

doesn't look like the IDE issue. Please see https://github.com/webpack/webpack-dev-server/issues/143 and linked tickets for some hints

0

This has been an issue for me since I changed computer. Sometimes the hot-reload just stops working, but I was able to fix it with a restart. Since the last update 2018.2.1 I am unable to get hot-reload to work at all.

This is a Webstorm issue, since editing the files in Vim triggers reloads correctly.

I've disabled "safe writes" with no success.

1

WebStorm can't be involved - all it does is saving files. And, if "safe writes" are disabled, it does it just in the same way as other editors

4

You are right Elena, it stopped working in Vim as well. Thanks for the response.

1

Elena Pogorelova I cannot find the "safe writes" setting under Settings | Appearance & Behavior | System Settings

I also tried searching for "safe writes" with the ctrl-shift-a menu and nothing came up

2

@Jpfernan

That option was renamed in recent versions.

Settings/Preferences | Appearance & Behavior | System Settings | Back up files before saving

 

3

I face a problem with React Hot reload, I turned off `Back up files before saving` but still did not reload the page after saving.

 

any suggestions dudes? 

 

0

I was using WSL 2 for windows so.... This was the fix for my issue. Thank you Elena for pointing me in the right direction. 

 

Well, I've just had the same issue. Windows 10 + WSL 2. Here's my question on StackOverflow
https://stackoverflow.com/questions/70536493/hot-reloading-page-in-react-17-0-2-within-a-container-doesnt-work

The thing is... you just have to move your project to \wsl$\Ubuntu-20.04\home<USERNAME>\YOURPROJECT

0

Please sign in to leave a comment.