# Sage 9 browsersync not updating right

**URL:** https://discourse.roots.io/t/sage-9-browsersync-not-updating-right/10648
**Category:** sage
**Tags:** browsersync, webpack, sage9
**Created:** 2017-10-12T11:57:53Z
**Posts:** 68

## Post 1 by @groseler — 2017-10-12T11:57:53Z

A problem is starting to appear and it seams that it is getting worst.  
After I make some changes in my blade.php (html content) file the browsersync don’t update. I have to hit **save** several times (sometimes more than 5) in order tos see some changes.  
Any thoughts about this?

---

## Post 2 by @Simeon — 2018-01-17T02:22:27Z

Bump.

I also get this regularly. Whatever cache-busting it’s supposed to be doing with each file save, doesn’t work. Tried multiple browsers.

---

## Post 3 by @dallanlee — 2018-02-04T21:13:11Z

Bump. I am also seeing this issue in my project and have not found a solution. (I will go to the GitHub repo as well but I’m commenting here first because a Google search brings this up as the first result.)

---

## Post 4 by @knowler — 2018-02-04T22:59:06Z

This happens to me sometimes as well, but I think I’ve discovered it’s because, during the Sage install (w/`composer create-project...`), I’ve made a habit of just hitting enter to go with the default path to the theme directory instead of updating it to reflect the name of my theme. This means the `publicPath` in `resources/assets/config.json` is set to `app/themes/sage` instead of `app/themes/my-theme`. Correcting this seems to have resolved some of the issues. I don’t know if this could be the same mistake any of you are making, but I thought it would be worth sharing.

**TL;DR** : Make sure your `publicPath` in `resources/assets/config.json` is correct.

**Update:** After doing a few tests the issue does persist for me when updating a Blade template (I should have read the question better). I’ve been living in JS for the last little bit, which is very quick to trigger BrowserSync/Webpack to refresh/rebuild.

---

## Post 5 by @michelecocuccio — 2018-02-06T11:35:10Z

Bump.

Yeah I have noticed the same issue. Sometimes it takes 4/5 saves of the files in order to trigger the reload. I have tried with Chrome, Firefox and Firefox developer edition and no luck.  
Javascript and css files trigger the reload perfectly!

---

## Post 6 by @Simeon — 2018-02-06T22:24:55Z

I get these issues and they’re most of the time related to issues with using self-signed certificates on development. But I don’t have a great fix right now.

* * *

If you’re getting these problems, and you’re using a self-signed SSL certificate on Development

1. Make sure you’ve set your certificate settings to ‘Always Trust’ (view the cert in your browser, drag it to desktop, open in Keychain Access and set Trust Settings to ‘Always Trust’)
2. Check `config.json` is using `"proxyUrl": "https://localhost:3000",` by default it’s just `http://`
3. Add the line `"headers": { "Access-Control-Allow-Origin": "*" },` to `config.json` as well… for good measure :smiley:

---

## Post 7 by @senadir — 2018-03-16T19:23:06Z

any updates on this issue?  
also sometimes things are not compiled to the dist folder

---

## Post 8 by @pskigen — 2018-04-27T15:55:15Z

Bump.

This started happening to me as well. For me, template files will not refresh period.

---

## Post 9 by @knowler — 2018-04-27T16:11:18Z

Try increasing the Browsersync delay value:

> <https://github.com/roots/sage/blob/8d001c7571368ea501268076172e79bae09141ce/resources/assets/build/webpack.config.watch.js#L34>

(h/t @ben)

With a virtual local development server (i.e. Trellis/Vagrant), Browsersync tends to be a bit quicker than Blade compiling + Vagrant’s file syncing. Updating the delay will offset the refresh to account for the syncing.

---

## Post 10 by @pskigen — 2018-05-03T15:30:47Z

Thank you for the suggestion, I tried doubling the delay (setting it to 1000) with no apparent impact on browsersync reloading the page.

However, in previous Sage 9 projects, the page was reloading as expected upon saving a .blade.php or .php file. As of now, it injects or removes some lines of html, but this causes issues if I change anything beyond basic html.

For example, if I have @foreach loop in my blade.php, and I make a change, it will update the first item in the foreach loop, which can cause some very bizarre formatting until I manually refresh the page.

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.

---

## Post 11 by @knowler — 2018-05-03T16:11:30Z

> [@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
e class='quote' data-post="5" data-topic="12145"\> 
 ![](https://discourse.roots.io/user_avatar/discourse.roots.io/ben/48/11377_2.png)
[XMLHttpRequest cannot load hot-update.json due to access control checks](https://discourse.roots.io/t/xmlhttprequest-cannot-load-hot-update-json-due-to-access-control-checks/12145/5) [sage](/c/sage/11)

> 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.](https://discourse.roots.io/t/mime-type-text-html-not-a-supported-stylesheet-mime-type/11636/13)

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/12)

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

#### Bump the Browsersync delay

See above:

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

#### 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`.

---

## Post 12 by @alwaysblank — 2018-05-03T16:16:12Z

I was running into a similar problem, and adding the following lines to `module.exports` in `webpack.config.watch.js` solved it:

```
devServer: {
        watchOptions: {
            poll: true,
        },
    },
```

In my case, I believe the issue had to do with my OS’s ability to watch multiple files for changes in the way Webpack/BrowserSync wanted by default.

---

## Post 13 by @pskigen — 2018-05-03T16:36:52Z

> [@knowler](#):
>
> I don’t know if it will help you, but here are my debugging steps for issues for this sort:

I’ve followed those debugging steps, but unfortunately I’m still getting the same behavior.

---

## Post 14 by @pskigen — 2018-05-03T16:38:49Z

> [@alwaysblank](#):
>
> ```
> devServer: {
> watchOptions: {
> poll: true,
> },
> },
> ```

I’ve tried adding that to `module.exports` in `webpack.config.watch.js` with no luck, but perhaps I’m not adding it in the right location. Would you mind showing me your `module.exports` layout?

---

## Post 15 by @alwaysblank — 2018-05-03T16:44:29Z

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

---

## Post 16 by @pskigen — 2018-05-03T16:56:40Z

Much appreciated. Still no luck though unfortunately :confused:

---

## Post 17 by @knowler — 2018-05-03T17:13:09Z

How did you initially set up the site with Valet? [The WP-CLI valet command](https://github.com/aaemnnosttv/wp-cli-valet-command)? Or just `valet link`? Maybe try `valet unlink` and then `valet link` to see if it’s an issue with Valet. Or `valet restart`. Even the output of `valet which` could be helpful for debugging (tells you which driver it’s using).

---

## Post 18 by @pskigen — 2018-05-03T17:32:35Z

I used the standard `valet link` command. If it’s helpful, where I am working, the standard file structure for a wordpress project is `[project-name]/public/[wordpress-install]` I typically `cd` into the `public` directory, then run `valet link [project-name]`.

So far as I can tell, this all seems to work properly. I can access the wp-admin and for the most part webpack behaves as expected, aside from not fully reloading the page.

When I run `valet which` I get the following output:

`This site is served by [BasicValetDriver].`

---

## Post 19 by @knowler — 2018-05-03T18:13:12Z

I was unable to replicate your issue following the same setup you described.

> [@pskigen](#):
>
> For example, if I have @foreach loop in my blade.php, and I make a change, it will update the first item in the foreach loop, which can cause some very bizarre formatting until I manually refresh the page.

Can you expand on this? What is the “very bizarre formatting”? Could it be that your styles are expecting the markup to be different? I was unable to reproduce what you’ve described when testing a foreach loop and some simple styling (i.e. `:first-child` is a different color).

---

## Post 20 by @pskigen — 2018-05-03T18:30:03Z

It varies depending on the specific situation, sometimes its as simple as the first item updating to reflect the html / php changes, while all other items do not. At other times, it will actually break my layout.

For example, if I change the bootstrap column class on one item, the others do not update, and the layout is no longer formatted properly.

---

## Post 21 by @knowler — 2018-05-03T19:59:33Z

I was able to consistently reproduce the issue. Very strange. I think it could be an issue with the [`bs-html-injector` Browsersync plugin](https://github.com/shakyShane/html-injector). 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.

---

## Post 22 by @pskigen — 2018-05-03T20:16:36Z

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!

---

## Post 23 by @builtbyvern — 2018-07-09T17:16:15Z

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.

---

## Post 24 by @ben — 2018-07-09T17:52:18Z

> [@builtbyvern](#):
>
> I’ve followed all of these and tried solutions on numerous other boards. They all (usually) work for a while and then quit working.

Can you please be more specific?

> [@builtbyvern](#):
>
> I’m feeling like I can’t do anything but use a different starter template until these issues get addressed by the Roots team.

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

> [@builtbyvern](#):
>
> I’m currently watching my site reload constantly.

This should be a simple configuration issue

---

## Post 25 by @builtbyvern — 2018-07-09T21:06:06Z

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"
  ]
}
```

---

## Post 26 by @knowler — 2018-07-09T21:43:02Z

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

---

## Post 27 by @builtbyvern — 2018-07-09T22:00:04Z

I’m on Node v8.11.2.

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

---

## Post 28 by @strarsis — 2018-07-11T14:35:25Z

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
```

---

## Post 29 by @knowler — 2018-07-11T15:05:10Z

Alternatively, for a more verbose output you could comment out [the `stats` option](https://webpack.js.org/configuration/stats/) in whatever Webpack config you need it for and set `stats: 'verbose'`.

> <https://github.com/roots/sage/blob/master/resources/assets/build/webpack.config.js#L24-L37>

  

> <https://github.com/roots/sage/blob/master/resources/assets/build/webpack.config.watch.js#L24>

---

## Post 30 by @strarsis — 2018-07-12T00:11:40Z

```
[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.

---

## Post 31 by @strarsis — 2018-07-12T16:24:31Z

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);
```

---

## Post 32 by @vstrelianyi — 2019-02-15T14:58:42Z

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](http://localhost/projects/project1/web)”,  
“proxyUrl”: “[http://localhost:3000/projects/project1/web](http://localhost:3000/projects/project1/web)”,  
“cacheBusting”: “[name]\_[hash:8]”,  
“watch”: [  
“app/**/\*.php",  
"config/**/_.php",  
"resources/views/\*\*/_.php”  
]  
}

---

## Post 33 by @Alex_Soto — 2020-01-29T00:07:12Z

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 = {

---

## Post 34 by @gishua — 2020-03-21T15:49:05Z

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](http://mysage.test)”,  
“proxyUrl”: “[http://localhost:3000](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](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.

---

## Post 35 by @Aaron_Holmes — 2020-08-13T19:58:03Z

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](https://example.test)”,  
“proxyUrl”: “[https://localhost:3001](https://localhost:3001)”,

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

---

## Post 37 by @joshb — 2020-12-19T01:30:17Z

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.

---

## Post 38 by @strarsis — 2021-01-02T15:03:38Z

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

---

## Post 39 by @ciromattia — 2021-01-08T17:08:20Z

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.

---

## Post 40 by @strarsis — 2021-01-08T17:25:29Z

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.

---

## Post 41 by @joshb — 2021-01-12T01:22:44Z

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

---

## Post 42 by @strarsis — 2021-01-12T21:07:30Z

I just tested it with webpack4 branch - and webpack watch/BrowserSync works fine.

---

## Post 43 by @joshb — 2021-01-12T21:44:39Z

I attempted to switch to webpack 5, got a bunch of errors on build.  
Switched back to webpack 4, getting errors as well, including this one:

`Preformatted textError: Cannot find module 'extract-text-webpack-plugin'`

I added that `yarn add extract-text-webpack-plugin`

and then build again and I receive this:

```
ERROR Failed to compile with 1 errors 2:41:49 PM

This relative module was not found:

* ./styles/main.scss in multi ./scripts/main.js ./styles/main.scss
Built at: 01/12/2021 2:41:49 PM
                    Asset Size Chunks Chunk Names
    scripts/customizer.js 4.82 KiB customizer [emitted] customizer
scripts/customizer.js.map 3.99 KiB customizer [emitted] [dev] customizer
          scripts/main.js 10.7 KiB main [emitted] main
      scripts/main.js.map 9.45 KiB main [emitted] [dev] main
Entrypoint main = scripts/main.js scripts/main.js.map
Entrypoint customizer = scripts/customizer.js scripts/customizer.js.map
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

---

## Post 44 by @joshb — 2021-01-12T22:12:06Z

after `yarn start`

```
ERROR Failed to compile with 1 errors 3:08:02 PM

This relative module was not found:

* ./styles/main.scss in multi ./resources/assets/build/util/../helpers/hmr-client.js ./scripts/main.js ./styles/main.scss
[Browsersync] Proxying: https://trellis.project.build
[Browsersync] Access URLs:
 --------------------------------------
       Local: https://localhost:3000
    External: https://192.168.0.58:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Watching files...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
[Browsersync] Reloading Browsers...
```

The good news is that browsersync is watching my blade files now. That’s a relief after a few years without it!  
Attempting to determine what is now causing this issue and then I should be set free!

---

## Post 45 by @strarsis — 2021-01-12T22:49:40Z

It seems that something wasn’t merged from the webpack5 PR into your existing `webpack.config.js`,  
as with recent webpack, a different extractor should be used:

> <https://github.com/strarsis/sage/blob/webpack5/resources/assets/build/webpack.config.js#L7>

Merge the `webpack.config.js` and the other config files, as they contain slight modifications. This wouldn’t be noticeable when starting from scratch, but when reusing an existing `webpack.config.js` some parts may be overlooked.

---

## Post 46 by @joshb — 2021-01-12T23:14:58Z

Turns out it was the webpack preset file creating the problem.  
Building and watching works great now but it appears the styles are not working at all.

I’m updating a project with tailwind 2 which was created using this:

> [@Tailwind v2 and Sage 9](https://discourse.roots.io/t/tailwind-v2-and-sage-9/19598/19):
>
> I am unable to reproduce this using your instructions. It seems like either your Sage 9 install isn’t the latest or the Sage Installer update isn’t being brought in. Now, I actually remembered that there are some easier directions I can give for using the update to Sage Installer: $ composer create-project roots/sage my-sage-project dev-9-tailwind-2 This creates the Sage project called my-sage-project using the 9-tailwind-2 branch (which uses roots/sage-installer at 1.6.4). I will see what I …

 ![image](https://discourse.roots.io/uploads/default/original/2X/9/962f29902525ef484756c9fd3dce1369e0565306.png)

additionally, this browsersync is constantly reloading on it’s own

 ![image](https://discourse.roots.io/uploads/default/original/2X/8/84543cd56de10063ac9fcddd1621431efeb86fa2.png)

---

## Post 47 by @joshb — 2021-01-13T00:43:21Z

Furthermore, styles are being compiled and do work:

`https://trellis.project.build/app/themes/sage/dist/styles/main.css`

However, none of the Tailwind classes are working. These were working before the patches were made.

---

## Post 48 by @joshb — 2021-01-13T01:12:26Z

I don’t know enough about all of this but it appears that perhaps `webkit.config.preset.js` is required for Tailwind?

I’ve put this file back in place and when I attempt to build, I get errors:

`[webpack-cli] Error: Cannot find module 'extract-text-webpack-plugin'`

Updated-  
` const ExtractTextPlugin = require('extract-text-webpack-plugin');`  
` const ExtractTextPlugin = require('mini-css-extract-plugin');`

Build and get this error:  
`[webpack-cli] Error: Cannot find module 'tailwindcss'`

Checked my package.json and Tailwind is missing so I added it back, updated and built again:

```
[webpack-cli] Failed to load '/Users/joshb/Documents/_development/_trellis/trellis.project.build/site/web/app/themes/sage/resources/assets/build/webpack.config.js'
[webpack-cli] TypeError: ExtractTextPlugin.extract is not a function
```

Not sure where to go from here :frowning:

Here’s the file. Really appreciate any help.

> **webpack.config.preset.js**
>
> ```
> '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 },
> },
> ],
> }),
> },
> ],
> },
> };
> ```

---

## Post 49 by @strarsis — 2021-01-13T01:33:01Z

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

> <https://github.com/strarsis/sage/blob/webpack5/resources/assets/build/webpack.config.js#L64,L80>

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.

---

## Post 50 by @joshb — 2021-01-13T01:43:33Z

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

---

## Post 51 by @strarsis — 2021-01-13T02:44:56Z

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,
    },
  };

};
```

---

## Post 52 by @joshb — 2021-01-13T04:41:26Z

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

`Error: Cannot find module 'path-exists'`

---

## Post 53 by @joshb — 2021-01-13T04:46:12Z

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

---

## Post 54 by @strarsis — 2021-01-13T22:19:31Z

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:

> **[strarsis/sage9-webpack5-tailwind](https://github.com/strarsis/sage9-webpack5-tailwind)**
>
> Sage 9 with webpack and tailwind. Contribute to strarsis/sage9-webpack5-tailwind development by creating an account on GitHub.

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

---

## Post 55 by @joshb — 2021-01-13T22:44:43Z

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

> **[minemindmedia/sage9-wp5-tailwind2](https://github.com/minemindmedia/sage9-wp5-tailwind2)**
>
> Contribute to minemindmedia/sage9-wp5-tailwind2 development by creating an account on GitHub.

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

---

## Post 56 by @strarsis — 2021-01-13T23:06:10Z

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

> <https://github.com/strarsis/sage9-webpack5-tailwind/commit/902f9f015a15d277fb519072cea1f8d86b797853>

---

## Post 57 by @joshb — 2021-01-14T00:12:51Z

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

---

## Post 58 by @joshb — 2021-01-14T01:20:01Z

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.

---

## Post 59 by @strarsis — 2021-01-14T03:42:59Z

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?

---

## Post 60 by @joshb — 2021-01-14T03:45:53Z

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

---

## Post 61 by @joshb — 2021-01-14T19:57:57Z

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/](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/](http://localhost:9992/)

Next I set SSL back on and provisioned again. Changed the proxyUrl’s to: [https://localhost:6661](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.

---

## Post 62 by @joshb — 2021-01-15T01:16:29Z

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.

---

## Post 63 by @ciromattia — 2021-01-18T10:30:21Z

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

---

## Post 64 by @ciromattia — 2021-01-18T10:42:41Z

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:

---

## Post 65 by @ciromattia — 2021-01-18T14:20:14Z

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](https://discourse.roots.io/t/tailwind-v2-and-sage-9/19598/33).

---

## Post 66 by @joshb — 2021-01-18T19:39:39Z

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

---

## Post 67 by @ciromattia — 2021-01-19T08:21:46Z

It’s because the [CSS Nesting Module](https://tabatkins.github.io/specs/css-nesting/) requires always the [nesting selector `&`](https://tabatkins.github.io/specs/css-nesting/#nest-selector) or the `@nest` at-rule, try with

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

---

## Post 68 by @strarsis — 2021-04-03T15:32:52Z

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

e class='quote' data-post="1" data-topic="20067"\> 
 ![](https://discourse.roots.io/user_avatar/discourse.roots.io/strarsis/48/4543_2.png)
[Sage "9.1": Please test](https://discourse.roots.io/t/sage-9-1-please-test/20067) [sage](/c/sage/11)

> Note: Changed Sage 9.2 to 9.1 (as 9.0.10 is the current release in master). Updated Sage 9.x You can now try out the Sage PR branch for webpack 5 and updated dependencies. The sage-installer which is used by Sage 9.x for adding framework support was also updated to add the right configuration and styles. Bootstrap 5 (Beta2) has been added for selection. Tailwind 2 is used now. Trying it out now! To prevent siloing of existing working forks of Sage 9 + (insert framework), please try this set…