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!