# React refresh not working on Sage 10.8.2

**URL:** https://discourse.roots.io/t/react-refresh-not-working-on-sage-10-8-2/26811
**Category:** sage
**Tags:** sage10, webpack
**Created:** 2024-03-04T07:55:01Z
**Posts:** 3

## Post 1 by @pfkl-chia254 — 2024-03-04T07:55:01Z

Hello, I managed to get React and its relative linting to work. But somehow running on `bud dev` and saving new changes on the `.jsx` files does not trigger a hot reload and need to manually refresh to see changes. But, it works fine for `app.js` or any of the blade files.

However, every save from only the react files would trigger a log for each newly generated runtime file:

```
Fetch finished loading: GET "http://wordpress.loc:3000/wp-content/themes/wp-sage-10.8.2-starter-kit/public/runtime.372d02e6a62b6efe.hot-update.json".
__webpack_require__.hmrM	@	(index):1278
Promise.then (async)		
hotCheck	@	(index):562
check	@	client.js:58
window.bud.listeners.<computed>	@	client.js:130
eval	@	events.js:51
Events.onmessage	@	events.js:50
```

The runtime.372d02e6a62b6efe.hot-update.json file gives this response:

```
"use strict";
/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
self["webpackHotUpdate_roots_bud_sage"]("runtime",{},
/ ****** / function( __webpack_require__ ) { // webpackRuntimeModules
/ ****** / /* webpack/runtime/getFullHash */
/ ****** / !function() {
/ ****** / __webpack_require__.h = function() { return "3261a7749cfb76ee"; }
/ ****** / }();
/ ****** / 
/ ****** / }
);
```

Below are my file configs for more information:

package.json

```
{
  "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"
  }
}
```

bud.config.js

```
/**
 * 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();
};
```

Any help would be appreciated!

---

## Post 2 by @talss89 — 2024-03-05T10:53:40Z

Hi @pfkl-chia254,

I’m not a React user myself, but have you checked out [this section in the `bud-react` docs](https://bud.js.org/extensions/bud-react#configuring-react-refresh)?

There seems to be a few caveats listed there.

Tom

---

## Post 3 by @pfkl-chia254 — 2024-03-06T03:17:57Z

Hi @talss89,

I did install the devDependencies @roots/bud-react and @roots/bud-swc to [add React](https://bud.js.org/learn/getting-started/adding-react) into my Sage project. This is how I got React to work in the first place (I ignored @roots/bud-typescript since I don’t use typescript)

If I install @roots/bud-swc, it mentioned that “react-refresh is automatically enabled when using [@roots/bud-swc](https://bud.js.org/extensions/bud-swc).” but that does not seem to be case. Even with manually enabling using `app.react.refresh.enable()` from the bud config file does not seem to have any effect.

You can see from my package.json and bud.config.js files above