# Sage 9 - Changes in JS and browserSync

**URL:** https://discourse.roots.io/t/sage-9-changes-in-js-and-browsersync/8893
**Category:** sage
**Tags:** sage9, browsersync, webpack
**Created:** 2017-02-22T14:10:45Z
**Posts:** 17

## Post 1 by @agus — 2017-02-22T14:10:45Z

Hello,  
I am currently using Sage 9 beta 2.  
I have some issues when I try to change my JS files.  
When I run `yarn run start`, my js files are compiled and work but when I make a change, the page starts looping and it doesn’t stop. In my console I have the following output :

`[HMR] connected`  
`[HMR] Checking for updates on the server... `  
`[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."`  
`[HMR] - ./assets/scripts/routes/common.js`  
`[HMR] Reloading page`  
`La connexion avec http://localhost:3000/__webpack_hmr a été interrompue pendant le chargement de la page.`

I’ve made some research and tried adding  
`if (module.hot) { module.hot.accept(); }`  
at the end of my main.js file.  
Now it does not loop anymore, but the modifications don’t update correctly. For example, if I have this in my common.js :  
` $('body').on('click', () => { console.log("Click 1"); });`

I see in my console “Click 1”. If then I change “Click 1” by “Click 2”, I have in my console both outputs; the first one from “main.js”, the second one from " 0.85fb8cf8b4cf5a3f7d82.hot-update.js". If I change the `console.log()` again, I have then three outputs (the third one from “0.4a0ae2a99735ac0fb0cd.hot-update.js”).

Even if I reload manually the page I keep getting all the outputs.

I don’t know how to fix it. Some ideas ?

Thank you a lot.

Agustina. :four_leaf_clover:

---

## Post 2 by @Twansparant — 2017-02-22T18:44:08Z

I’m having the same issue! In Safari it does seem to work correctly

---

## Post 3 by @agus — 2017-03-04T21:15:04Z

Hello.  
I don’t know if you have solved your problem.

I’ve created a virtual host instead of using my localhost path (and changed the “devUrl” in config.json) and now it works well.  
Hope it helps you.

Agustina

---

## Post 4 by @Twansparant — 2017-03-06T19:49:23Z

Hi,

don’t you use Trellis for your local environment then? Because Vagrant will handle this for you with a VM box. My **devUrl** therefore already reflects my local development url and works fine without **BrowserSync**?

As soon as I start BrowserSync with `yarn run start` without any errors, it keeps reloading in Chrome:

```
yarn run v0.21.3
$ webpack --hide-modules --watch --config assets/build/webpack.config.js 
Webpack is watching the files…

[BS] [HTML Injector] Running...
[BS] Proxying: http://example.dev
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.1.26:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.1.26:3001
 ----------------------------------
[BS] Watching files...
```

Read several topics regarding this issue, but most of them are related to Gulp configuration files, not with Webpack.

Even tried a fresh **Sage beta 2** clone, and even then the problem is there!  
No one else is having this problem?

Cheers

---

## Post 6 by @aaroneight — 2017-03-06T20:01:17Z

I had this issue but was just able to resolve it. What URL are you setting your devUrl to currently?

---

## Post 7 by @Twansparant — 2017-03-06T20:07:36Z

like this:

```
"publicPath": "/app/themes/example",
  "devUrl": "http://example.dev",
  "proxyUrl": "http://localhost:3000",
```

---

## Post 8 by @Twansparant — 2017-03-08T08:38:27Z

Okay super hard to find, but apparently the BrowserSync loop on localhost:3000 was caused by the **WPML** plugin’s option: **Browser language redirect** which was set to:

_Redirect visitors based on browser language only if translations exist_

I disabled it and now BrowserSync works as expected!

---

## Post 9 by @rico — 2017-06-01T13:18:46Z

I have the same problem - with Chrome and Safari. BrowserSync loops on any change made to a JS file. The `devUrl` ist set to my virtual host.

I have no plugins installed and use Sage 9 Beta 3.

Any alternative ideas to solve the problem?

---

## Post 10 by @allurewebsolutions — 2017-06-16T19:55:20Z

I’m having the same issue as well

---

## Post 11 by @joakimstrandell — 2017-08-07T10:17:39Z

We have the same issue as @rico. Saving a JS file forces a never ending page reload loop. Running Sage 9 beta 3 release.

```
main.js:2120 [HMR] Checking for updates on the server...
main.js:2174 [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.
main.js:2182 [HMR] - ./resources/assets/scripts/routes/common.js
main.js:2221 [HMR] Reloading page
```

But the page just keeps reloading without loading the updated JS file. We have to stop the `yarn start` process, clear browser cache and then start the process again. And this we have to do every time we make a change to a JS file.

* * *

Our solution:

We were able to solve this issue as it seemed to be a misconfiguration on our side. We hade the publicPath pointing to the wrong folder in our `config.json`. After changing to the correct folder the never ending page reload stopped, and that was the big issue here.

So make sure to have all the properties in your config.json set correctly.

---

## Post 13 by @rico — 2017-08-14T10:21:30Z

@joakimstrandell thanks for posting the solution. However, imho `publicPath` is not the right key when it should point to the `dist` folder.

---

## Post 14 by @Paolo_Cargnin — 2018-01-31T11:33:39Z

I was able to solve it thanks to @joakimstrandell , in my config file the “themes” folder was naming with “theme”. I can’t tell if is a my error on the startup phase or in the sage startup script

---

## Post 15 by @Pratirup — 2018-08-06T13:07:58Z

yup that was the issue thanks @joakimstrandell

---

## Post 16 by @tayler_ramsay — 2018-09-06T16:33:15Z

I’m Having this same issue. Im pretty sure my config is setup correctly but still no luck. Soon as I touch the JS file I get the refresh loop.  
Any help would be great.

```
{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/PHRA-2018",
  "devUrl": "https://localhost:32850",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
```

---

## Post 17 by @anoopd — 2019-09-06T04:38:49Z

I am using a local development setup , serving from localhost and accessing it from there only . Installed the stable version and it is working flawlessly , and then tried the latest development version . When i tried _yarn start_ the site kept on reloading . I tried almost everything here but the only thing that worked is to have a virtual host as you insisted . Thank you so much .