Loop reloading after change JS with yarn start | Sage 9

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.

Just got the screen capture out of my console…

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!

This screenshot mentions that some modules can’t be hot reloaded. What modules are those?

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:

  • Current Bedrock, Sage, Bootstrap
  • PHP v7.1.30
  • Node v8.16.1
  • Yarn v1.17.3
  • Nginx v1.15.8
  • Maria DB v10.3.12
  • Mac Catalina v10.15
  • Atom & iTerm 2

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…

Here same problem, website auto refresh in loop. My config.json

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/project-name",
  "devUrl": "http://project-name.test:9999",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

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.

Solution in my case: HMR messed up with a service worker (from “Super PWA” Plugin) that was permanently registered on localhost:3000.

So check chrome dev tools -> Application -> Service Workers and unregister if there sits one on localhost.

Another solution - as usual its a path issue, while using custom content path.

define('WP_SITEURL', 'http://local.domain.com/' );
define('WP_CONTENT_FOLDERNAME', '/assets');
define('WP_CONTENT_DIR', ABSPATH . WP_CONTENT_FOLDERNAME);
define('WP_CONTENT_URL', WP_SITEURL . WP_CONTENT_FOLDERNAME);

Just removed the slash in the first line. Stupid mistake.

define('WP_SITEURL', 'http://local.domain.com' );

Hey!

I’ve finally found a solution.
I use sage9 and bedrock on flywheel local.

The problem was the publicPath in config.json, my theme is in web/wp/wp-content/themes so I had to add ‘wp’ at the beginning of the publiPath.

=> “/wp/wp-content/themes/my-theme”

It works like a charm

Hope this can help someone

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:

Async JavaScript
Auto-hyperlink URLs
Autoptimize
Smush
WP Fastest Cache
WP Performance Score Booster

After I deactivated these and started a new ‘npm run start’ everything worked as it should! I can now edit JS and SCSS again without infinite loop.

1 Like

This was the case with me. I feel so stupid right now. I spent 3 hours stuck with this thing.