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

**URL:** https://discourse.roots.io/t/roots-bud-react-or-roots-bud-swc-v6-20-0-does-not-trigger-react-refresh-or-hot-reloading/26827
**Category:** bud
**Tags:** webpack, sage10
**Created:** 2024-03-08T03:35:54Z
**Posts:** 4

## Post 1 by @pfkl-chia254 — 2024-03-08T03:35:54Z

I have installed React following this [page](https://bud.js.org/learn/getting-started/adding-react) 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.

---

## Post 2 by @ben — 2024-03-08T15:27:29Z

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

---

## Post 3 by @pfkl-chia254 — 2024-03-11T07:41:48Z

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.

---

## Post 4 by @joshf — 2024-04-11T15:15:23Z

> [@pfkl-chia254](#):
>
> 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

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

> <https://github.com/roots/bud/issues/2573>
>
> ### Agreement
> 
> - [X] This is not a duplicate of an existing issue
> - [X] I have r…ead the [guidelines for Contributing to Roots Projects](https://github.com/roots/.github/blob/master/CONTRIBUTING.md)
> - [X] This is not a personal support request that should be posted on the [Roots Discourse](https://discourse.roots.io/) community
> 
> ### Describe the issue
> 
> React doesn't refresh upon saving React components. However, it *does* work if you explicitly add the folder path of your React components to Bud's `watch` list.
> 
> For example:
> 
> ```
> bud.watch([
> 'resources/views', 
> 'app', 
> 'resources/scripts/react-components'
> ]);
> ```
> 
> Basically the exact post here: https://discourse.roots.io/t/roots-bud-react-or-roots-bud-swc-v6-20-0-does-not-trigger-react-refresh-or-hot-reloading/26827/3
> 
> ### Expected Behavior
> 
> Hot reloading should work. 😄 
> 
> ### Actual Behavior
> 
> Nothing.
> 
> ### Steps To Reproduce
> 
> 1. Add `@roots/bud-react` and `@roots/bud-swc` to a project.
> 1. Saving React components does not trigger refresh.
> 
> 
> ### version
> 
> 6.20.0
> 
> ### Logs
> 
> _No response_
> 
> ### Configuration
> 
> ```zsh
> export default async (app) => {
> app
> .entry({
> app: ['@scripts/app', '@styles/app'],
> })
> .assets(['images']);
> 
> app.setPublicPath('/wp-content/themes/whatever/public');
> 
> app
> .proxy('https://site.test')
> .watch([
> 'resources/views',
> 'app',
> 'resources/scripts/react-components/', // <-- Refresh works when this is added
> ]);
> };
> ```
> 
> 
> ### Relevant .budfiles
> 
> _No response_