# Browsersync not syncing

**URL:** https://discourse.roots.io/t/browsersync-not-syncing/15031
**Category:** sage
**Tags:** webpack
**Created:** 2019-03-08T23:56:37Z
**Posts:** 12

## Post 1 by @jarimbi — 2019-03-08T23:56:37Z

New install of Sage 9. OS Mac Mojave.  
Installation went fine. When I make any changes to either a \_sccs file or a blade template the changes are not reflected in the browser.

There are no errors displayed, also not in Developer’s Console.  
The message “Browsersync Connected” does appear, but I never see any of the changes in the localhost:3000

Tried all the solutions that I could find. Did a fresh theme installation but nothing solved any of this.

I have no clue what to do next.

---

## Post 2 by @strarsis — 2019-03-09T00:13:20Z

I had similar symptoms, in that case it was CORS, maybe this discussion is useful:

> [@Sage 9 + BrowserSync not loading any CSS at all on 'yarn run start'](https://discourse.roots.io/t/sage-9-browsersync-not-loading-any-css-at-all-on-yarn-run-start/11332/26):
>
> @Simeon: Edit: According to author BrowserSync has to be configured with advanced key: new BrowserSyncPlugin({ target, open: config.open, proxyUrl: config.proxyUrl, watch: config.watch, delay: 500, advanced: { browserSync: { cors: true, }, }, }), Related issues:

---

## Post 3 by @jarimbi — 2019-03-09T00:21:05Z

I tried that too. Did not help.

Config.json:  
{  
“entry”: {  
“main”: [  
“./scripts/main.js”,  
“./styles/main.scss”  
],  
“customizer”: [  
“./scripts/customizer.js”  
]  
},  
“headers”: { “Access-Control-Allow-Origin”: “_" },  
“publicPath”: “/wp-content/themes/tech2protect”,  
“devUrl”: “[http://www.mydomainname.com/cms](http://www.mydomainname.com/cms)”,  
“proxyUrl”: “[http://localhost:3000](http://localhost:3000)”,  
“cacheBusting”: “[name]\_[hash:8]”,  
“watch”: [  
"app/\*\*/_.php”,  
“config/**/\*.php",  
"resources/views/**/\*.php”  
]  
}

```
const url = require('url');
```

const webpack = require(‘webpack’);  
const BrowserSyncPlugin = require(‘browsersync-webpack-plugin’);

const config = require(’./config’);

const target = process.env.DEVURL || config.devUrl;

/\*\*

- We do this to enable injection over SSL.  
\*/  
if (url.parse(target).protocol === ‘https:’) {  
process.env.NODE\_TLS\_REJECT\_UNAUTHORIZED = 0;

config.proxyUrl = config.proxyUrl.replace(‘http:’, ‘https:’);  
}

webpack.config.watch.js:

module.exports = {  
devServer: {  
watchOptions: {  
poll: true,  
},  
},  
output: {  
pathinfo: true,  
publicPath: config.proxyUrl + config.publicPath,  
},  
devtool: ‘#cheap-module-source-map’,  
stats: false,  
plugins: [  
new webpack.optimize.OccurrenceOrderPlugin(),  
new webpack.HotModuleReplacementPlugin(),  
new webpack.NoEmitOnErrorsPlugin(),  
new BrowserSyncPlugin({  
target,  
open: config.open,  
proxyUrl: config.proxyUrl,  
watch: config.watch,  
delay: 500,  
advanced: {  
browserSync: {  
cors: true,  
},  
},  
}),  
],  
};

---

## Post 4 by @strarsis — 2019-03-09T02:19:54Z

So there are no notices, warnings or errors in Developer Console when the page loads or BrowserSync loads styles? But when you save a SCSS asset file, BrowserSync shows a reloading mesage on the page?  
Have you tried ‘obvious’ styles like `* {display: none; }` in `main.scss`?

---

## Post 5 by @jarimbi — 2019-03-09T05:16:05Z

There are no warnings or errors at all.  
The \_sccs files do get compiled, because if I make an error in them I see the error in the console during compile.  
The updates just don’t seem to arrive at the browser. Tried different browsers as well.

“Browsersync: connected” message is appearing all the time

---

## Post 6 by @jarimbi — 2019-03-09T13:37:53Z

And it is both css and blade-templates that are not syncing.

---

## Post 7 by @jarimbi — 2019-03-13T00:50:45Z

Never got it to work, but was able to at least get my files compiled and save to disk so I can work thanks to:

> <https://github.com/roots/sage/issues/1826>

Though with some modifications.

New assets/build/webpack.config.watch.js:

const url = require(‘url’);  
const webpack = require(‘webpack’);  
const BrowserSyncPlugin = require(‘browsersync-webpack-plugin’);  
const WriteFilePlugin = require(‘write-file-webpack-plugin’);

const config = require(’./config’);

const target = process.env.DEVURL || config.devUrl;

module.exports = {  
devServer: {  
watchOptions: {  
poll: true,  
},  
},  
output: {  
pathinfo: true,  
publicPath: config.proxyUrl + config.publicPath,  
},  
devtool: ‘#cheap-module-source-map’,  
stats: false,  
plugins: [  
new webpack.optimize.OccurrenceOrderPlugin(),  
new webpack.HotModuleReplacementPlugin(),  
new webpack.NoEmitOnErrorsPlugin(),  
new WriteFilePlugin(),  
],  
};

Note that I had to remove the whole BrowserSync part. With that still in it nothing would write.

---

## Post 8 by @ben — 2019-03-13T02:13:35Z

You have a configuration issue with your `devUrl` and/or `proxyUrl` - should be able to get that sorted so you can use the build process as intended

---

## Post 9 by @jarimbi — 2019-03-13T02:55:05Z

What problem do I have with devURL and proxyurl?  
Site opened fine on localhost:3000. Just never updated.

---

## Post 10 by @mcloone — 2019-03-13T13:58:34Z

Looks like your devURL is pointing to a live production website and not your local environment maybe?  
If not, it could be the config URLs. I just had a problem with the config.json URLs and had to include the subfolder of the devURL to the proxyURL. Check this post for fixes:

> [@Sage 9 - js on save doesn't update](https://discourse.roots.io/t/sage-9-js-on-save-doesnt-update/14490/4):
>
> I think it’s something to do with the urls used in the config.json. I managed to fix this issue by changing my URLS to below however now whenever I make a change to a JS file browsersync constantly refreshes. And I get this error - Seems to happen only on dev URLs with a subfolder (i.e. multisite sub-sites). I’ve tried playing the forward slashes on the publich path and the dev URL but no luck. { "entry": { "main": ["./scripts/main.js", "./styles/main.scss"], "customizer": [".…

---

## Post 11 by @jarimbi — 2019-03-13T14:30:48Z

I do not have a local environment. I develop straight on the server.  
So the solution I have right now is working.

---

## Post 12 by @slam — 2019-03-14T16:48:31Z

90% of my “browsersync not syncing” errors are solved by the following:

1. Kill `yarn` with a control-c (unless there’s a better way to exit?)
2. Run `yarn` (no arguments) to install/update dependencies from the yarn.lock.
3. Re-run `yarn start`

My issues are often caused by a collaborator installing a new dependency or updating an old one. I’m half considering prepending `yarn` before the `yarn start` commands so it always installs.