Sage 9 browsersync not updating right

sage
, ,
62

Update:

There’s still a bunch of instances of Bootstrap in the package which I’ve attempted to remove.

I keep randomly getting the:
[Browsersync] Reloading Browsers... (buffered 19 events)

and when it occurs, the browser reloads so fast it’s impossible to use browsersync whatsoever.

In order to use browsersync again, I have to shut it down and start it back up. Then it will work properly for a little while before it starts acting up again.

I am still experiencing issues with blade files being updated. Sometimes I literally have to copy/cut an entire partial, save, hard refresh several times with an empty partial until it disappears, paste the cut code back in save, and hard refresh again or multiple times to get the changes to show up.

Other than the reloading of the browser by browsersync, every other issue I am experiencing is exactly the same as I experienced before this update. I may just have to go back to the old setup and manually refresh blade files after each update, unfortunately.

Update: Just started doing it again until I stopped it:

[Browsersync] Reloading Browsers... (buffered 3 events)
[Browsersync] Reloading Browsers... (buffered 3 events)
[Browsersync] Reloading Browsers... (buffered 4 events)
[Browsersync] Reloading Browsers... (buffered 30 events)
[Browsersync] Reloading Browsers... (buffered 10 events)
[Browsersync] Reloading Browsers... (buffered 15 events)
[Browsersync] Reloading Browsers... (buffered 17 events)
[Browsersync] Reloading Browsers... (buffered 20 events)
[Browsersync] Reloading Browsers... (buffered 85 events)
[Browsersync] Reloading Browsers... (buffered 13 events)
[Browsersync] Reloading Browsers... (buffered 24 events)
[Browsersync] Reloading Browsers... (buffered 91 events)
[Browsersync] Reloading Browsers... (buffered 21 events)
[Browsersync] Reloading Browsers... (buffered 45 events)
[Browsersync] Reloading Browsers... (buffered 26 events)
[Browsersync] Reloading Browsers... (buffered 10 events)
[Browsersync] Reloading Browsers... (buffered 4 events)
[Browsersync] Reloading Browsers... (buffered 2 events)
[Browsersync] Reloading Browsers... (buffered 156 events)
[Browsersync] Reloading Browsers... (buffered 292 events)
[Browsersync] Reloading Browsers... (buffered 11 events)
[Browsersync] Reloading Browsers... (buffered 2 events)
[Browsersync] Reloading Browsers... (buffered 47 events)
[Browsersync] Reloading Browsers... (buffered 48 events)
[Browsersync] Reloading Browsers... (buffered 28 events)
[Browsersync] Reloading Browsers... (buffered 28 events)
[Browsersync] Reloading Browsers... (buffered 41 events)
[Browsersync] Reloading Browsers... (buffered 23 events)
[Browsersync] Reloading Browsers... (buffered 15 events)
[Browsersync] Reloading Browsers... (buffered 7 events)
[Browsersync] Reloading Browsers... (buffered 3 events)
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers... (buffered 38 events)
[Browsersync] Reloading Browsers... (buffered 18 events)
[Browsersync] Reloading Browsers... (buffered 85 events)
[Browsersync] Reloading Browsers... (buffered 764 events)
[Browsersync] Reloading Browsers... (buffered 78 events)
[Browsersync] Reloading Browsers... (buffered 125 events)
[Browsersync] Reloading Browsers... (buffered 21 events)
[Browsersync] Reloading Browsers... (buffered 45 events)

Lastly, is there any known fix for getting browsersync to work with the current version of Sage 9 as it comes packaged? All I want is for it work with my blade files.

63

I made some tweaks to webpack config and fought some issues with Purgecss (ATM it doesn’t work as PostCSS plugin but it works as webpack plugin or integrated as Tailwind option - I chose the latter).
The only issue left to me is that in the production build webpack-asset-manifest doesn’t include image assets and I couldn’t figure out why, though I spent over it many hours :frowning:
I event removed the replacer option in WebpackAssetManifest plugin replacing it with the new hook:

if (config.enabled.cacheBusting) {
  const WebpackAssetsManifest = require('webpack-assets-manifest');

  webpackConfig.plugins.push(
    new WebpackAssetsManifest({
      output: 'assets.json',
      space: 2,
      writeToDisk: false,
      assets: config.manifest,
      replacer: require('./util/assetManifestsFormatter'),
    })
  );
}

Last but not least, @strarsis, your webpack config lacks cachebusting for CSS, the MiniCssExtractPlugin configuration should be like this:

    new MiniCssExtractPlugin({
      filename: config.mode === 'production' ? 'styles/[name].[contenthash].css' : 'styles/[name].css',
      chunkFilename: config.mode === 'production' ? 'styles/[id].[contenthash].css' : 'styles/[id].css',
    }),
64

For @joshb: I completely got rid of webpack.config.preset.js, the only thing that you need there is the line

config: path.join( __dirname, 'postcss.config.tailwind.js' ), // PostCSS tailwind specific config

and I put it on the css rule because with autoprefixer and postcss-nested PostCSS plugins and the @apply Tailwind function I don’t need Sass anymore :slight_smile:

65

I finally managed to get my images correctly into manifest, I had to change CopyGlobPlugin (which was described as “would be nice” in the comment :slight_smile: )

Long story short I forked to a new branch but it’s Tailwind-tailored so I’m not submitting any PR (I think it wouldn’t be accepted though), all the links and info here.

66

@ciromattia

Oh, just seeing your update here as well about nested postcss. Perhaps I am doing something wrong but it doesn’t appear to be working properly.

For example, in my header.css file I’ve added:

header {
  nav {
    display: none;
  }
}

This compiles without error but remains nested in the /dist/styles/main.css file.

67

It’s because the CSS Nesting Module requires always the nesting selector & or the @nest at-rule, try with

header {
  & nav {
    display: none;
  }
}
68

There is now a Sage 9 update branch that offers composer create-project: