HMR not working – ChunkLoadError

Hi there, I’m new to Sage and am trying to get my dev environment totally set up to include hot module replacement (HMR) through yarn dev

When I run yarn dev everything seems to be working and as I make changes to template files, etc., I can hit save which pops off a refreshed build, but the browser does not refresh.

Here’s what I get after running yarn dev:

And here’s my bud.config file:

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

   * Set public path
   * @see {@link}

   * Development server settings
   * @see {@link}
   * @see {@link}
   * @see {@link}
    .watch(['resources/views', 'app']);
   * Generate WordPress `theme.json`
   * @note This overwrites `theme.json` on every build.
   * @see {@link}
   * @see {@link}
    .set('settings.color.custom', false)
    .set('settings.color.customDuotone', false)
    .set('settings.color.customGradient', false)
    .set('settings.color.defaultDuotone', false)
    .set('settings.color.defaultGradients', false)
    .set('settings.color.defaultPalette', false)
    .set('settings.color.duotone', [])
    .set('settings.custom.spacing', {})
    .set('settings.custom.typography.font-size', {})
    .set('settings.custom.typography.line-height', {})
    .set('settings.spacing.padding', true)
    .set('settings.spacing.units', ['px', '%', 'em', 'rem', 'vw', 'vh'])
    .set('settings.typography.customFontSize', false)

Am I missing something? You can see I tried changing the public path, and I’ve tried various iterations of proxy, serve, and url, but no luck. When yarn dev is running, I get the following in the console:

If I open this…

…I get a page not found error through Wordpress.

However if I use this…

…then I can see the output of the file. Is this a Sage/config issue?
Or is it maybe an issue with something like my vhost setup in MacOS?

It’s been a joy to use Sage but I really want to get HRM working so I can see Tailwind update live as I’m building.

Yes, I saw this post:

But, I have a sneaking suspicion that the order of operations (yarn build/dev/clean) may be the issue? Even if I use localhost as my URL or proxy setting still results in the ChunkLoadError.

Can you confirm that you’re visiting http://localhost:3000/, the dev server URL, and not http://mlmwp.test?

Yes, and if I use http://localhost:3000 the error goes away, but the browser is still not auto-refreshing.

When running yarn dev you always want to visit the dev server URL

What specifically are you changing in the template files?

What about making a simple change to app.css, like body { background: red; }?

If I do that and hit save, it auto-builds successfully but the browser doesn’t refresh. I can see the Webpack script in the footer.

What’s the best way to troubleshoot this through Bud?

Also check the network tab in Chrome Developer Tools, are requests happening and are they failing (e.g. because of CORS)?

Ok, it seems like we had a port conflict for some reason. I updated my port # to localhost:3131 and did the same in bud.config and we’re in business!

1 Like