Sage 9 Beta 1 not inserting styles in browsersync

Tried with the change to assets/build/webpack.config.watch.js mentioned above and I still get the weird response in my terminal when running yarn run start.

Also my css changes aren’t updated while my files are being watched. Maybe I have to do a reinstall?

Your CSS changes won’t be echoed in terminal the way they were in Sage 8; you should see a note in the actual browser window about “rebuilding” and then the styles should update. Are you also not seeing that?

Thanks for your answer! I’m seeing the “webpack rebuilding” notification in the top right corner when I make a change but it’s not actually reflected on the website I’m building, not even after a hard refresh.

Maybe my settings are wrong? I’m using laravel valet in development.

My config.json looks like this:

Same here for me https://youtu.be/zTC6R0sa7f0

I’m having the exact same issue, at least I’m not alone :nerd:

@emilsgulbis I noticed that when you open your console at the start of the BS session that you’re missing the error I mention at the top of https://github.com/roots/sage/pull/1806

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_2__util_Router__[false] is not a constructor
    at Object.<anonymous> (main.js:23)
    at Object.<anonymous> (main.js:27)
    at __webpack_require__ (bootstrap f2d9dd8…:659)
    at fn (bootstrap f2d9dd8…:83)
    at Object.<anonymous> (tether.js:1811)
    at __webpack_require__ (bootstrap f2d9dd8…:659)
    at bootstrap f2d9dd8…:708
    at bootstrap f2d9dd8…:708

Can you remove your node_modules folder, make sure yarn.lock is the same as what’s on the Sage repo, and re-run yarn?

1 Like

@ben Just removed node_modules, replaced yarn.lock and re-run yarn.
Got this from yarn at terminal warning Incorrect peer dependency "webpack@^2.1.0-beta.19".

And of course, same 404 errors for css file.

That peer dependency warning is expected. The 404 for the CSS is also expected on a Browsersync session no matter what.

What you’re looking for:

  1. The error I mentioned above
  2. Saving a file (make a styling change) and then doing a manual refresh after BS claims it injected the changes

If you start a BS session and immediately don’t see the __WEBPACK_IMPORTED_MODULE_2__util_Router__[false] is not a constructor error in your console, then I’m assuming your node_modules don’t match up with what is expected from the yarn.lock file

Ok, just repeated again as you described (to record video) and after BS refresh everything works.

Do you have any idea why this problem occured in alpha? That BS refresh is ugly workaround…

Because Webpack + Browsersync is a pain in the ass :stuck_out_tongue:

Ugly workaround for now, but it will be fixed.

I have just updated the publicPath in assets/webpack.config.watch.js and I can confirm I am receiving the exception warning: Uncaught TypeError: WEBPACK_IMPORTED_MODULE_3__util_Router[false] is not a constructor but it reads differently, in that it says “MODULE_3” . Not sure if this matters, but I could not also get the styling to refresh.

I entered the command "yarn run start"
Edited an SCSS file
Refreshed the window in incognito mode, Browsersync did not refresh.

All very confusing. I realised that I had added the line “assets/styles/**/*.scss” to “assets/watch.json” under “watch”. So I removed that line, relaunched “yarn run start” and the refresh solution works for me now. I take it I was not supposed to add that in the watch section? Just thought I would add a message to help anybody else that is new to the yarn/webpack setup that does the same.

1 Like

I’m getting exactly the same error, but can’t seem to fix it.

Here are the steps that I have followed:
Updated to beta 2
Removed ‘node_modules’ folder
Run ‘yarn’
Run ‘yarn run start’
Files show up in terminal that have not been changed
BrowserSync see’s changes in assets folder (scss & js) but doesn’t inject new files. I can see it ticking in the top right corner.
I don’t see the error in the console that @ben referenced
Changes do not show up after native browser refresh

Can you make sure yarn.lock is the same as what’s on the Sage repo

Confirmed - still no luck. Once I replaced yarn.lock, I deleted node_modules, and re-ran ‘yarn’.

FYI, before running yarn ‘yarn.lock’ is 191kb, after it’s 213kb. Not sure if this helps?

I’m not seeing the __WEBPACK_IMPORTED_MODULE_2__util_Router__[false] error. But for me the js/css was 404-ing in BrowserSync because of an eslint error that was not being displayed for some reason. Once i ran yarn build it printed the error for me. Then fixed it and ran yarn start again and all was good.

So seems like eslint errors aren’t getting communicated to browsersync, at least for me.

Would you mind sharing what the error was?

Hey @ben

Any idea why I’m not seeing the WEBPACK_IMPORTED_MODULE_2util_Router__[false] error in my console?

Keen to get this working - having to run yarn build every time I make a small change is slowly killing me ha!

Appreciated.

I’ll try to reproduce, but the only time I wasn’t able to see that message was when my node deps didn’t match the yarn.lock

We’re hoping to have this whole mess sorted out soon, apologies for the inconvenience

Thanks @ben. I’ll keep my eye’s peeled!

I’m up and running on Valet + bedrock + Sage Beta 2.
on https://bedrock-sagebeta.dev/ all works fine but on localhost:3000 I have ERR_CONNECTION_CLOSED.
This is my config.json

{
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "watch": [
    "assets/scripts/**/*.js",
    "templates/**/*.php",
    "src/**/*.php"
  ],
  "publicPath": "/app/themes/sage",
  "devUrl": "http://bedrock-sagebeta.dev",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "browsers": [
    "last 2 versions",
    "android 4",
    "opera 12"
  ]
}

this is my terminal status:

➜ sage (beta2) ✗ webpack --hide-modules --watch --config assets/build/webpack.config.js

Webpack is watching the files…

[BS] Proxying: http://bedrock-sagebeta.dev [BS] Access URLs:

   Local: http://localhost:3000
External: http://192.168.1.12:3000

      UI: http://localhost:3001

UI External: http://192.168.1.12:3001

[BS] Watching files... [BS] File changed: templates/404.blade.php [BS] File changed: templates/index.blade.php [BS] File changed: templates/page.blade.php [BS] File changed: templates/search.blade.php [BS] File changed: templates/single.blade.php [BS] File changed: templates/template-custom.blade.php [BS] File changed: src/admin.php [BS] File changed: src/filters.php [BS] File changed: src/helpers.php [BS] File changed: src/setup.php [BS] File changed: assets/scripts/customizer.js [BS] File changed: assets/scripts/main.js [BS] File changed: assets/images/.gitkeep [BS] File changed: templates/layouts/base.blade.php [BS] File changed: templates/partials/comments.blade.php [BS] File changed: templates/partials/content-page.blade.php [BS] File changed: templates/partials/content-search.blade.php [BS] File changed: templates/partials/content-single.blade.php [BS] File changed: templates/partials/content.blade.php [BS] File changed: templates/partials/entry-meta.blade.php [BS] File changed: templates/partials/footer.blade.php [BS] File changed: templates/partials/head.blade.php [BS] File changed: templates/partials/header.blade.php [BS] File changed: templates/partials/page-header.blade.php [BS] File changed: templates/partials/sidebar.blade.php [BS] File changed: assets/scripts/routes/about.js [BS] File changed: assets/scripts/routes/common.js [BS] File changed: assets/scripts/routes/home.js [BS] File changed: assets/scripts/util/Router.js [BS] File changed: assets/scripts/util/camelCase.js [BS] File changed: src/lib/Sage/Config.php [BS] File changed: src/lib/Sage/Container.php [BS] File changed: src/lib/Sage/Template/Blade.php [BS] File changed: src/lib/Sage/Template/BladeProvider.php [BS] File changed: src/lib/Sage/Template/FileViewFinder.php [BS] File changed: src/lib/Sage/Assets/JsonManifest.php [BS] File changed: src/lib/Sage/Assets/ManifestInterface.php

however, webpack watch not work.

Thank you for you time and patience :pray:!