Sage: Sage 10 master not injecting CSS or JS, older versions of Sage 10 from commits prior have the same issue suddenly

[alexanderscottgraham]

• [ x] I've read the guidelines for Contributing to Roots Projects
• [ x] This request isn't a duplicate of an existing issue
• [x ] I've read the docs and followed them (if applicable)
• [x ] This is not a personal support request that should be posted on the Roots Discourse community

Description

Download Sage 10 from master branch, run composer install && yarn, then yarn start. Blade templates reload on changes, but CSS or JS does not. You have to manually reload the page for changes.

Oddly enough, I pulled a theme I made ~5 months ago on an earlier version of Sage 10 that did refresh and work perfectly, but after running composer install && yarn on those older themes the issue still remains - I cannot inject CSS or JS changes.

Steps to reproduce

1. Download Sage 10
2. Run composer install && yarn then yarn start
3. Open index.blade.php and global.scss. Add some text to update the Blade and watch it refresh. Do the same for CSS or JS, watch how it doesn't inject. Check console after CSS does not inject.

Expected behavior: CSS and JS injects and reloads the page automatically

Actual behavior: CSS and JS does not inject, Blade injects fail after CSS fails, reloading fixes until next change then it repeats.

Reproduces how often: Every reload.

Versions

10.0.0-dev (master)

Additional information

Running Local by Flywheel, PHP 7.3+, Node 14, etc. Had no issues with this about 1-2 months ago.

Again, tried this issue with themes from ~5 months ago, and even though they have their own composer and package files with their own version (even tried removing the "^" latest modifier) the compiler (maybe Laravel Mix) is still broken.

I suspect there's a broken dependency along the way. I've tried for about 8 hours to correct my old/new themes with no results.

BrowserSync console error on CSS change before reload:

Uncaught TypeError: Cannot read property 'indexOf' of null
    at Object.e.splitUrl (browser-sync-client.js?v=2.26.12:9)
    at Object.e.pathFromUrl (browser-sync-client.js?v=2.26.12:9)
    at browser-sync-client.js?v=2.26.12:16
    at browser-sync-client.js?v=2.26.12:9
    at Array.forEach (<anonymous>)
    at Object.e.pickBestMatch (browser-sync-client.js?v=2.26.12:9)
    at A (browser-sync-client.js?v=2.26.12:16)
    at browser-sync-client.js?v=2.26.12:16
    at e.project (browser-sync-client.js?v=2.26.12:15)
    at e._tryNext (browser-sync-client.js?v=2.26.12:9)

Unsure if related, but also in console:
DevTools failed to load SourceMap: Could not load content for http://localhost:3000/manifest.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

[alexanderscottgraham]

The issue is Browser-Sync, specifically any version higher than 2.21.0. From what I found, it has to do with an empty <link> tag in the head that's used to inject CSS and JS (not seeing that in Sage, might be a different but related issue?)

Went back on the various themes I built this year that also stopped working, ran yarn remove browser-sync and then yarn add [email protected] and they all worked great as originally intended 👍!

In your package.json, line ~31ish, make sure to have this line exactly: "browser-sync": "2.21.0",