Ugh…Roots/Sage user for 5-6 years now for ALL builds and finally feel like I’ve hit a wall. I have been dealing with page refreshing loop for a week now trying EVERYTHING I can find on here, Google, SO, etc. but nothing stops it. Nothing else on the ports, changed config.json every possible way, etc. So frustrated at this point I’m ready to give it up so I can get back to a functional dev environment. So badly want to solve this…
Problem comes when I save any js files (main, common, etc.), it starts looping. Only thing I can do is stop yarn watch, change the proxyUrl port number (ie. 3000 -> 3001) that yarn start again and try to avoid making js changes except in batches.
So, think I have tracked it down to a script I was importing into common.js. I have tried several typewriter scripts installed via yarn but the only way I get them working is to import them at the top of the common.js file as in main.js was giving me eslint errors. Running yarn build and then yarn start and everything is good until I save any js changes, then it breaks. Not sure why changing the port was helping. Not sure about anything at this point other than sitting down this weekend and figuring out how to get back to a functional dev environment. Love the speed of Webpack but NEVER had these issue using Gulp… Sorry if I’m ranting but pretty much feeling I’ve gone down a whole and can’t find my way out!
UPDATE: I have now switched back to stock package.json, main, common, etc. js files. Basically, running as fresh install regarding js. The page refresh loop is still happening if I make ANY change to ANY js file and save, including adding a character in a comment. The issue does NOT happen saving stylesheets or any other files…only JS. I am starting to feel like maybe my node version or other parts of my environment are causing this issue (which I have dealt with in the past). Here is my current setup in case someone might see a possible issue:
Try adding module.hot.accept(); to your main.js. My setup is very different, my dev environment is always remote and in Docker so your mileage may vary. I would also clear browser cache.
Thanks for the reply. I tried adding that to the main.js as well as clearing the browser cache but still no help. I am now getting the refresh loop randomly when saving CSS now with the same exact error and as a result, So frustrated right now that I can’t get any work done…
This always worked on many previous projects, just on this one I have this problem and I done the same.
Obviously http://project-name.test:9999 works as expected.
First time I installed the project in a wrong directory, then I moved to the correct directory (MAMP workspace). But I just tried to delete and reinstall the whole project in the correct directory but it’s the same.
I tried all the aforementioned solutions by changing the config.json file, removing cache folders, removing node_modules and package-lock.json but they didn’t help.
What did the trick for me was to deactivate certain plugins within my local Wordpress (which is running on MAMP). I think one of these was the problem: