Sage 9 browsersync not updating right

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.

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

1 Like

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.

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!

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:

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.

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:

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

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.

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

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.