[BUG] LDE: Dev server fails to re-render a page after stopping

[bandantonio]

Describe the bug.

When working with documentation locally, the dev server refuses to render a page opened in the browser (except for the home page) after the server has been stopped and then restarted (via Ctrl + C).

When dev server fails, there are 3 errors showed (see screenshots below in the corresponding section)

Unhandled Runtime Error
Error: Text content does not match server-rendered HTML.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Unhandled Runtime Error
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

The tricky thing is that the error "window" can be closed by clicking the X in the upper right corner and the requested page will be shown in the browser. The error window will be minimized to the bottom left.

After that, you can navigate through the pages. But if you refresh a page, the error "window" will be back fullscreen.

Expected behavior

After being restarted, dev server renders any local page that is currently opened in the browser. No errors shown in the browser.

Screenshots

1st error (the same as in the full screenshot above):

2nd error:

3rd error:

How to Reproduce

1. npm i
2. npm run dev
3. After the server is running, navigate to any documentation page. For example, http://localhost:3000/docs/concepts. The page should be rendered properly.
4. Stop the dev server (Ctrl +C)
5. Refresh the browser page (the browser should show "Safari can't connect to the server")
6. npm run dev
7. Refresh the browser page and observe the error

7a. Close the error "window". Check that the page is shown and the error "window" gets minimized to the bottom left.
7b. Navigate through pages. Navigation should work properly.
7c. Refresh a page. The error "window" should be displayed in fullscreen again.

My setup:

• MacBook Pro (M1 Pro)
• macOS: Sequoia 15.0 (24A335)
• Safari Version 18.0 (20619.1.26.31.6)

🥦 Browser

Safari

👀 Have you checked for similar open issues?

• I checked and didn't find similar issue

🏢 Have you read the Contributing Guidelines?

• I have read the Contributing Guidelines

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[sambhavgupta0705]

@bandantonio what npm and node version are you using?

[bandantonio]

@bandantonio what npm and node version are you using?

@sambhavgupta0705 Currently, I'm on the following versions:

• npm - 10.7.0
• node - 20.15.0

Since I'm using nvm, switching between versions is not a problem at all.