Loop reloading after change JS with yarn start | Sage 9

Mhm, I just can’t get this thing to work properly:

[HMR] The following modules couldn't be hot updated: (Full reload needed)
This is usually because the modules which have changed (and their parents) do not know how to hot reload themselves. See http://webpack.github.io/docs/hot-module-replacement-with-webpack.html for more details. @ process-update.js:81
[HMR]  - ./assets/scripts/main.js  @ process-update.js:89
[HMR] Reloading page process-update.js:128

I’m using this with MAMP and WP Multisite.
Working anything with JS is unusable, JS doesn’t build and page is infinitely reloading.

None of the tweaks mentioned in couple of threads on this forum don’t fix the issue.

do you have your wp in subdirectory? If so, your publicPath should be “/subdirectory/wp-content/themes/theme-name”

5 Likes

I have same issue, is my setting right?

Also what type of local development tool do you guys use for devepling the Sage 9, and you don’t see this issue? I think it became a common issue now with MAMP~~

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/sage-9.0-theme",
  "devUrl": "http://localhost:8888/_auto-build-templates/wordpress-automation",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

Has anyone seen any way to resolve this? I used Sage 8 for everything but Sage 9, months after release, still gives me fits with stuff like this. I have to hack my way around to get this to not go into an autoreload loop and it’s to the point that I can’t even continue working on the site.

My config file (and yes, the settings are correct… this works 90% of the time):

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

@builtbyvern I just had the same problem and I seems like I solved it by changing publicPath from /myMultisite/wp-content/themes/sage to /myMultisite/mySite/wp-content/themes/sage

In other words, the path is includes my subsite, not the parent site.

If you’re using Multisite and the reloading happens on a subsite, you can try what I described in another post and what solved it for me: Webpack on Multisite with subdomains continues reloading for JS changes

But of cause go sure that your config paths are set correctly.

hey,

I am also having this issue with Sage 9, after adding hamburger.js, while using MAMP and virtual hosts. I have the following config.json -

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

My public path was original the full path from my mac hard drive, so /Users/me/projName/wp-content/…

Any ideas? It’s making my mac fan go bananas and constantly reloading.

If you are using Bedrock with Sage it should be like “/app/themes/newromans”; I had similar constant reload issue whenever i updated a file and it all came down to a typo in my path.

1 Like

Hi @builtbyvern i am having the same configuration but my website wont even load. I would really appreciate your assistance. thanks.

For those having this issue with website in subdomain using mamp This is THE SOLUTION !!!

proxyUrl” should has the same subdirectories structure as “devUrl”:

"proxyUrl": "http://localhost:3000/_auto-build-templates/wordpress-automation"

1 Like

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.