Sage 9 Beta 1 not inserting styles in browsersync

sage
1

Okay so I’m trying Sage9 for the first time and I’m probably doing something wrong.

Here’s what I’ve done:

  1. Retrieved a copy of Sage9 using Composer as directed here

  2. run yarn to install dependencies

  3. updated devURL in assets/config.json as instructed

  4. run yarn run build and yarn run start (and yarn run clean a few times to see if that would fix anything)

Here’s what happens:
Templates reload just fine when I save a change, but, while Browsersync indicates that it’s rebuilding and inserting updated styles when changes to .scss files are saved, the styles do not appear in the browser.

I also get a bunch of notifications and errors in my js console:

Screen Shot 2017-01-10 at 10.56.06 PM.png1922×748 137 KB

Two things are noteworthy about this output:

  1. I didn’t install FontAwesome (it seems to ship with Sage now? That’s pretty neat)

  2. the path to /dist/ is incorrect; it lists the directory name sage, but my directory is named my-theme-name (not really, it’s the client’s name).

I’ve probably made some very simple mistake. Any idea what it was? Thank you for any insight you can provide!

2

If you renamed the directory from sage, did you also update publicPath?

The HMR warning about bundle size is expected, and yeah, Font Awesome is included out of the box now

1 Like
3

I couldn’t recall if I had tried updating publicPath, so I just did and re-ran yarn run build and yarn run start and I’m still getting 404s for those files, now with the correct theme path.

I can also confirm that those .json files are not in /dist/, but I don’t know if they’re actually supposed to be.

4

This seems relevant:

I tried running npm install (I know, but it gave me something useful maybe?) and I got the following error:

sage@9.0.0-beta.1 /Users/my-user-name/sitename.com/site/web/app/themes/clientname
├─┬ monkey-hot-loader@0.0.3  (git://github.com/rmarscher/monkey-hot-loader.git#2847fd02790ab602502ede4f4909653bd7268863)
│ └── source-map@0.5.6 
└── UNMET PEER DEPENDENCY webpack@2.2.0-rc.3

npm WARN extract-text-webpack-plugin@2.0.0-beta.4 requires a peer of webpack@^2.1.0-beta.19 but none was installed.

That seems related to this problem, so I rm -rf node_modules and ran yarn again and whaddayaknow:

yarn install v0.18.1
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning Incorrect peer dependency "webpack@^2.1.0-beta.19".
[4/4] 📃  Building fresh packages...
✨  Done in 13.89s.

I didn’t notice that warning the first time.

Could this be causing the problem I’m seeing?

5

I have the same issues and same errors too. After I added every change from the latest commits

6

Same here, php and js changes are updated as should be in browser sync, but not scss files (I added scss files to the watcher obviously). Changes are detected and compiled by web pack but nothing happens in the browser.

7

Looks like there is problems with PHP watcher too.

Screen Shot 2017-01-11 at 14.09.37.png455×554 26.3 KB

Terminal print these lines on “yarn run start”. None of these files are actually changed.

8

Alright, was able to reproduce this weirdness. Hopefully we can get this sorted out today.

1 Like
9

Please give this a shot (and read the notes in PR):

1 Like
10

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?

Screen Shot 2017-01-11 at 21.45.38.png1298×1708 763 KB

11

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?

12

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:

Screen Shot 2017-01-12 at 08.13.01.png960×960 60.6 KB

13

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

14

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

15

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

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

17

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

18

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…

19

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

Ugly workaround for now, but it will be fixed.

20

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