-
-
Notifications
You must be signed in to change notification settings - Fork 667
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[BUG] LDE: Dev server fails to re-render a page after stopping #3260
Comments
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. |
@bandantonio what npm and node version are you using? |
@sambhavgupta0705 Currently, I'm on the following versions:
Since I'm using |
@bandantonio This issue was resolved by the PR #3262 |
@anshgoyalevil Thank you for mentioning the fix. The hydration errors gone but another intermittent error related to rendering Mermaid diagrams is still here (see below). So, my fix from #3323 needs to be merged as well. Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at MermaidDiagram (webpack-internal:///./components/MDX/MDX.tsx:113:31)
at pre (webpack-internal:///./components/MDX/MDX.tsx:360:39)
at MDXContent
at article
at div
at div
at main
at div
at div
at div
at DocsLayout (webpack-internal:///./components/layout/DocsLayout.tsx:96:27)
at div
at Layout (webpack-internal:///./components/layout/Layout.tsx:30:23)
at div
at AlgoliaSearch (webpack-internal:///./components/AlgoliaSearch.tsx:192:30)
at MyApp (webpack-internal:///./pages/_app.tsx:41:22)
at AppWithTranslation (/asyncapi-website/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:73:22)
at StyleRegistry (/asyncapi-website/node_modules/styled-jsx/dist/index/index.js:449:36)
at eU (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:8:20468)
at eH (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:1788)
at eJ (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:3091)
at div
at e9 (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:26:761)
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at MermaidDiagram (webpack-internal:///./components/MDX/MDX.tsx:113:31)
at pre (webpack-internal:///./components/MDX/MDX.tsx:360:39)
at MDXContent
at article
at div
at div
at main
at div
at div
at div
at DocsLayout (webpack-internal:///./components/layout/DocsLayout.tsx:96:27)
at div
at Layout (webpack-internal:///./components/layout/Layout.tsx:30:23)
at div
at AlgoliaSearch (webpack-internal:///./components/AlgoliaSearch.tsx:192:30)
at MyApp (webpack-internal:///./pages/_app.tsx:41:22)
at AppWithTranslation (/asyncapi-website/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:73:22)
at StyleRegistry (/asyncapi-website/node_modules/styled-jsx/dist/index/index.js:449:36)
at eU (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:8:20468)
at eH (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:1788)
at eJ (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:3091)
at div
at e9 (/asyncapi-website/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:26:761) |
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)
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
npm i
npm run dev
http://localhost:3000/docs/concepts
. The page should be rendered properly.npm run dev
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!
The text was updated successfully, but these errors were encountered: