search

asyncapi / website

AsyncAPI specification website
https://www.asyncapi.com
Apache License 2.0
488 stars 632 forks source link

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

Open bandantonio opened 3 weeks ago

bandantonio commented 3 weeks ago

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.

Error-minimized

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

dev-server-error

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

1-error

2nd error:

2-error

3rd error:

3-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:

🥦 Browser

Safari

👀 Have you checked for similar open issues?

🏢 Have you read the Contributing Guidelines?

Are you willing to work on this issue ?

Yes I am willing to submit a PR!

github-actions[bot] commented 3 weeks ago

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 commented 2 weeks ago

@bandantonio what npm and node version are you using?

bandantonio commented 2 weeks ago

@bandantonio what npm and node version are you using?

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

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