Webpack HMR breaks after manual refresh

Hi there,

I’ve setup a base install of bud for WordPress theme build process. The bud build command works fine, however when I run bud dev I get the following issue:

  1. Run bud dev, it builds successfully.
  2. Open page containing my proxied site
  3. Change something in js/scss to emit a hot-update.
  4. Rebuilds successfully, changes applied.
  5. Manual refresh page using Cmd + R in browser.
  6. Console error: Uncaught TypeError: globalThis.webpackHotUpdaterhfoundation is not a function at main.03c2f1cc8256e1e2d053.hot-update.js:1:25
  7. All styling and js is broken

If i run bud clean and bud dev again it all works as normal, until I make a change and refresh the page. Everything breaks.

Here is my package.json file:

    "name": "rhfoundation",
    "private": true,
    "browserslist": {
        "production": [
            "not dead",
            "not op_mini all"
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
    "engines": {
        "node": ">=16.0.0"
    "scripts": {
        "dev": "npm run clean && bud dev",
        "build": "npm run clean && bud build",
        "clean": "bud clean"
    "devDependencies": {
        "@roots/bud": "^6.0.0",
        "@roots/bud-babel": "^6.0.0",
        "@roots/bud-imagemin": "^6.0.0",
        "@roots/bud-postcss": "^6.0.0",
        "@roots/bud-sass": "^6.0.0"

and here is my bud.config.js file:

module.exports = async (app) => {
         * Application entrypoints
         * Paths are relative to your resources directory
        .entry('main', ['./src/js/main.js', './src/scss/style.scss'])
         * If isProduction hash and minify files, else ifDev apply devtool
            () => app.hash().minimize(),
            () => app.devtool()

         * These files should be processed as part of the build
         * even if they are not explicitly imported in application assets.
        .assets(['./src/images', './src/fonts'])

         * Set public path so fonts, images etc. are referenced correctly

         * These files will trigger a full page reload
         * when modified.

         * Target URL to be proxied by the dev server.
         * This should be the URL you use to visit your local development server.

         * Development URL to be used in the browser.


         * Process jpeg assets
         * Default is a value of `auto`:
         *   --> `app.imagemin.encode('mozjpeg', 'auto')
        .encode('mozjpeg', {quality: 70})
        .encode('webp', {})
        .encode('png', {quality: 800})

It sounds like it may be related to this Webpack issue: Webpack 4. Uncaught ReferenceError: webpackHotUpdate is not defined · Issue #6693 · webpack/webpack · GitHub

How would I go about enabling multiStep: true for HMR while using bud?

Any advice would be greatly appreciated.

For additional context, there’s another similar webpack issue here: webpackHotUpdate currentUpdate is undefined · Discussion #14873 · webpack/webpack · GitHub

I’m using an M1 macbook, might it be related to that?

Based on that thread, if I change bud config to .runtime('single') I get a different console error after making a change and refreshing or navigating to another page:

Uncaught TypeError: Cannot set properties of undefined (setting './node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[13].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[13].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[13].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[13].use[4]!./src/scss/style.scss')
    at globalThis.webpackHotUpdaterhfoundation (jsonp chunk loading:45:1)
    at main.783cf65f3c25342ddc48.hot-update.js:2:43

Is it a problem with using scss?