Sage 9 browsersync not updating right

[knowler]

@pskigen

As a side note, I am using Laravel’s Valet for my local development environment, but that has been consistent since working on my first Sage 9 theme.

That’s really weird. Usually this issue is non-existent for me in Valet environments — in fact, I’ll use Valet to avoid it.

The difficulty with this issue, is that it isn’t just one issue, but the similar output leads people to think it is. This makes troubleshooting on the forum troublesome as I can see people in this thread describe symptoms of a few different issues.

I don’t know if it will help you, but here are my debugging steps for issues for this sort:

Make sure your development URL is identical to your WP canonical URL

The devUrl value is set in resources/assets/config.json. If you used the Sage installer it would have prompted you to set it.

Make sure the publicPath reflects your file structure

Again, in resources/assets/config.json, make sure publicPath is set correctly. If you are using Bedrock it should be something like: /app/themes/my-theme-name. If you are using a normal WP structure it should be something like: /wp-content/themes/my-theme-name.

Make sure proxyUrl is pointing to the correct Browsersync session

XMLHttpRequest cannot load hot-update.json due to access control checks

Browsersync is running on port 3002 for you because something is already running on 3000 The proxyUrl isn’t currently able to detect when BS changes its port Can you kill whatever is running on port 3000 and try again? fkill is good for this: yarn global add fkill-cli fkill :3000 Then try running yarn start again and seeing if it loads your BS session at http://localhost:3000 instead of http://localhost:3002

When running yarn start use the proxy URL

If you are running the watch script (yarn start) then you should not be using your development URL (example.test) to view changes. Webpack HMR — which rebuilds the CSS and JS assets — only runs on the proxied URL (localhost:3000). HMR rebuilds the assets and injects them without reloading the browser. You will notice that when it is running, there will be no compiled stylesheet in your dist folder. This is to be expected since the styles are being injected.

You may also notice a MIME type ('text/html') error in the console as well. This too is to be expected since the stylesheet doesn’t exist. It can be ignored.

Workflow-wise I would recommend using the WP dashboard at the devUrl and the proxyUrl to see theme changes.

Turn on polling in Webpack’s devServer.watchOptions

https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648/12?u=knowler

https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648/15?u=knowler

Bump the Browsersync delay

See above:

https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648/9?u=knowler

Try reinstalling the Composer dependencies or dumping autoload

If things still aren’t working, maybe try either of the following:

• Dump the autoload: composer dump-autoload.

Or

• Delete vendor.
• Clear composer’s cache composer clear-cache.
• (Re)install the composer dependencies: composer install.