Sage 9 browsersync not updating right

Not only that line has to be replaced but also where the new extractor is used:

I recommend that you merge the webpack.config.js using a merge tool (e.g. WinMerge).
Or post it here if you have problems with merging the changes so I can try it.

My webpack.config.js file is correct, it’s the webpack.config.preset.js file that is creating issues. If I rename/remove the preset file, everything compiles fine but tailwind is not being installed correctly. Once I have the preset file in place I get errors when compiling.

'use strict'; // eslint-disable-line

const ExtractTextPlugin = require('extract-text-webpack-plugin');

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

/** Default PostCSS plugins */
let postcssPlugins = [
  require('tailwindcss')(`${config.paths.assets}/styles/tailwind.config.js`),
  require('autoprefixer')(),
];

/** Add cssnano when optimizing */
config.enabled.optimize
  ? postcssPlugins.push(
      require('cssnano')({
        preset: ['default', { discardComments: { removeAll: true } }],
      })
    )
  : false;

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        include: config.paths.assets,
        use: ExtractTextPlugin.extract({
          fallback: 'style',
          use: [
            { loader: 'cache' },
            { loader: 'css', options: { sourceMap: false } },
            {
              loader: 'postcss',
              options: {
                postcssOptions: {
                  parser: config.enabled.optimize
                  ? 'postcss-safe-parser'
                  : undefined,
                  plugins: postcssPlugins,
                  sourceMap: false,
                }
              },
            },
            {
              loader: 'resolve-url',
              options: { silent: true, sourceMap: false },
            },
            {
              loader: 'sass',
              options: { sourceComments: true, sourceMap: false },
            },
          ],
        }),
      },
    ],
  },
};

You are right. Apparently the webpack5 PR only changes the base files, but not what is additionally added on top of these (composer create-project roots/sage selection). Hence I would have to create a PR for these additional config, as for Tailwind, Bootstrap, etc.

Adjust the merging at the very end of the base webpack.config.js:

// [...]

/**
 * During installation via sage-installer (i.e. composer create-project) some
 * presets may generate a preset specific config (webpack.config.preset.js) to
 * override some of the default options set here. We use webpack-merge to merge
 * them in. If you need to modify Sage's default webpack config, we recommend
 * that you modify this file directly, instead of creating your own preset
 * file, as there are limitations to using webpack-merge which can hinder your
 * ability to change certain options.
 */

module.exports = mergeWithRules({
  module: {
    rules: {
	  test: 'match',
	  use: {
	    loader: 'match',
	    options: 'replace',
	  },
    },
  },
})( webpackConfig, desire(`${__dirname}/webpack.config.preset`) ? desire(`${__dirname}/webpack.config.preset`) : {} )

Then use this updated tailwind variant of webpack.config.preset.js;

'use strict'; // eslint-disable-line

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

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

module.exports = {
  module: {
    rules: [
	  {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: config.enabled.sourceMaps } },
          {
            loader: 'postcss-loader', options: {
              postcssOptions: {
                config: path.join( __dirname, 'postcss.config.tailwind.js' ), // PostCSS tailwind specific config
                ctx: config,
              },
              sourceMap: config.enabled.sourceMaps,
            },
          },
          { loader: 'resolve-url-loader', options: { sourceMap: config.enabled.sourceMaps } },
          {
            loader: 'sass-loader', options: {
              sassOptions: {
                sourceComments: true,
              },
              sourceMap: true, //config.enabled.sourceMaps, // false causes a resolve issue
            },
          },
        ],
      },
    ],
  },
};

The PostCSS loader expects a config file, hence the tailwind-tailored PostCSS config file postcss.config.tailwind.js has to be added:

/* eslint-disable */

module.exports = (api) => {

  const cssnanoConfig = {
    preset: ['default', { discardComments: { removeAll: true } }]
  };

  return {
    parser: api.options.ctx.enabled.optimize ? 'postcss-safe-parser' : undefined,
    plugins: {
      tailwindcss: `${api.options.ctx.paths.assets}/styles/tailwind.config.js`,
      autoprefixer: true,
      cssnano: api.options.ctx.enabled.optimize ? cssnanoConfig : false,
    },
  };

};

After making the changes you provided, I am now receiving this error on build:

Error: Cannot find module 'path-exists'

Full output:

yarn run v1.22.10
$ webpack --progress --config resources/assets/build/webpack.config.js
internal/modules/cjs/loader.js:818
  throw err;
  ^

Error: Cannot find module 'path-exists'
Require stack:
- /Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/find-up/index.js
- /Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/import-local/node_modules/pkg-dir/index.js
- /Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/import-local/index.js
- /Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/webpack-cli/bin/cli.js
- /Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/webpack/bin/webpack.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (/Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
    at Object.<anonymous> (/Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/find-up/index.js:4:20)
    at Module._compile (/Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/find-up/index.js',
    '/Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/import-local/node_modules/pkg-dir/index.js',
    '/Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/import-local/index.js',
    '/Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/webpack-cli/bin/cli.js',
    '/Users/joshb/Documents/_development/_trellis/_project/trellis.project.build/site/web/app/themes/project/node_modules/webpack/bin/webpack.js'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I checked out the webpack5 branch and then put a modified tailwind configuration on top of it.
You can try the tested sage 9 + webpack 5 + tailwind configuration from this repository:


Together with latest Tailwind, the dependencies require node v12 or higher, you can use a known working node version (LTS at time of writing) by invoking nvm use v14.15.3. To ensure the same node version is used among the whole team, you can create a .nvmrc with the node version as content.
I also had to modify some styles for making them compatible with latest Tailwind (new rules introduced).

@strarsis - thanks for all of that… I literally just put together my own working repo here:

Everything works fine on mine.

I just tried yours and on yarn watch it returns this error:

[webpack-cli] ReferenceError: merge is not defined

I updated the theme installation instructions as well.

Theme installation
Clone this repo and update the publicPath and devUrl in config.json

# @ resources/assets/config.json
{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/app/themes/sage9-wp5-tailwind2",
  "devUrl": "http://sage9-wp5-tailwind2.test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]
}
Be sure you're running node 12 first.

Navigate to your theme directory and run:

yarn && yarn build
Still in your theme, run:

composer install
Optionally update your theme details

# @ resources/style.css
/*
Theme Name:         Sage Starter Theme
Theme URI:          https://roots.io/sage/
Description:        Sage is a WordPress starter theme.
Version:            9.0.10
Author:             Roots
Author URI:         https://roots.io/
Text Domain:        sage

License:            MIT License
License URI:        http://opensource.org/licenses/MIT
*/
Now go activate theme.

@joshb: The old merge method was used for production builds and watch.
I pushed a fix commit, it should work now.

1 Like

@strarsis - I just installed a new theme and can confirm that your repo works as well.

There appears to be an issue yet with browsersync. Is it normal behavior for browsersync to constantly be reloading the browser itself? This doesn’t happen on my sage/wp/tailwind repo I created but it does on yours.

[Browsersync] Access URLs:
 --------------------------------------
       Local: https://localhost:5552
    External: https://192.168.0.58:5552
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers... (buffered 3 events)
[Browsersync] Reloading Browsers... (buffered 14 events)
[Browsersync] Reloading Browsers... (buffered 7 events)
[Browsersync] Reloading Browsers... (buffered 61 events)
[Browsersync] Reloading Browsers... (buffered 77 events)
[Browsersync] Reloading Browsers... (buffered 72 events)
[Browsersync] Reloading Browsers... (buffered 259 events)
[Browsersync] Reloading Browsers... (buffered 16 events)
[Browsersync] Reloading Browsers... (buffered 5 events)
[Browsersync] Reloading Browsers... (buffered 5 events)
[Browsersync] Reloading Browsers... (buffered 5 events)
[Browsersync] Reloading Browsers... (buffered 37 events) 

Additionally, browsersync doesn’t appear to be updating when adding new html tags, etc.
I have to hard refresh a 2 to 5 times to see the update. OR I have to build again and then refresh.

But if I add a tailwind class to a tag for example, then browsersync updates immediately.

After further use, it appears the reloading browsers is happening with my repo as well.
It reloads almost every second or two.

Makes it impossible to user the inspector.

Hm, I am unable to reproduce this issue though… E.g. when I clone the repository, configure + start a test WordPress container, install the dependencies and start watching (nvm use lts/*; nvm install; composer install; npm start), wait for the page to open and then change something, e.g. add body { background: red; } to _page.scss, the page, the page turns red. When I change it something else, e.g. body { background: blue; } the page turns blue. I don’t experience a BrowserSync reload loop.

  • Are you using HTTPS on the test server or on BrowserSync itself?
  • Are you using the Chrome browser?
  • What do you see in Developer JavaScript console, any errors/warnings, CORS errors from BrowserSync?

I am using a self signed certificate with trellis cert which is also not secure with localhost.

I am using chrome.

I dont believe I have any console errors but will confirm once I get back to my workstation

A couple of things:

First, I turned off SSL for development and provisioned. Installed your version of the theme, set up my config file, etc and ran yarn start.

Site opens up here: http://localhost:3000/ with an error:

This site can’t provide a secure connection
localhost  sent an invalid response.
ERR_SSL_PROTOCOL_ERROR

Then it continues to reload browsers:

Browsersync] Watching files...
[Browsersync] Reloading Browsers... (buffered 90 events)
[Browsersync] Reloading Browsers... (buffered 54 events)
[Browsersync] Reloading Browsers... (buffered 184 events)
[Browsersync] Reloading Browsers... (buffered 200 events)
[Browsersync] Reloading Browsers... (buffered 50 events)
[Browsersync] Reloading Browsers... (buffered 149 events)
[Browsersync] Reloading Browsers... (buffered 146 events)
[Browsersync] Reloading Browsers... (buffered 73 events)
[Browsersync] Reloading Browsers... (buffered 269 events)
[Browsersync] Reloading Browsers... (buffered 594 events)
[Browsersync] Reloading Browsers... (buffered 402 events)
[Browsersync] Reloading Browsers... (buffered 755 events)
[Browsersync] Reloading Browsers... (buffered 52 events)
[Browsersync] Reloading Browsers... (buffered 39 events)
[Browsersync] Reloading Browsers... (buffered 73 events)
[Browsersync] Reloading Browsers... (buffered 404 events)
[Browsersync] Reloading Browsers... (buffered 23 events)
[Browsersync] Reloading Browsers... (buffered 19 events)
[Browsersync] Reloading Browsers... (buffered 641 events)
[Browsersync] Reloading Browsers... (buffered 118 events)
[Browsersync] Reloading Browsers... (buffered 58 events)
[Browsersync] Reloading Browsers... (buffered 724 events)
[Browsersync] Reloading Browsers... (buffered 99 events)
[Browsersync] Reloading Browsers... (buffered 1428 events)
[Browsersync] File event [change] : dist/styles/main.css
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers... (buffered 111 events)
[Browsersync] Reloading Browsers... (buffered 11 events)
[Browsersync] Reloading Browsers... (buffered 131 events)
[Browsersync] Reloading Browsers... (buffered 616 events)
[Browsersync] Reloading Browsers... (buffered 20 events)
[Browsersync] Reloading Browsers... (buffered 334 events)
[Browsersync] Reloading Browsers... (buffered 55 events)
[Browsersync] Reloading Browsers... (buffered 26 events)
[Browsersync] Reloading Browsers... (buffered 233 events)
[Browsersync] Reloading Browsers... (buffered 157 events)
[Browsersync] Reloading Browsers... (buffered 72 events)

I changed the proxyUrl in both config.json and build/config.js and started again but I’m still getting SSL_PROTOCOL_ERROR - http://localhost:9992/

Next I set SSL back on and provisioned again. Changed the proxyUrl’s to: https://localhost:6661
Now the site will load my proxyUrl secured but otherwise it won’t? As of now, it doesn’t appear to be reloading browsers anymore. I may have been using the incorrect node version before but I’m not sure.

It appears to be taking a long time to compile scss files though (6 seconds) and some detailed output I haven’ seen in the past.

 DONE  Compiled successfully in 6173ms                                           12:49:28 PM

assets by info 1.49 KiB [immutable]
  assets by path *.js 1.42 KiB
    asset main.8c91c23f60ab8bd9e982.hot-update.js 1.03 KiB [emitted] [immutable] [hmr] (name: main) 1 related asset
    asset customizer.8c91c23f60ab8bd9e982.hot-update.js 401 bytes [emitted] [immutable] [hmr] (name: customizer) 1 related asset
  assets by path *.json 62 bytes
    asset customizer.8c91c23f60ab8bd9e982.hot-update.json 34 bytes [emitted] [immutable] [hmr]
    asset main.8c91c23f60ab8bd9e982.hot-update.json 28 bytes [emitted] [immutable] [hmr]
assets by path scripts/*.js 508 KiB
  asset scripts/main.js 374 KiB [emitted] (name: main) 1 related asset
  asset scripts/customizer.js 133 KiB [emitted] (name: customizer) 1 related asset
asset styles/main.css 2.19 MiB [emitted] [big] (name: main) 1 related asset
Entrypoint main [big] 2.56 MiB (1.27 MiB) = styles/main.css 2.19 MiB scripts/main.js 374 KiB main.8c91c23f60ab8bd9e982.hot-update.js 1.03 KiB 3 auxiliary assets
Entrypoint customizer 134 KiB (135 KiB) = scripts/customizer.js 133 KiB customizer.8c91c23f60ab8bd9e982.hot-update.js 401 bytes 2 auxiliary assets
[Browsersync] File event [change] : dist/styles/main.css

Blade files aren’t updating perfectly either. Sometimes they update immedately, other times I have to clear yarn cache and/or yarn build, then refresh to see changes.

Some folks have mentioned in the past that it could be a file system issue but I’m running fresh installs of everything on a brand new iMac with Big Sur. Previously I was running Mohave on a Macbook and had similar issues as I am experiencing now, mostly with Blade files and browsersync.

Secondly, another strange thing is happening. I was using my version of the package yesterday. Things were mostly fine with some browser reloading issues as well, however, this morning the project had duplicates of files I was working on yesterday.

For example, header.blade.php now has another version named header.blade 2.php
Same with _header.scss or any other file I had opened yesterday.

This was happening several days ago as well, since I’ve been attempting to get this package together but I didn’t think much of it then. Figured that I made a mistake and copied files. Now that it happened overnight, I know it wasn’t something I did. I will keep an eye on this and report back if files are duplicated again.

1 Like

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.

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',
    }),

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:

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.

@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.

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

header {
  & nav {
    display: none;
  }
} 

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