Sage 9 browsersync not updating right

I was able to consistently reproduce the issue. Very strange. I think it could be an issue with the bs-html-injector Browsersync plugin. I don’t think it was designed to work with Blade templates — let alone PHP. I will expand on this in a new topic or an issue when I find the time.

5 Likes

That would make sense, as just regular html in the blade templates does not seem to have an issue being injected, its mainly when it is mixed with php / blade directives.

I also wonder if there could be a dependency that has updated since the first release of Sage 9?

When I was working on the first couple of themes based on Sage 9, the page would reload after saving a .blade.php or .php file, and that behavior persists in those projects, but I am not sure what would happen if I deleted my node modules and re-ran yarn, since newer projects behave differently.

Let me know if there’s any more information I can give you, and thanks for the help in trying to diagnose the issue!

1 Like

I’ve followed all of these and tried solutions on numerous other boards. They all (usually) work for a while and then quit working. I don’t have any other projects using webpack and hot reloading that have this issue. As much as I love using blade in my template and everything that Sage provides, I’m feeling like I can’t do anything but use a different starter template until these issues get addressed by the Roots team.

I’m currently watching my site reload constantly. I have to make a few changes, run yarn build, and then refresh, hoping there’s no error because the build fails without telling my why as its currently set up.

1 Like

Can you please be more specific?

Starting off by sharing your config, and whatever else you’ve modified to try and fix your problem, would be a good start to solving the issues you’re running into

This should be a simple configuration issue

1 Like

Ben, here’s the webpack.config.watch.js file I’m working with:

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:');
}

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: 1500,
    }),
  ],
};

It’s hard to troubleshoot because it’s hard to know what fixes things and what doesn’t. I’ve had sporadic luck by temporarily moving my views folder out of the structure, hard reloading so it stops the the auto reload, and then moving it back in. It works sometimes, other times it just keeps cycling through the page refreshses on-end.

I’ve also dumped my composer files and redone that based on the suggestion here but it didn’t change anything.

FWIW, I had this same issue at a previous job on a different Macbook Pro, but most of our sites were built with Sage 8 so it wasn’t as big of a deal when a site got stuck in a reload loop.

I use Flyhweel’s Local to run it on my machine.

Also, here’s my config file:

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/client-portal",
  "devUrl": "http://yesler-client-portal.local",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}

What Node version are you on? (node -v)

Also, is there is anything in the browser console that would be helpful to share? I would recommend enabling “Persist Log” (in the browser console).

I also find adding the following (in webpack.config.watch.js) helpful for debugging Browsersync related issues:

    new BrowserSyncPlugin({
      target,
      open: config.open,
      proxyUrl: config.proxyUrl,
      watch: config.watch,
      delay: 500,
+     advanced: {
+       browserSync: {
+         logLevel: 'debug',
+       },
+     },
    }),
2 Likes

I’m on Node v8.11.2.

I’ll add in the advanced portion there and see what happens.

Had it helped? I have got a similar issue (BrowserSync showing a notice (in upper right corner on page) that it updates but styles are not updated), the logLevel: 'debug' makes Browser Sync logging more information when it starts up (yarn start) but not when it recompiles after file change.

The following errors are logged to console when loading the page initially (over BrowserSync proxy):

inject.preload.js:373 GET blob:http://localhost:3000/236def65-7284-45c4-9deb-68885a965399 0 ()
(anonymous) @ inject.preload.js:373
__webpack_require__ @ bootstrap a58e717ca664391e8660:19
splitSelector.splitSelector @ common.js:103
__webpack_require__ @ bootstrap a58e717ca664391e8660:19
exports.textToRegExp @ bootstrap a58e717ca664391e8660:62
(anonymous) @ bootstrap a58e717ca664391e8660:62
(index):217 GET http://localhost:3000/app/themes/test-theme/dist/styles/main.css 404 (Not Found)
jquery-migrate.js?ver=1.4.1:23 JQMIGRATE: Migrate is installed with logging active, version 1.4.1

Alternatively, for a more verbose output you could comment out the stats option in whatever Webpack config you need it for and set stats: 'verbose'.


1 Like
[Browsersync] Browser Connected: Chrome, version: 67.0.3396.99
[BS] [HTML Injector] Stashing: http://localhost:3000/
[Browsersync] Browser Connected: Chrome, version: 67.0.3396.99

(Changed something in main.scss and saved the file).

WAIT  Compiling...
DONE  Compiled successfully in 1206ms

(E.g. style) lint errors can be provoked and are logged in console and in browser.

I found the reason: wp_enqueue_script for sage/main.js was commented out, which also caused sage/main.css not being updated. This seems to be some kind of dependency bug in the end.

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
    //wp_enqueue_script('sage/main.js', asset_path('scripts/main.js'), ['jquery'], null, true);
}, 100);

I have faced the issue with infinite browsersync loop.
Have used sage 9 + bedrock.
The issue was solved by setting devUrl=== proxyUrl

so I ended up with:
{
“entry”: {
“main”: [
“./scripts/main.js”,
“./styles/main.scss”
],
“customizer”: [
“./scripts/customizer.js”
]
},
“publicPath”: “/app/themes/theme-sage”,
“devUrl”: “http://localhost/projects/project1/web”,
“proxyUrl”: “http://localhost:3000/projects/project1/web”,
“cacheBusting”: “[name]_[hash:8]”,
“watch”: [
“app//*.php",
"config/
/.php",
"resources/views/**/
.php”
]
}

1 Like

Was having the same issue. Trouble shooting for at least 6 hours if not more. :rofl:
Added this to the file you mentioned and it is beautiful :slight_smile: Not all heroes wear capes. For the other person asking, add it after line 18 after module.exports = {

1 Like

Installed default Sage 9 from instructions within the new docs.

I can’t seem to get js/php/css changes to reload and/or inject into browser. I do see the webpack built message in the browser.

I tried delay and debug additions from above, but no luck. My config file is correct, but below is what I have thus far in the path area of config.json.

“publicPath”: “/wp-content/themes/mysage”,
“devUrl”: “http://mysage.test”,
“proxyUrl”: “http://localhost:3000”,
“cacheBusting”: “[name]_[hash:8]”,

I am getting this error in console:
bootstrap cedeab257f463b909548:39 Uncaught (in promise) Error: Manifest request to http://localhost:3000/wp-content/themes/mysage/dist/cedeab257f463b909548.hot-update.json timed out.
at XMLH

Also my node version is 11.15.0

Is there anything special I need to do and is there a reason for the error?

Thank you in advance and stay healthy.

I was struggling with Browsersync not updating on changes too. File changes caused recompiles but I couldn’t see the updates until i stopped/started watching again.

The issue: Port 3000 was in use for another project and webpack automatically defaulted to 3001 instead. Updating my config.json resolved the issue:

“devUrl”: “https://example.test”,
“proxyUrl”: “https://localhost:3001”,

I didn’t catch this at first and I hope this helps save someone else some time.

1 Like

I’ve been having all of these same issues for over a year by now. I just went through and tried nearly everything and nothing seems to fix the issue. SASS changes are injected fine but yarn start/watch won’t even act like it recognized a blade file update. It really stinks to have to constant refresh a browser window after any change I make especially now that I am using Tailwind for nearly project. Would be awesome if anyone knows why updates aren’t working for blade files, etc.

1 Like

There is a PR for fixing browsersync (among other issues) in sage 9, see: https://github.com/roots/sage/pull/2603

Thank you @strarsis , I fixed BrowserSync by upgrading everything to your webpack5 branch (with Tailwind and postcss-import and PostCSS 8 it was giving me lots of trouble).
The webpack5 branch is working as a charm and hot reloading too.

The webpack 5 branch is even more preferable than the webpack 4, but webpack 5 requires a newer node version than node 8.x, hence I added two PRs, one for webpack 4 and one for webpack 5.

1 Like

@strarsis - thanks so much for this.

Should browsersync work with webpack 4 to reload blade file changes?
That’s the only thing left that I can’t get to work.

I may attempt to upgrade to webpack 5 soon otherwise.