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

bud
,
1

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}
   */
  app
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor'])
    .entry('react-app', ['@scripts/react-app'])
    .assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/wp-content/themes/wp-sage-10.8.2-starter-kit/public/');

  /**
   * 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}
   */
  app
    .setUrl('http://wordpress.loc:3000')
    .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}
   */
  app.wpjson
    .setSettings({
      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,
      },
    })
    .useTailwindColors()
    .useTailwindFontFamily()
    .useTailwindFontSize();
};

{
  "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.

2

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

3

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.

  app
    .setUrl('http://wordpress.loc:3000')
    .setProxyUrl('https://wordpress.loc') // Must be HTTPS when using Devilbox
    .watch([
      'resources/views', 
      'app', 
      'resources/scripts/react-components'
     ]);

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
4

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