# HMR issues after upgrading Bud to 6.24.0 **URL:** https://discourse.roots.io/t/hmr-issues-after-upgrading-bud-to-6-24-0/29290 **Category:** bud **Created:** 2025-02-22T01:01:39Z **Posts:** 9 ## Post 1 by @needle — 2025-02-22T01:01:40Z After updating to version 6.24.0 of Bud.js, the `bud dev` command is no longer picking up live CSS changes in my case. Running `npm run build` compiles everything as expected: ``` bud-example [2c9766e88566fb2d] ./dist │ │ app │ ◉ js/runtime.js ✔ 1.02 kB │ ◉ css/app.css ✔ 27 bytes │ ◉ js/app.js ✔ 395 bytes │ ╰ 1s 270ms 3 modules [0/3 modules cached] ``` But running `npm run dev` only compiles js, even when changes have been made to the scss files: ``` bud-example [acaec069b97dfc85] ./dist │ │ app │ ◉ js/runtime.js 48.96 kB │ ◉ js/app.js 144.39 kB │ ╰ 1s 380ms 87 modules [0/87 modules cached] Network › Proxy ┄ https://example.test/ › Dev ┄ http://localhost:3000/ ┄ http://10.0.0.234:3000/ ``` My minimal bud.config: ``` export default async (app) => { app .setPath({ "@src": `src`, "@modules": `node_modules`, "@scripts": `@src/scripts`, "@styles": `@src/scss`, "@dist": `dist`, }) .alias({ "@modules": app.path(`@modules`), "@scripts": app.path(`@scripts`), "@styles": app.path(`@styles`), }) /** * Application entrypoints. * * @see {@link https://bud.js.org/docs/bud.entry} * @see {@link https://bud.js.org/docs/bud.assets} */ .entry({ app: ["@scripts/app", "@styles/style"], }) /** * Reload when editing PHP and SCSS files */ .watch(["@src/**/*", app.path("**/*.php")]) /** * Set your SSL_CERT AND SSL_KEY paths in .env.local in root site folder * * @see {@link https://bud.js.org/reference/bud.setUrl} * @see {@link https://bud.js.org/reference/bud.setProxyUrl} * @see {@link https://bud.js.org/reference/bud.watch} */ .setUrl("http://localhost:3000") .setProxyUrl("https://example.test"); }; ``` And the project structure: ``` ├── bud.config.mjs ├── dist/ │ ├── entrypoints.json │ ├── js/ │ │ ├── app.js │ │ └── runtime.js │ └── manifest.json ├── index.php ├── package-lock.json ├── package.json └── src/ ├── scripts/ │ ├── app.js │ └── utils/ │ └── domReady.js └── scss/ └── style.scss ``` With `npm run dev` I would expect `css/app.css` to be rendered alongside the js - this was the case before I upgraded Bud.js. Why are styles now being ignored by the `dev` command? I am using the `@roots/bud-sass` package, and **I am using Bud on its own (no Sage)**. :eyes: :point_right: I have a [minimal reproducible repo here](https://github.com/templeman/bud-example) if anyone cares to test it. --- ## Post 2 by @needle — 2025-02-22T02:29:58Z Update: I thought this might be Sass-related, but it seems to be a more general HMR issue. Style changes aren’t being injected when using vanilla CSS either. I did notice that the old output for `npm run dev` included a “server” block the looks something like this: ``` ╭─ server │ ├─ proxy: https://example.test/ ├─ dev: http://localhost:3000/ │ ╰─ watching project sources (and 260 other files) ``` Whereas the new output on bud 6.24.0 looks like this (note the missing “watching project sources” bit): ``` Network › Proxy ┄ https://example.test/ › Dev ┄ http://localhost:3000/ ┄ http://10.0.0.234:3000/ ``` --- ## Post 3 by @ben — 2025-02-22T15:21:58Z Are you able to use the 6.23.x or any other prior releases without issues? bud.js won’t be receiving any further updates, so if a prior release works for you then I’d recommend sticking with that --- ## Post 4 by @needle — 2025-02-25T18:22:31Z Before attempting to upgrade I was on Bud 6.12.3 - `bud build` and `bud dev` were both working on that version. I was hoping to get to at least 6.16, which introduced css module support for scss. I’ve tried rolling back to 6.12.3, but now I’m facing issues there where I wasn’t before. Here is how I attempted to rollback: - `npm uninstall` for all @roots packages - Run `npm cache clear -f` - Delete package-lock.json - `npm install @roots/bud@6.12.3 --save-dev` - `npm install @roots/bud-preset-wordpress@6.12.3 --save-dev` - `npm install @roots/bud-sass@6.12.3 --save-dev` - `npm run clean`. This finishes fine. - `npm run doctor`. This never finishes, but gives this output: ``` Checking versions of core packages ✔ @roots/bud-api meets requirements (required: 6.12.3, installed: 6.12.3) ✔ @roots/bud-build meets requirements (required: 6.12.3, installed: 6.12.3) ✔ @roots/bud-cache meets requirements (required: 6.12.3, installed: 6.12.3) ✔ @roots/bud-dashboard meets requirements (required: 6.12.3, installed: 6.12.3) ✔ @roots/bud-extensions meets requirements (required: 6.12.3, installed: 6.12.3) ✔ @roots/bud-framework meets requirements (required: 6.12.3, installed: 6.12.3) ✔ @roots/bud-hooks meets requirements (required: 6.12.3, installed: 6.12.3) ✔ @roots/bud-server meets requirements (required: 6.12.3, installed: 6.12.3) ✔ @roots/bud-support meets requirements (required: 6.12.3, installed: 6.12.3) ``` Things are looking promising. Run `npm run build` and the build finishes. I can see the dev site at [https://example.test](https://example.test). But now `npm run dev` results in the `Cannot read properties of null (reading 'useState')` error: ``` > wordpress-npm-build@0.0.1 dev > bud dev Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. ERROR Cannot read properties of null (reading 'useState') node_modules/@roots/bud-dashboard/node_modules/react/cjs/react.development.js:1622:21 1619: } 1620: function useState(initialState) { 1621: var dispatcher = resolveDispatcher(); 1622: return dispatcher.useState(initialState); 1623: } 1624: function useReducer(reducer, initialArg, init) { 1625: var dispatcher = resolveDispatcher(); - Object.useState (node_modules/@roots/bud-dashboard/node_modules/react/cjs/react.development.js:1622:21) - TTYApp (node_modules/@roots/bud-dashboard/lib/dashboard/input.js:6:61) - renderWithHooks (node_modules/react-reconciler/cjs/react-reconciler.development.js:6659:18) - mountIndeterminateComponent (node_modules/react-reconciler/cjs/react-reconciler.development.js:11276:13) - beginWork (node_modules/react-reconciler/cjs/react-reconciler.development.js:12799:16) - beginWork$1 (node_modules/react-reconciler/cjs/react-reconciler.development.js:19608:14) - performUnitOfWork (node_modules/react-reconciler/cjs/react-reconciler.development.js:18742:12) - workLoopSync (node_modules/react-reconciler/cjs/react-reconciler.development.js:18648:5) - renderRootSync (node_modules/react-reconciler/cjs/react-reconciler.development.js:18616:7) - performSyncWorkOnRoot (node_modules/react-reconciler/cjs/react-reconciler.development.js:18232:20) - flushSyncCallbacks (node_modules/react-reconciler/cjs/react-reconciler.development.js:2936:22) - flushSyncCallbacksOnlyInLegacyMode (node_modules/react-reconciler/cjs/react-reconciler.development.js:2915:5) - scheduleUpdateOnFiber (node_modules/react-reconciler/cjs/react-reconciler.development.js:17685:7) - Object.updateContainer (node_modules/react-reconciler/cjs/react-reconciler.development.js:21061:5) - Ink.render (node_modules/ink/build/ink.js:226:20) - Module.render (node_modules/ink/build/render.js:19:14) - Dashboard.render (node_modules/@roots/bud-dashboard/lib/service.js:60:17) - async Dashboard.update (node_modules/@roots/bud-dashboard/lib/service.js:37:13) - async Compiler.onStats (node_modules/@roots/bud-compiler/lib/compiler.service.js:111:9) - (async node_modules/@roots/bud-compiler/lib/compiler.service.js:49:13) ``` Running `npm ls react` gives this output: ``` ├─┬ @roots/bud-preset-wordpress@6.12.3 │ ├─┬ @roots/bud-react@6.12.3 │ │ ├─┬ react-dom@18.2.0 │ │ │ └── react@18.3.1 deduped │ │ └── react@18.2.0 │ ├─┬ @roots/bud-support@6.12.3 │ │ └── react@18.2.0 │ └─┬ @roots/wordpress-hmr@6.12.3 │ └── react@18.2.0 └─┬ @roots/bud@6.12.3 ├─┬ @roots/bud-compiler@6.12.3 │ └── react@18.2.0 ├─┬ @roots/bud-dashboard@6.12.3 │ └── react@18.2.0 ├─┬ ink-spinner@5.0.0 │ └── react@18.3.1 ├─┬ ink-text-input@5.0.1 │ └── react@18.3.1 deduped ├─┬ ink@4.2.0 │ ├─┬ react-reconciler@0.29.2 │ │ └── react@18.3.1 deduped │ └── react@18.3.1 deduped └── react@18.2.0 ``` Are these mismatched react dependencies at fault? How might I go about troubleshooting this? At this point I’d be happy to have a working version of Bud, regardless of version. --- ## Post 5 by @ben — 2025-02-25T18:40:31Z Is there a reason why you’re trying to use Bud v6.12.x and v6.16.x instead of newer versions? > [@ben](#): > > Are you able to use the 6.23.x or any other prior releases without issues? > [@needle](#): > > ``` > Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: > ``` The error message you showed here is mentioned in [[bug] Cannot read properties of null (reading 'useState') · Issue #2581 · roots/bud · GitHub](https://github.com/roots/bud/issues/2581), FYI > [@needle](#): > > At this point I’d be happy to have a working version of Bud, regardless of version. Help me understand why you can’t use v6.23.x? I also don’t understand why you can’t revert back to your working v6.12.3 version? --- ## Post 6 by @needle — 2025-02-25T19:01:42Z Sorry, I can clarify. I was on Bud v6.12 and it was working, but I wanted to upgrade since I needed css module support for scss (introduced in 6.16). I first tried bumping Bud to the latest, 6.24, which almost works but is missing HMR (thus the original post). I have the same issue (missing HMR) on the other recent versions that I’ve tried (v6.23.x and v6.22.x, so far). When I couldn’t get HMR working with the recent versions, I attempted to roll back to my original version, 6.12.3. Now `npm run dev` is failing on that version with the `Cannot read properties of null (reading 'useState')` error mentioned above. I have reviewed the [[bug] Cannot read properties of null (reading 'useState') · Issue #2581 · roots/bud · GitHub](https://github.com/roots/bud/issues/2581) issue, but it recommends adding the `--no-dashboard` flag. When I do this, I get an error: `Unknown Syntax Error: Unsupported option name ("--no-dashboard"). ` The other recommendation is to upgrade Bud to 6.22 or greater, which puts me back where I was with no HMR. In short, no versions of Bud are fully functional for me now. I feel like I’m close to having 6.24 working, but I don’t know how best to troubleshoot the missing HMR. --- ## Post 7 by @ben — 2025-02-25T20:57:19Z > [@needle](#): > > :eyes: :point_right: I have a [minimal reproducible repo here](https://github.com/templeman/bud-example) if anyone cares to test it. CSS changes are being compiled for me when I modify the stylesheet with the dev server running > [@needle](#): > > But running `npm run dev` only compiles js, even when changes have been made to the scss files: The dev server never compiles a CSS file, it’s injected via JS --- ## Post 8 by @needle — 2025-02-25T21:44:20Z I’ve found the culprit. > [@ben](#): > > The dev server never compiles a CSS file, it’s injected via JS That gets at the heart of it - JS was broken and thus everything else was as well. The tricky thing for my brain was the JS was failing silently - no terminal errors, no console errors. Trying again with Bud v6.24.0, once I realized that js wasn’t loading properly it led me to [this discourse post](https://discourse.roots.io/t/bud-compiled-js-different-after-updating-to-6-14-3/25767) regarding runtime chunks. Temporarily setting `bud.runtime(false)` in my bud.config as indicated in that solution has everything running again - JS build, HMR, the whole shebang. Definitely an oversight on my part, since this was flagged as a potentially breaking change in the 6.13.1 release. In my defense I think I missed it while reviewing the changes between 6.12.x and 6.24.x because for some reason 6.13 is missing from the releases menu over at [https://bud.js.org/](https://bud.js.org/). Since I’m not using Sage in this project I will look at how to update my `wp_enqueue` calls to use the runtime, as outlined in that post. Many thanks @ben for taking a look, I really appreciate it! ![Screenshot 2025-02-25 at 1.15.44 PM](https://discourse.roots.io/uploads/default/original/2X/c/c9b3823357f8ba6621cb9dac894106ebc30c03cf.png) --- ## Post 9 by @ben — 2025-02-25T21:55:33Z Nice! I’m glad you’re sorted!