Browsersync web UI doesn't work due to browser-sync-ui bug

[pvaladez]

Expected behavior

Should be able to use Browsersync web UI at localhost:3002 after issuing stencil start

Actual behavior

UI fails to load properly. The issue is described in full detail here: https://github.com/BrowserSync/browser-sync/issues/1917

Patch/Fix Described in Above Mentioned Issue

This issue is easy to patch or fix by upgrading dependencies of browser-sync-ui. The patch and upgrade process are described in this comment: https://github.com/BrowserSync/browser-sync/issues/1917#issuecomment-968318013

Steps to reproduce behavior

• Install stencil-cli: npm install -g @bigcommerce/[email protected] or npm install -g @bigcommerce/[email protected] (what I'm running now and was able to fix by patching browser-sync-ui)
• Start Stencil: stencil start
• Open the Browsersync UI in browser: the link is displayed in your console by stencil, but it's probably http://localhost:3002

Environment

Stencil-cli version stencil --version: any version... but I've tested versions 3.6.0 to 3.9.1

Node version node -v: 12.22.3

NPM version npm -v: 6.14.13

OS: Tested native Windows 10 and WSL2 Ubuntu 20.04

[aadilali]

I am facing the same issue on windows 10, how you apply patch @pvaladez ?

[pvaladez]

@aadilali The process is described in this comment: https://github.com/BrowserSync/browser-sync/issues/1917#issuecomment-968318013

But I'll try to lay out the process in my own words:

1. Find the directory where your global npm packages are installed.
   • You can find this by running npm list -g --depth 0
   • On Windows the directory is probably C:\Program Files\nodejs
2. Within your nodejs folder navigate to and open this file in an editor: node_modules\@bigcommerce\stencil-cli\node_modules\browser-sync-ui\public\js\app.js
   • The full path is probably C:\Program Files\nodejs\node_modules\@bigcommerce\stencil-cli\node_modules\browser-sync-ui\public\js
3. In app.js you will see a bunch of minified js. Do a search in app.js for $$lowercase:
4. You will see some character after $$lowercase: followed by a comma
   • In my case it was $$lowercase:f,
5. Replace $$lowercase:f, with $$lowercase:f,lowercase:f,
   • Of course if you have a different character following $$lowercase: then use that character in place of f
6. Save the file

That's it... the browserSync web ui should now work correctly!

And finally here are some other tips on patching an npm package: https://www.mariokandut.com/how-to-patch-an-npm-dependency/

[pvaladez]

Closing as this is fixed on newer versions.