# BrowserSync keeps reloading infinitely upon JavaScript changes **URL:** https://discourse.roots.io/t/browsersync-keeps-reloading-infinitely-upon-javascript-changes/14685 **Category:** sage **Tags:** sage9, webpack **Created:** 2019-01-25T18:15:55Z **Posts:** 34 ## Post 1 by @Jan-Klaas — 2019-01-25T18:15:55Z Yarn build works fine, yarn start works fine and reloads properly when changing views (php) or scss. When changing JavaScript BrowserSync keeps reloading infinitely. The console then returns this error before reloading: `The connection to http://localhost:3000/__webpack_hmr was interrupted while the page was loading.` My dev environment: MacOS Mojave, Valet, node 11.2.0, Firefox 64.0.2 I’m using Bootstrap. config.json: ``` { "entry": { "main": [ "./scripts/main.js", "./styles/main.scss" ], "customizer": [ "./scripts/customizer.js" ] }, "publicPath": "/app/themes/myThemeName", "devUrl": "http://example.localhost", "proxyUrl": "http://localhost:3000", "cacheBusting": "[name]_[hash:8]", "watch": [ "app/**/*.php", "config/**/*.php", "resources/views/**/*.php" ] } ``` I’ve tried numerous suggestions from similar posts. > [@Infinite reload on Javascript Changes (Docker environment - boilerplate setup linked)](https://discourse.roots.io/t/infinite-reload-on-javascript-changes-docker-environment-boilerplate-setup-linked/12745/): > > After many times of getting it to work, given the many different errors I’ve gotten (infinite reloading on browser, ignoring scss changes, ignoring javascript changes and both of them at once among them), right now I’m at a loss. It was working fine, when I started editing an already existing scss file. Make my changes, save the file and got linter errors, solve them all, and no change… Strange. Try to change another file… same again. Is this framework so fragile? I mean it’s impossible to work… [https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648/](https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648/) [https://discourse.roots.io/t/browsersync-reloading/10427](https://discourse.roots.io/t/browsersync-reloading/10427) [https://discourse.roots.io/t/browsersync-page-refresh-loop/12687](https://discourse.roots.io/t/browsersync-page-refresh-loop/12687) An overview of the suggested solutions (all of which didn’t work): ``` - run `composer clear-cache` and `composer install` on the theme folder - use `.localhost` or `.test` as TLD - `sudo fkill :3000` then run `yarn start` again - set `devUrl` in config.json and remove trailing slash - change the proxyurl port in config.json - set the correct `publicPath` in config.json to reflect file structure - check if `proxyUrl` is pointing to the right browsersync session - check if `wp_enqueue_script` for `sage/main.js` is not commented out - run `valet unlink` and `valet link siteName` in the www/ directory - increase browsersync delay in webpack.config.watch.js - add `devServer.watchOptions.poll: true` in webpack.config.watch.js - add `plugins.advanced.browserSync.logLeve: true` in webpack.config.watch.js ``` Any other suggestions or solutions would be greatly appreciated. --- ## Post 2 by @knowler — 2019-01-25T19:06:22Z Hm, seems like an issue with the webpack HMR not Browsersync. If no one else, jumps in to help I’ll take a look at this when I get a chance. You should try to get some more debug information. Check here to figure out which options need to be set to do that. > --- ## Post 3 by @Jan-Klaas — 2019-01-28T10:10:15Z I’m shooting in the dark I’m afraid. I added some lines to the webpack config file. Browser console is still displaying the same error (see original post). What might be usefull, it’s the **Webpack/(webpack)-hot-middleware/client.js file** on **line 85** that throws the error. The error is also displayed when viewing the website without browsersync (it continuously keeps throwing the error every few seconds). It’s not there when viewing the website with browsersync / yarn start - nor when it reloads upon changing .scss or .php files (but appears when changing .js files and the endless looping starts). Added these to webpack.config.watch.js: ``` new webpack.LoaderOptionsPlugin({ debug: true }), ``` Added this to the browsersync plugin: ``` advanced: { browserSync: { logLevel: 'debug', }, } ``` And this to module. exports: ``` devServer: { watchOptions: { poll: true, }, }, ``` Output in terminal during load loop: ``` [Browsersync] Browser Connected: Firefox, version: 64.0 [BS] [HTML Injector] Stashing: http://localhost:3000/ ``` Sometimes the second line (stashing:) is not displayed. --- ## Post 4 by @knowler — 2019-01-28T20:09:51Z Sorry I never got to this. What I meant was, for the most verbose debugging info you need to enable debug for each dependency. From what I can tell from the options for each of the dependencies, you should be able to do this to get that: ``` advanced: { browserSync: { logLevel: 'debug', }, webpackDevMiddleware: { logLevel: 'debug', /* or 'trace' */ }, webpackHotMiddleware: { log: true, }, } ``` This should give you a more verbose log of what is happening on the HMR side of things. I might be able to spin up a Sage 9 install to test this, but for now, if you could try this, then share the more verbose log it might be able to point us in a better direction. Question, out of the box does this happen when you make any immediate change the JavaScript? Or does it work for a while and then, all of sudden, stop working? Because if it is the latter, I suspect there could be an error in your code that’s not being reported, and as a consequence, the HMR process breaks down and then Browsersync gets nothing from the proxy. I could be wrong though. --- ## Post 5 by @Jan-Klaas — 2019-01-29T08:45:02Z Thanks. This happens immediately after changing a JavaScript file and using webpack/browersync (`yarn start` command). When running `yarn build` and testing the website at mysite.localhost, all JavaScript is executed properly. I enabled the debug for webpack, this throws following error in the console and prevents browsersync from launching: ``` [BS] [debug] -> Starting Step: Finding an empty port /Users/username/path/www/app/themes/sage/node_modules/browsersync-webpack-plugin/node_modules/webpack-hot-middleware/middleware.js:136 log("webpack built " + (name ? name + " " : "") + ^ TypeError: log is not a function at /Users/username/path/www/app/themes/sage/node_modules/browsersync-webpack-plugin/node_modules/webpack-hot-middleware/middleware.js:136:7 at Array.forEach () at publishStats (/Users/username/path/www/app/themes/sage/node_modules/browsersync-webpack-plugin/node_modules/webpack-hot-middleware/middleware.js:127:11) at Compiler.onDone (//Users/username/path/www/app/themes/sage/node_modules/browsersync-webpack-plugin/node_modules/webpack-hot-middleware/middleware.js:33:5) at Compiler.applyPlugins (/Users/username/path/www/app/themes/sage/node_modules/tapable/lib/Tapable.js:61:14) at Watching._done (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:105:17) at compiler.emitRecords.err (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:79:19) at Compiler.emitRecords (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:371:38) at compiler.emitAssets.err (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:62:20) at applyPluginsAsyncSeries1.err (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:364:12) at next (/Users/username/path/www/app/themes/sage/node_modules/tapable/lib/Tapable.js:218:11) at Compiler.callback (/Users/username/path/www/app/themes/sage/node_modules/stylelint-webpack-plugin/lib/run-compilation.js:57:5) at next (/Users/username/path/www/app/themes/sage/node_modules/tapable/lib/Tapable.js:220:14) at Compiler.compiler.plugin (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4) at next (/Users/username/path/www/app/themes/sage/node_modules/tapable/lib/Tapable.js:220:14) at module.exports.afterEmitHandler (/Users/username/path/www/app/themes/sage/node_modules/copy-globs-webpack-plugin/index.js:130:5) at Compiler.applyPluginsAsyncSeries1 (/Users/username/path/www/app/themes/sage/node_modules/tapable/lib/Tapable.js:222:13) at Compiler.afterEmit (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:361:9) at require.forEach.err (/Users/username/path/www/app/themes/sage/node_modules/webpack/lib/Compiler.js:350:15) at /Users/username/path/www/app/themes/sage/node_modules/async/dist/async.js:473:16 at iteratorCallback (/Users/username/path/www/app/themes/sage/node_modules/async/dist/async.js:1064:13) at /Users/username/path/www/app/themes/sage/node_modules/async/dist/async.js:969:16 at /Users/username/path/www/app/themes/sage/node_modules/graceful-fs/graceful-fs.js:45:10 at FSReqCallback.oncomplete (fs.js:148:20) error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. ``` --- ## Post 6 by @knowler — 2019-01-29T11:58:48Z Sorry, I think the value I gave you for the [`webpack-hot-middleware`](https://github.com/webpack-contrib/webpack-hot-middleware/tree/v2.17.1) options was the wrong one, what’s the output without it: ``` advanced: { browserSync: { logLevel: 'debug', }, webpackDevMiddleware: { logLevel: 'debug', /* or 'trace' */ }, } ``` --- ## Post 7 by @Jan-Klaas — 2019-01-29T12:24:31Z The issue is solved. I don’t know how though. A wrong publicPath in the config.json might have something to do with it. Is it possible it gets cached somewhere? --- ## Post 8 by @knowler — 2019-01-29T12:25:28Z What did you change the `publicPath` from and what did you change it to? --- ## Post 9 by @Jan-Klaas — 2019-01-29T13:00:33Z I’ve changed it back and forth from /app/themes/probam to /app/themes/sage (where probam is the correct name of the theme). --- ## Post 10 by @ben — 2019-01-29T16:26:05Z But `sage` is the correct name of your theme directory? Look at all the paths you’ve shown in this thread `(/Users/username/path/www/app/themes/sage/`) You’d have to rename the sage directory to `probam` if you wanted your `publicPath` to be `/app/themes/probam` --- ## Post 11 by @slam — 2019-02-12T16:02:36Z I don’t know if this is related, but every so often I end up with a similar reload loop. Solution is almost always solved with the Empty Cache and Hard Reload option in Chrome. --- ## Post 12 by @sadikyalcin — 2019-09-17T10:14:05Z Is there no solution to this? Really annoying. Keep having to cancel and running yarn start again. ``` VM407 main.js:2208 Ignored an update to unaccepted module 28 -> 20 -> 19 [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 https://webpack.js.org/concepts/hot-module-replacement/ for more details. [HMR] - ./resources/assets/scripts/routes/home.js [HMR] Reloading page ``` --- ## Post 13 by @slam — 2019-09-21T13:39:21Z Did you try my suggestion? --- ## Post 14 by @simon_sumedia — 2019-10-08T13:00:16Z I had the same problem. I resolved the problem by removing the yarn.lock file, the .cache-loader folder and the node\_modules folder. Then I ran yarn && yarn watch. --- ## Post 15 by @Luis_Wouters — 2019-11-27T13:43:25Z I had the same problem, But the problem wasn’t ocurring only with JS, but mainly with it. For some reason, my publicPath was configured as: “publicPath”: “/wp-content/themes/theme-name” I checked in anouther project that I also use Sage, in which I didn’t have this probblem. And it was configured as: “publicPath”: “/app/themes/theme-name” So, I’ve changed the former to the second pattern, and the problem gone. This is very strange, because the config.json is generated automatically. Both projects were generated in the same machine. Could this be related to an update on Sage? First I tryed deleting yarn.lock file, .cache-loader folder and the node\_modules folder. I had problems running yarn after. I had to restore yarn,lock. --- ## Post 16 by @jokanane — 2020-04-21T19:57:24Z Out of the blue, one of my many Sage installs started to loop with `Ignored an update to unaccepted module` today (same as sadikyalcin’s msg above). The only thing I can really add here is that Safari seems more robust und in fact does not end up in a reload loop. I cannot use Chrome for development for this single WP install / theme right now, not even in incognito mode. I can’t explain the difference in behavior between the browsers. I have cleared the cache, restarted the computer, and tried (nearly) all of the tricks mentioned in this thread. I tried also a few other similar themes, and they don’t loop the same way. After I save a JS file, they do show the same message and reload but they don’t loop. --- ## Post 17 by @jokanane — 2020-04-27T19:58:24Z An update to my previous message: the problem disappeared as suddenly and unexpected as it first appeared. Honestly, I spent hours trying to resolve the issue in the first place - nothing seemed to help. Then I did nothing, just tried a few days later and the problem was gone. --- ## Post 18 by @tomphilpotts — 2020-04-30T01:59:38Z I was having the same issue and had a slash at the end of the devUrl. Once I removed it, problem solved. --- ## Post 19 by @marbaque — 2020-05-07T00:24:55Z Thanks, that worked for me! --- ## Post 20 by @jokanane — 2020-05-28T16:48:16Z This came up in another thread: [Is it possible to "watch" without browsersync?](https://discourse.roots.io/t/is-it-possible-to-watch-without-browsersync/17730) I’m guessing the mod might be useful also in persistent reload loop situations, where nothing else seems to help. I don’t have a failing env at hand right now to try with, but will definitely give it a shot should a need arise. --- ## Post 21 by @djmtype — 2020-07-27T16:33:04Z Out of the blue this happens inconsistently whenever I run `yarn start`. I’ve tried dumping the .cache-loader, node modules and yarn.lock. This is happening on more than one Sage theme BTW. I can’t figure out what went wrong or how to fix it. It happens in Chrome and Firefox. --- ## Post 22 by @strarsis — 2020-07-27T18:04:59Z Isn’t this then a BrowserSync issue and a new issue should be created in BrowserSync GitHub repo? An URL should be normalized (extra slashes removed) or at least those extra slashes ignored and not resulting in completely counterproductive behaviour, like endless refresh loops? --- ## Post 23 by @dangelion — 2021-02-05T09:20:19Z Same problem here now on Sage 9.0.9. Tried and checked all said in this thread. No solution. It’s unusable… anyone could help? --- ## Post 24 by @Bjorn — 2021-02-05T10:02:40Z It also took me a loooong time and I **refused to think my config was wrong** but indeed it was. Even though I used a **docker image** to spin up wordpress and the **relative path** would be sth. like `"/themes/my-theme"` I needed to set the public path like this instead: ``` "publicPath": "/wp-content/themes/my-theme", ``` The rest of the config (for completeness): ``` "devUrl": "http://localhost:84", "proxyUrl": "http://localhost:3000", ``` I thought the path must be correct otherwise it wouldn’t be able to work at all but it really only happened sporadically and changing the path fixed the issue permanently to me. I think this is more or less what already has been said in this thread but **tribble check your publicPath** (especially when using docker)! For new projects I shifted to Valet instead of docker and this works out of the box now :slight_smile: Hope this may help you @dangelion. --- ## Post 25 by @dangelion — 2021-03-11T14:18:49Z Started a new project today and as usual it happens this issue, that makes development a pain in the ass. Like always I checked all and all and all again and again and obviously `publicPath` is one the first thing I checked and it was always correctly set (`"/wp-content/themes/my-theme"`). Finally as always the only thing it seems to solve is what I wrote here: > [@Browsersync page refresh loop](https://discourse.roots.io/t/browsersync-page-refresh-loop/12687/16): > > Solved. It was a strange error during yarn command, related to node-gyp. Solved with this command: that is ``` sudo rm -rf $(xcode-select -print-path) xcode-select --install ``` Very very annoying! Any other idea? --- ## Post 26 by @trainoasis — 2021-04-14T08:17:43Z Same issues on some project sometimes. Works other times, no clue why. Tried the above solutions to no avail. --- ## Post 27 by @Nickb6437 — 2021-05-13T18:56:11Z I have been having the same issue tried everything until today. I setup and ran the project through a virtual host and had no issues at all. You can follow these instructions [https://www.google.com/amp/s/www.cloudways.com/blog/configure-virtual-host-on-windows-10-for-wordpress/amp/](https://www.google.com/amp/s/www.cloudways.com/blog/configure-virtual-host-on-windows-10-for-wordpress/amp/) Don’t forget to update the devurl name in your config.json and .env files to the same as your servername. Hope this helps. --- ## Post 28 by @toddsantoro — 2021-10-11T16:16:59Z 2 years later the loop is killed by clear cache… Thanks!!! --- ## Post 29 by @Tom_Suthee — 2021-11-11T18:02:41Z you just saved my life! --- ## Post 30 by @Matthieu — 2022-01-09T20:51:46Z I had exactly the same problem that I solved changing the pubic path to `/wp-content/themes/my-theme` I’m not really sure why honestly, so if anyone knows, I’d be interested! --- ## Post 31 by @strarsis — 2022-01-09T21:33:22Z Is this Sage 9.x? In this case an update was recently merged that should fix most or all issues, is your theme Sage 9.x based and have you updated your theme? --- ## Post 32 by @Matthieu — 2022-01-10T08:57:48Z Thanks for answering. It’s Sage 9.0.10, I just started a new project. --- ## Post 34 by @amoore — 2022-01-12T23:54:59Z For me, the issue was with a caching plugin (Hummingbird). Use the caching plugin to clear your cache or simply disable it and it should resolve the infinite reloading.