@roots/bud-react or @roots/bud-swc v6.20.0 does not trigger react-refresh or hot reloading

I have installed React following this page and it works fine except for react-refresh. Even though the documentation states that with SWC, it is automatically enabled.

I also tried to manually enable it using bud.react.refresh.enable() from the bud.config.js and it still did not work for my Sage project (v10.8.2).

Below is my bud config and package.json file:

 * Compiler configuration
 * @see {@link https://roots.io/docs/sage sage documentation}
 * @see {@link https://bud.js.org/guides/configure bud.js configuration guide}
 * @type {import('@roots/bud').Config}
export default async (app) => {
   * Application assets & entrypoints
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .entry('react-app', ['@scripts/react-app'])

   * Set public path
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}

   * Development server settings
   * @see {@link https://bud.js.org/docs/bud.setUrl}
   * @see {@link https://bud.js.org/docs/bud.setProxyUrl}
   * @see {@link https://bud.js.org/docs/bud.watch}
    .setProxyUrl('https://wordpress.loc') // Must be HTTPS when using Devilbox
    .watch(['resources/views', 'app']);

   * Generate WordPress `theme.json`
   * @note This overwrites `theme.json` on every build.
   * @see {@link https://bud.js.org/extensions/sage/theme.json}
   * @see {@link https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json}
      color: {
        custom: false,
        customDuotone: false,
        customGradient: false,
        defaultDuotone: false,
        defaultGradients: false,
        defaultPalette: false,
        duotone: [],
      custom: {
        spacing: {},
        typography: {
          'font-size': {},
          'line-height': {},
      spacing: {
        padding: true,
        units: ['px', '%', 'em', 'rem', 'vw', 'vh'],
      typography: {
        customFontSize: false,
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  "engines": {
    "node": ">=16.0.0"
  "type": "module",
  "scripts": {
    "dev": "bud dev",
    "build": "yarn clean-bud && yarn build:dev",
    "build:dev": "bud build --clean",
    "build:old": "bud build",
    "clean-bud": "bud clean",
    "translate": "yarn translate:pot && yarn translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"app,resources\"",
    "translate:update": "wp i18n update-po ./resources/lang/sage.pot ./resources/lang/*.po",
    "translate:compile": "yarn translate:mo && yarn translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  "devDependencies": {
    "@roots/bud": "6.20.0",
    "@roots/bud-eslint": "6.20.0",
    "@roots/bud-react": "6.20.0",
    "@roots/bud-sass": "6.20.0",
    "@roots/bud-swc": "6.20.0",
    "@roots/bud-tailwindcss": "6.20.0",
    "@roots/eslint-config": "6.20.0",
    "@roots/sage": "6.20.0"
  "volta": {
    "node": "18.19.1",
    "yarn": "3.8.0"
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"

Anything I’m missing? Hot reloading works for the normal JS files and blade files when saving changes. Webpack might be referencing the wrong build file for the enqueued ‘react-app’ file perhaps.

Can you provide a minimal reproduction with the actual JS that demonstrates what isn’t working?

I’m not sure if this is the solution but I got the hot reloading to work by specifying the folder path of my React components in the watch method from the bud.config.js file.

    .setProxyUrl('https://wordpress.loc') // Must be HTTPS when using Devilbox

I never specified this path on an older versions of Sage project v10.4.1 that had React installed under @roots/sage@6.7.3 or @roots/bud-preset-wordpress@6.7.3 .

And the documentation said it should be enabled by default when @roots/bud-react and @roots/bud-swc is installed. Which was the case in the older Sage project, no configuration was required for the react refresh.

1 Like

I found this to be true as well and opened up an issue on the repo.