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

sage
, ,
1

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:

2

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