useLayoutEffect

[gabazureus]

Summary

As a user of TinaCMS, I encounter an error during server-side rendering (SSR) related to the use of useLayoutEffect within components that are rendered.

Expected Results

• The application should not throw warnings related to the improper use of useLayoutEffect during SSR.
• Components should be appropriately rendered on both the server and client sides without mismatches or layout inconsistencies.

Notes

(node:3302707) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
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 Navbar (webpack-internal:///./components/layout/Navbar.tsx:34:17)
at div
at Layout (webpack-internal:///./components/layout/Layout.tsx:30:3)
at Page404
at MainLayout (webpack-internal:///./pages/_app.tsx:57:3)
at Site (webpack-internal:///./pages/_app.tsx:181:1)
at ae (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/styled-components/dist/styled-components.cjs.js:1:13282)
at StyleRegistry (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/styled-jsx/dist/index/index.js:449:36)
at eJ (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:8:22325)
at eI (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:1762)
at eH (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:3085)
at div
at eQ (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:26:742)
Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using

. See https://reactjs.org/link/warning-keys for more information.
at div
at LinkGroup (webpack-internal:///./components/layout/Footer.tsx:165:3)
at div
at div
at div
at div
at Footer (webpack-internal:///./components/layout/Footer.tsx:253:17)
at div
at Layout (webpack-internal:///./components/layout/Layout.tsx:30:3)
at Page404
at MainLayout (webpack-internal:///./pages/_app.tsx:57:3)
at Site (webpack-internal:///./pages/_app.tsx:181:1)
at ae (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/styled-components/dist/styled-components.cjs.js:1:13282)
at StyleRegistry (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/styled-jsx/dist/index/index.js:449:36)
at eJ (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:8:22325)
at eI (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:1762)
at eH (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:17:3085)
at div
at eQ (/home/pc/Projects/CompliAI/CompliAI/site/node_modules/next/dist/compiled/next-server/pages.runtime.dev.js:26:742)
⚠ Fast Refresh had to perform a full reload. Read more: https://nextjs.org/docs/messages/fast-refresh-reload

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.