[bug] No error overlay

[Striffly]

Agreement

• This is not a duplicate of an existing issue
• I have read the guidelines for Contributing to Roots Projects
• This is not a personal support request that should be posted on the Roots Discourse community

Expected Behavior

When an error occurs, there is no overlay that appears on the front.

Actual Behavior

No overlay

Steps To Reproduce

1. Create an error
2. yarn watch
3. Go to dev URL

version

@roots/bud/5.4.0

What package manager are you using?

yarn classic

version

1.22.17

Are you using pnpm?

• yes
• no

Logs

No response

Configuration

No response

Relevant .budfiles

// bud.config.js
  app
    .override((webpackConf) => ({
      ...webpackConf,
      devServer:  {
        client: {
          overlay: true,
        },
      },
    }))

Same result with default config

Maybe I'm wrong, but when I look at souce files I can see that this configuration is used for bud-server :

    const instance = {
        path: '/__bud/hmr',
        timeout: 20 * 1000,
        overlay: true,
        reload: false,
        log: false,
        warn: true,
        name: '',
        autoConnect: false,
        overlayWarnings: false,
        ...querystring.parse(query.slice(1)),
    };

[kellymears]

can confirm this is a problem. bud doesn't use devServer, we use the underlying middleware (whm).

the problem isn't that the overlay is disabled/enabled in whm or in the config, it's that hmr updates with errors point to a non-existent json path and 404. so, even if the overlay were enabled it would never get the message that something went wrong. the same thing happens if you enable react-refresh overlay (or anything else that listens for hot reload events with errors).

I have to look back through the whm issues to see what is relevant and get us fixed up. last i looked at this problem we weren't alone in having issues with whm.but, that was some time ago.

[Striffly]

Thanks for your comment !
After looking at whm repo, I find this relevant issue : webpack-contrib/webpack-hot-middleware#392
And the related fix : webpack-contrib/webpack-hot-middleware#397
The project seems to be at a standstill at the moment, maybe forking the project and apply the PR can fix this issue ?

[Striffly]

https://github.com/lukeapage/webpack-hot-middleware i can confirm that this fix work
In package.json :

  "resolutions": {
    "webpack-hot-middleware": "lukeapage/webpack-hot-middleware#master"
  }

Errors overlay is still not shown if first build (after launching yarn start) has errors, that was the case with Sage 9

[kellymears]

i'll visit this after we've gotten SSL in place for dev server.

i think it would be really great if HMR could work with esbuild as well. so, there are a couple other things i'd want to look at with whm beyond the scope of this one issue.

looks like npm users can use https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides in the meantime? i'm not sure because i don't use npm but it seems the same to me as the resolutions field?

[kellymears]

This will be fixed by:

• fix: indicator/hmr errors #1248

And then ultimately replaced by our own version:

• wip: bud-client #1244

[thiervoj]

I'm having a similar issue using bud 5.8.7 with Sage 10.1.7.

When I run yarn dev and an error is present in my code (whether it's css or js files, so whether it's caused by StyleLint or ESLint), the error shows correctly in my command line interface, but nothing shows on my proxied URL.

Things to note :

• I'm using bud on Windows, through WSL
• The <bud-error> tag stays empty
• This happens every time, whether I add --overlay to the bud dev command or not
• The following warning shows in my console (which is the same error I see in my CLI, but is never appended to <bud-error>) :

• Rolling back to bud@5.7.7 fixes the problem

[retlehs]

@thiervoj thanks for the report! we've confirmed this bug on our end. please follow #1463 for updates