vike The error page breaks HMR

Description

How to reproduce :

Create a Vike project using bati.
In pages/index.tsx, add a space in the <h1> tag (e.g., change <h1> to <h 1>) to trigger an error.

It looks good; all errors are correctly displayed.

Revert <h 1> back to <h1>.
Do the same for the <Counter> component (e.g., change it to <Coun ter>).

It would be great if the error could be handled in the same way, using Vite's built-in error page.

Jun 18 '25 08:06 fortezhuo

https://github.com/vikejs/vike/issues/1934#issuecomment-2983206742

Jun 18 '25 08:06 brillout

This issue is that the error page breaks HMR: https://github.com/vikejs/vike/issues/1934#issuecomment-2983240642

Jun 18 '25 08:06 brillout

@fortezhuo I'll have a look at it.

Jun 18 '25 08:06 brillout

Thank you. One thing that's also quite disruptive is that—even though the error is correctly handled by Vite's built-in error page—within a few milliseconds, it sometimes gets redirected again to the custom error page or an "Internal Server Error" screen.

And it's quite difficult for me to reproduce the issue, as it happens intermittently and usually occurs when using more complex components or hooks.

Jun 18 '25 08:06 fortezhuo

I'll have a look at it.

ETA next week.

Jul 02 '25 10:07 brillout

While Vike does support custom error pages—which is a nice feature—during development, developers typically expect that once they fix a bug, the page will automatically recover and render normally again.

Fixed (https://github.com/vikejs/vike/pull/2700) & pre-released as 0.4.239-commit-59f1017.

But note that while exploring a bug fix, I've stumbled upon other HMR issues for which I couldn't find a solution (they seem either very hard to solve or a Vite issue).

@fortezhuo Let me know whether the DX works out for you after this fix.

Sep 08 '25 22:09 brillout

After try some scenario

export default function Page() {

/
  return (
    <div>
      <div>Hello World</div>
    </div>
  )
}

The overlay error and HMR work correctly:

But if I introduce a variable error:

export default function Page() {
  consoles
  return (
    <div>
      <div>Hello World</div>
    </div>
  )
}

HMR breaks and I get this error in the console:

Uncaught ReferenceError: consoles is not defined
    at Page (+Page.tsx:2:3)
    at Object.react_stack_bottom_frame (vike-react___interna…v=3c4f0a43:17425:20)
    at renderWithHooks (vike-react___interna…?v=3c4f0a43:4207:24)
    at updateFunctionComponent (vike-react___interna…?v=3c4f0a43:6620:21)
    at beginWork (vike-react___interna…?v=3c4f0a43:7655:20)
    at runWithFiberInDEV (vike-react___interna…?v=3c4f0a43:1486:72)
    at performUnitOfWork (vike-react___interna…v=3c4f0a43:10869:98)
    at workLoopSync (vike-react___interna…v=3c4f0a43:10729:43)
    at renderRootSync (vike-react___interna…v=3c4f0a43:10712:13)
    at performWorkOnRoot (vike-react___interna…v=3c4f0a43:10360:46)

Sep 09 '25 10:09 fortezhuo

Yea, I was actually thinking this morning that runtime errors (not syntax errors) aren't shown in error overlays. I'll have a look at this.

Sep 09 '25 11:09 brillout

Vite doesn't support that yet, alhtough it's on the team's radar.

https://github.com/vitejs/vite/issues/2076
https://github.com/vitejs/vite/pull/20526#issuecomment-3166299993

Sep 09 '25 12:09 brillout