Sage 9 Beta 1 not inserting styles in browsersync

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:!

Also see https://github.com/roots/sage/issues/1804

@jasperfrumau I’m coming here from that topic. I follow what retlehs said on github, but nothing changed! The bug is here!

I just wanna know if this bug affect all sage beta 2 users or it is a random or it is a environment setup.

We are sure that the bug concerns the watcher? It may be because, the style is not served?

Thank you!

Besides the broken initial browsersync session and the asset size limit warning, this fix works for me. However in Google Chrome, localhost:3000 keeps on looping and reloading, in Safari this doesn’t happen. This started happening from the alpha 4 version.

I just want to confirm that this bug exists and even after spending a couple of hours, I didn’t manage to solve it which makes Beta.1 unusable (at least in my case). Previous Sage versions Alpha 1,2,3 and 4 works well.

Update:
Switching to beta2 branch solved my issues. I still have to make initial manual reload but later autoreloading works as expected.

Fixed without the save file + refresh hack in beta 2: https://github.com/roots/sage/releases/tag/9.0.0-beta.2

5 Likes

I merged the new beta 2 in my project and it’s still not working entirely as expected…

In Safari it works fine now and it injects style & script changes, however I don’t see any changed files in my terminal anymore, is that default behaviour?

But in Chrome (55.0.2883.95), the page keeps reloading every second with a BrowserSync message saying connected to BrowserSync.

Username:sage Username$ yarn run start
yarn run v0.18.1
$ webpack --hide-modules --watch --config assets/build/webpack.config.js 

Webpack is watching the files…


[BS] Proxying: http://example.dev
[BS] Access URLs:
 ----------------------------------
       Local: http://localhost:3000
    External: http://10.0.1.9:3000
 ----------------------------------
          UI: http://localhost:3001
 UI External: http://10.0.1.9:3001
 ----------------------------------
[BS] Watching files...

Anyone else having the same issue?
Thanks

I updated node to v7.4.0 and Yarn to v0.19.1 but the problem still persists in Chrome…
This is probably a BrowserSync specific issue:

Works like a charm! Great work! :slight_smile:

I was getting the same “bug” before I change the publicPath inside config.json to my “theme” name (which is not sage)

Would this have anything got to do with this Yarn warning i got when running ‘yarn’ initially …

fsevents@1.1.1: The platform “win32” is incompatible with this module" and incompatibility with “win32”

There’s some discourse about it this specific warning at https://github.com/yarnpkg/yarn/issues/1217 but would that have anything to do with why template changes are not displaying in the ‘yarn run start’ terminal?

Of course this is a Windows specific issue