Roots Discourse

Webpack hot updating scss, but not js? (Sage 9)

I’m new to Sage and having trouble getting javascript changes to hot update. I’m getting the following browser warnings (chrome, safari) whenever a js file is changed, followed by a full refresh of the page:

08%20PM

This happens on fresh installs of Sage 9 on both my local OSX+Apache virtualhost setup as well as on Trellis, so it’s probably caused by something dumb I’m overlooking. Otherwise everything seems to be working fine; scss updates work without a full reload.

Here is my config.json:

{                                                                               
  "entry": {
    "main": [
      "./scripts/main.js",
      "./styles/main.scss"
    ],
    "customizer": [
      "./scripts/customizer.js"
    ]
  },
  "publicPath": "/wp-content/themes/sage",
  "devUrl": "http://site.test",
  "proxyUrl": "http://localhost:3000",
  "cacheBusting": "[name]_[hash:8]",
  "watch": [
    "app/**/*.php",
    "config/**/*.php",
    "resources/views/**/*.php"
  ]

And my common.js:

export default {                                                                
  init() {
    // JavaScript to be fired on all pages
    console.log("hello world");
  },  
  finalize() {
    // JavaScript to be fired on all pages, after page specific JS is fired
  },  
};

Thanks in advance! :slightly_smiling_face:

I had the same problem and solved it by:
Check that the publicPath is correct
Also if you have changed the proxyUrl you need to change it in both config.json & config.js

1 Like