# Loop reloading after change JS with yarn start | Sage 9 **URL:** https://discourse.roots.io/t/loop-reloading-after-change-js-with-yarn-start-sage-9/9349 **Category:** sage **Tags:** sage9 **Created:** 2017-04-10T07:38:15Z **Posts:** 34 ## Post 1 by @MaxSwinkels — 2017-04-10T07:38:15Z When changing a JS file under the watch command it will get stuck in a loop reloading the page unless I stop and restart the server, producing this error in the console: **Console error** ![](https://discourse.roots.io/uploads/default/original/2X/e/e45c9197b332483ce370eeaf446b8fabcdf1da0f.JPG) **My config.json** > ``` > { > "entry": { > "main": [ > "./scripts/main.js", > "./styles/main.scss" > ], > "customizer": [ > "./scripts/customizer.js" > ] > }, > "publicPath": "/arnoud_oostveen/wp-content/themes/arnoud_oostveen", > "devUrl": "http://localhost/arnoud_oostveen/", > "proxyUrl": "http://localhost:3000", > "cacheBusting": "[name]_[hash:8]", > "watch": [ > "{src,templates}/**/*.php" > ], > "browsers": [ > "last 2 versions", > "android 4", > "opera 12" > ] > } > ``` **local environment:** WordPress version: latest/4.7.2 Windows 10 NPM/Node version: 4.0.5/6.9.1 --- ## Post 2 by @Agressiva86 — 2017-04-19T12:29:23Z I have the same problem. Loop reloading browser window is very annoying. Does anyone have a solution for this? In my common.js file there are few features that do not show errors :frowning: --- ## Post 3 by @MaxSwinkels — 2017-04-19T12:57:16Z ive solved this issue by changing the theme name to a different name which is not equal to my website name from: ``` "publicPath": "/arnoud_oostveen/wp-content/themes/arnoud_oostveen", "devUrl": "http://localhost/arnoud_oostveen/", ``` to: ``` "publicPath": "/arnoud_oostveen/wp-content/themes/ao", "devUrl": "http://localhost/arnoud_oostveen", ``` --- ## Post 4 by @ben — 2017-04-19T15:54:45Z Are you sure it was the theme name change? Your first `devUrl` has a trailing `/` at the end. --- ## Post 5 by @JulienMelissas — 2017-04-19T18:35:46Z My issue was actually that I had the wrong `publicPath` set. It seemed to work with and without the trailing slash on the `devUrl`. I’m all good now. :slight_smile: --- ## Post 6 by @foria — 2017-04-20T08:12:03Z I have the same problem. But it starts after I added a component by npm. So I removed it but it’s still looping. Then I check my publicPath and devUrl, trying different solutions but nothing. It’s really annoying. my config.json is: { “entry”: { “main”: [ "./scripts/main.js", "./styles/main.scss" ], “customizer”: [ "./scripts/customizer.js" ] }, “watch”: [ “templates/**/\*.php", "src/**/\*.php” ], “publicPath”: “app/themes/birdlife”, “devUrl”: “[http://birdlife.com](http://birdlife.com)”, “proxyUrl”: “[http://localhost:3000](http://localhost:3000)”, “cacheBusting”: “[name]\_[hash:8]”, “browsers”: [ “last 2 versions”, “android 4”, “opera 12” ] } Thanks --- ## Post 7 by @MaxSwinkels — 2017-04-21T08:02:59Z That could also be possible. I did not pay attention to this :sweat_smile: --- ## Post 8 by @ben — 2017-04-21T14:10:25Z > [@foria](#): > > “publicPath”: “app/themes/birdlife”, How did you end up with this? :slight_smile: See [https://github.com/roots/sage/blob/b11cb99d64987b44e9e90341dfd05a77de6b98cf/resources/assets/config.json#L11](https://github.com/roots/sage/blob/b11cb99d64987b44e9e90341dfd05a77de6b98cf/resources/assets/config.json#L11) Try `/app/` instead of `app/` --- ## Post 9 by @bobz_zg — 2017-04-26T08:26:24Z How does this work on MAMP, what should I set my ‘publicPath’ to? It’s really annoying, can’t get it to work what ever I change it to. ``` { "entry": { "main": [ "./scripts/main.js", "./styles/main.scss" ], "admin": [ "./scripts/admin.js", "./styles/admin.scss" ] }, "watch": [ "{inc,templates}/**/*.php" ], "publicPath": "/wp-content/themes/theme-name", "devUrl": "http://wp.dev/theme-name", "proxyUrl": "http://localhost:3000", "cacheBusting": "[name]_[hash:8]", "browsers": [ "last 3 versions", "android 4", "opera 12", "safari 8" ] } ``` --- ## Post 10 by @bobz_zg — 2017-05-16T06:27:55Z 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. --- ## Post 11 by @bezbeli — 2017-06-12T23:32:25Z do you have your wp in subdirectory? If so, your publicPath should be “/subdirectory/wp-content/themes/theme-name” --- ## Post 12 by @weizung — 2018-02-10T14:30:44Z 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" ] } ``` --- ## Post 13 by @builtbyvern — 2018-07-06T15:46:29Z 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" ] } ``` --- ## Post 14 by @jakub — 2018-07-21T08:53:04Z @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. --- ## Post 15 by @philipp — 2018-07-21T22:36:27Z 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](https://discourse.roots.io/t/webpack-on-multisite-with-subdomains-continues-reloading-for-js-changes/12577/4?u=philipp) But of cause go sure that your config paths are set correctly. --- ## Post 16 by @cordial — 2019-06-13T15:58:16Z 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](http://new.romans)”, “proxyUrl”: “[http://localhost:3000](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. --- ## Post 18 by @jrgd — 2019-07-02T20:16:31Z > [@cordial](#): > > “publicPath”: “/wp-content/themes/newromans”, 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. --- ## Post 19 by @Samuel_Kahara — 2019-07-16T10:30:34Z Hi @builtbyvern i am having the same configuration but my website wont even load. I would really appreciate your assistance. thanks. --- ## Post 20 by @Robin_Mimeault — 2019-10-12T00:43:23Z For those having this issue with website in subdomain using mamp This is THE SOLUTION !!! --- ## Post 21 by @kanapka94 — 2019-10-26T15:55:41Z “ **proxyUrl** ” should has the same subdirectories structure as “devUrl”: `"proxyUrl": "http://localhost:3000/_auto-build-templates/wordpress-automation"` --- ## Post 22 by @vandigroup — 2019-10-26T21:19:51Z 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. --- ## Post 23 by @vandigroup — 2019-10-26T21:55:09Z Just got the screen capture out of my console… ![image](https://discourse.roots.io/uploads/default/original/2X/3/3e8a63b25dd5759dc17d588546336f34e4b753e7.jpeg) --- ## Post 24 by @vandigroup — 2019-10-26T22:11:15Z 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! --- ## Post 25 by @alwaysblank — 2019-10-27T03:41:13Z This screenshot mentions that some modules can’t be hot reloaded. What modules are those? --- ## Post 26 by @vandigroup — 2019-10-27T16:22:45Z 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 --- ## Post 27 by @demyx — 2019-10-28T02:04:10Z 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. --- ## Post 28 by @vandigroup — 2019-10-28T22:09:34Z 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… --- ## Post 29 by @dangelion — 2020-01-15T08:29:34Z 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. --- ## Post 30 by @100wunder — 2020-05-14T22:54:15Z 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. --- ## Post 31 by @Lukasz_Blachowicz — 2020-06-11T11:56:40Z 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' ); ``` --- ## Post 32 by @nalo — 2020-07-02T11:14:37Z 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 --- ## Post 33 by @Linssevlaai — 2020-09-30T16:33:19Z 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. --- ## Post 34 by @Bhanu_Kumar_Singh — 2020-11-30T11:00:25Z This was the case with me. I feel so stupid right now. I spent 3 hours stuck with this thing.