Browsersync not syncing

sage
1

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.

2

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

3

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”,
“proxyUrl”: “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,
},
},
}),
],
};

4

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?

5

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

6

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

7

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:

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.

1 Like
8

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

9

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

10

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:

11

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

1 Like
12

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.