BrowserSync does not inject styles on external url

sage
3

In Sage 9, Browsersync isn’t injecting the styles or scripts, Webpack’s hot module replacement (HMR) is handling that.

Can you provide us with any output from the browser console?

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3000/app/themes/sage/dist/1d92b23a1590dc7df7ee.hot-update.json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
Error: Manifest request to http://localhost:3000/app/themes/sage/dist/1d92b23a1590dc7df7ee.hot-update.json timed out.
[HMR] Update check failed: hotDownloadManifest/</request.onreadystatechange@http://192.168.0.13:3000/app/themes/sage/dist/scripts/main.js:40:22

It seems like the HMR client is unaware of the external URL as it is still calling for localhost:3000.

Related: roots/sage#1874, #1902

This is based on @QWp6t’s advice in the closed PR above (#1902):

Create the file resources/assets/config-local.json. This file will be ignored by Git.

Replace the following address with whatever IP Browsersync is using for external URL.

{
  "proxyUrl": "http://192.168.x.x:3000"
}

This will make the Browsersync external URL work for HMR, but now localhost:3000 will not.

Sidenote:

You might want to avoid using .local for your development TLD. If you are on a Mac, there could be a conflict with Bonjour which uses .local.

3 Likes