React refresh not working on Sage 10.8.2

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/".
__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 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 (
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (
/******/ function(__webpack_require__) { // webpackRuntimeModules
/******/ /* webpack/runtime/getFullHash */
/******/ !function() {
/******/ 	__webpack_require__.h = function() { return "3261a7749cfb76ee"; }
/******/ }();
/******/ }

Below are my file configs for more information:


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


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

   * Set public path
   * @see {@link}

   * Development server settings
   * @see {@link}
   * @see {@link}
   * @see {@link}
    .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}
   * @see {@link}
      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,

Any help would be appreciated!

Hi @pfkl-chia254,

I’m not a React user myself, but have you checked out this section in the bud-react docs?

There seems to be a few caveats listed there.


Hi @talss89,

I did install the devDependencies @roots/bud-react and @roots/bud-swc to add 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.” 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