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:
- Run
bud dev, it builds successfully. - Open page containing my proxied site
- Change something in js/scss to emit a hot-update.
- Rebuilds successfully, changes applied.
- Manual refresh page using Cmd + R in browser.
- Console error:
Uncaught TypeError: globalThis.webpackHotUpdaterhfoundation is not a function at main.03c2f1cc8256e1e2d053.hot-update.js:1:25 - 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": [
">0.5%",
"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) => {
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
*/
.when(
app.isProduction,
() => 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
*/
.setPublicPath('/wp-content/themes/rhfoundation/dist/')
/**
* These files will trigger a full page reload
* when modified.
*/
.watch('./includes/**/*')
/**
* Target URL to be proxied by the dev server.
*
* This should be the URL you use to visit your local development server.
*/
.proxy('http://foundation.local')
/**
* Development URL to be used in the browser.
*/
.serve('http://foundation.local:3000');
app.minimize()
app.imagemin
/**
* 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.