Can't get HMR working (browser console errors __hmr 404)

bud
,
1

Hello there,

I have problems getting HMR to work. I’m new to the Roots ecosystem, so guess I’m missing something here…

Here’s how I (tried) to install Wordpress with Sage:

  1. used trellis-cli to setup a new project to mytest
  2. navigated to mytest/site/web/app/themes to run composer create-project roots/sage mysage
  3. composer require roots/acorn
  4. trellis up
  5. activated mysage theme
  6. in mysage run yarn dev

Wordpress seems to work fine. Changes to theme files are reflected after a manual reload.

Hot reload is not working though. When I open the browser console, I can see errors popping up every few seconds:
GET http://mytest.test/__hmr net::ERR_ABORTED 404 (Not Found)

I guess I have misconfigured something here? Can anyone help me to dig in the right places?

Thank you very much,
Hans

2

What version of bud are you using? You may try to upgrade to 5.7.6.
(In your theme folder, in package.json change all occurences of 5.7.x to 5.7.6. Then run yarn)

1 Like
3

Seems like I’m already on 5.76 this is what my package.json looks like

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @wordpress/browserslist-config"
  ],
  "engines": {
    "node": ">=16.0.0"
  },
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "npm run translate:pot && npm run translate:js",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print"
  },
  "devDependencies": {
    "@roots/bud": "5.7.6",
    "@roots/bud-tailwindcss": "5.7.6",
    "@roots/sage": "5.7.6"
  }
}
4

Nevermind… it’s working now. While browsing through the configuration files (package.json, theme.json, etc.) I revisited bud.config.js and tried connecting to the IP instead of the proxy.

    /**
     * Target URL to be proxied by the dev server.
     *
     * This should be the URL you use to visit your local development server.
     */
    .proxy("http://mytest.test")

    /**
     * Development URL to be used in the browser.
     */
    .serve("http://0.0.0.0:80");

Browsing http://0.0.0.0:3000 HMR is working!

Thank you

3 Likes
5

Hi,

When I use the default serve settings it reloads my changes by scss but changes in Typescript it gives me an notice Nothing hot updated.
I installed browsersync but when I open the localhost URL it gives me HMR errors.

How can I fix this?

Thanks

6

@Gydo_Verbeek this topic is solved, please open a new one