useLayoutEffect does nothing on the server
anfinil opened this issue · comments
During SSR have this warning:
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.
The code producing it:
Line 151 in 58885d1
I have this same issue with antd + next.js.
@afc163 can you please look into it and change it to like
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
Experiencing the same issue with react-component/select. I see the issue is already reported there, but it's actually caused by react-component/overflow. It makes the library harder to use, because the warnings pollute the console. 😕
By the way, devs at react-component/select avoid calling useLayoutEffect in the server, using this function.
Same issue with antd + next.js:
"antd": "4.16.3",
"react": "17.0.2",
"next": "11.0.0".
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 Overflow (.../node_modules/rc-overflow/lib/Overflow.js:42:32) at InheritableContextProvider (.../node_modules/rc-menu/lib/context/MenuContext.js:39:23) at Menu (.../node_modules/rc-menu/lib/Menu.js:76:32) at InternalMenu (.../node_modules/antd/lib/menu/index.js:73:37) at Menu (.../node_modules/antd/lib/menu/index.js:165:37) at Nav at Layout (webpack-internal:///./components/Layout.js:15:3) at MyApp (webpack-internal:///./pages/_app.js:32:3) at AppContainer (.../node_modules/next/dist/next-server/server/render.js:27:952)
I'm having this issue as well with rc-menu, and not using antd.
Same issue:
antd@4.16.11
react@17.0.2
next@11.1.0
Warning:
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 Overflow (/Users/chenriques/Documents/proj/node_modules/rc-overflow/lib/Overflow.js:42:32)
at InheritableContextProvider (/Users/chenriques/Documents/proj/node_modules/rc-menu/lib/context/MenuContext.js:39:23)
at Menu (/Users/chenriques/Documents/proj/node_modules/rc-menu/lib/Menu.js:76:32)
at InternalMenu (/Users/chenriques/Documents/proj/node_modules/antd/lib/menu/index.js:73:37)
at Menu (/Users/chenriques/Documents/proj/node_modules/antd/lib/menu/index.js:166:37)
at AppMenu
at div
at aside
at /Users/chenriques/Documents/proj/node_modules/antd/lib/layout/Sider.js:74:31
at section
at BasicLayout (/Users/chenriques/Documents/proj/node_modules/antd/lib/layout/layout.js:93:34)
at Adapter (/Users/chenriques/Documents/proj/node_modules/antd/lib/layout/layout.js:61:37)
at AppLayout (webpack-internal:///./components/Layout/AppLayout.tsx:20:3)
at Home
at MyApp (webpack-internal:///./pages/_app.tsx:25:3)
at AppContainer (/Users/chenriques/Documents/proj/node_modules/next/dist/server/render.js:338:29)
PS: I'm not using SSR, so it must be caused by Next Static Generation of all pages by default.
Hello, I am having the same issue using ant design, the warning is produced by "rc-menu" that ant design uses internally.
I am facing the same issue but unable to fix it
This bug will soon be ONE YEAR old 👍
Experienced this today. If you're using nextjs you can always render it on the client using dynamic imports
Example:
import dynamic from "next/dynamic";
const DynamicAntdSelect = dynamic(() => import('antd').then(mod => mod.Select), { ssr: false });Source: https://nextjs.org/docs/advanced-features/dynamic-import
Experienced this today. If you're using nextjs you can always render it on the client using dynamic imports
Example:
import dynamic from "next/dynamic"; const DynamicAntdSelect = dynamic(() => import('antd').then(mod => mod.Select), { ssr: false });Source: https://nextjs.org/docs/advanced-features/dynamic-import
thanks! i tried this but got another error in console saying
Warning: `children` should be `Select.Option` or `Select.OptGroup` instead of `[object Object]`.
even though I imported it similarly like:
const DynamicAntSelectOption = dynamic(() => import('antd').then(mod => mod.Select.Option), { ssr: false });
To anyone facing this issue... Until this is fixed in the upstream packages, this is what you can do:
Today I used patch-package to patch rc-overflow@1.2.2 for the project I'm working on.
Here is the diff that solved my problem:
diff --git a/node_modules/rc-overflow/lib/Overflow.js b/node_modules/rc-overflow/lib/Overflow.js
index 0fce60c..bc2c0c4 100644
--- a/node_modules/rc-overflow/lib/Overflow.js
+++ b/node_modules/rc-overflow/lib/Overflow.js
@@ -202,7 +202,9 @@ function Overflow(props, ref) {
return itemWidths.get(getKey(mergedData[index], index));
}
- React.useLayoutEffect(function () {
+ var useIsomorphicEffectPatched = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+ useIsomorphicEffectPatched(function () {
if (mergedContainerWidth && mergedRestWidth && mergedData) {
var totalWidth = suffixWidth;
var len = mergedData.length;This issue body was partially generated by patch-package.
@jimfilippou @ahmad-reza619 But that would just be avoiding the SSR problem. I'm using Menu from antd as a top navigation, and I want it to be SSR.
Im +1 for a fix
+1 for a fix
+1 for a fix
try: +1 for a fix
antd@4.16.11
react@17.0.2
next@11.1.0
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 avo
id this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
[0] at Overflow (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-overflow\lib\Overflow.js:42:32)
[0] at SelectSelector (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-select\lib\Selector\MultipleSelector.js:36:18)
[0] at div
[0] at Selector (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-select\lib\Selector\index.js:36:35)
[0] at Trigger (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-trigger\lib\index.js:79:36)
[0] at SelectTrigger (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-select\lib\SelectTrigger.js:66:25)
[0] at div
[0] at Select (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-select\lib\generate.js:88:34)
[0] at Select (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-select\lib\Select.js:95:34)
[0] at InternalSelect (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\select\index.js:55:31)
[0] at I (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:19220)
[0] at Select (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:104900:5)
[0] at C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\form\FormItem.js:78:23
[0] at C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\form\FormItem.js:78:23
[0] at div
[0] at div
[0] at div
[0] at C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\grid\col.js:59:33
[0] at FormItemInput (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\form\FormItemInput.js:44:25)
[0] at div
[0] at C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\grid\row.js:56:34
[0] at Field (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-field-form\lib\Field.js:66:34)
[0] at WrapperField (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-field-form\lib\Field.js:569:20)
[0] at FormItem (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\form\FormItem.js:93:20)
[0] at form
[0] at Form (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-field-form\lib\Form.js:31:19)
[0] at SizeContextProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\config-provider\SizeContext.js:19:23)
[0] at InternalForm (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\form\Form.js:66:27)
[0] at div
[0] at I (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:19220)
[0] at div
[0] at I (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:19220)
[0] at InternalFilter (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\analysis\leakages-service.js:114407:3)
[0] at Filter
[0] at ServiceAnalysisFilter (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\analysis\leakages-service.js:110105:5)
[0] at div
[0] at aside
[0] at C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\layout\Sider.js:74:31
[0] at I (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:19220)
[0] at section
[0] at BasicLayout (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\layout\layout.js:93:34)
[0] at Adapter (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\layout\layout.js:61:37)
[0] at section
[0] at BasicLayout (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\layout\layout.js:93:34)
[0] at Adapter (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\layout\layout.js:61:37)
[0] at I (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:19220)
[0] at PrivateLayout (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:111260:3)
[0] at Leakages (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\analysis\leakages-service.js:124238:75)
[0] at BreadcrumbComp (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:108338:75)
[0] at ComponentWithError (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:114933:17)
[0] at BreadcrumbProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:108239:3)
[0] at HistoryProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:114205:3)
[0] at PopupProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\react-popup-manager\dist\src\PopupProvider.js:24:28)
[0] at UserProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:105501:3)
[0] at Provider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:116642:24)
[0] at DakotaProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:97183:12)
[0] at FormProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\rc-field-form\lib\FormContext.js:26:31)
[0] at LocaleProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\locale-provider\index.js:45:37)
[0] at ProviderChildren (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\config-provider\index.js:99:24)
[0] at LocaleReceiver (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\locale-provider\LocaleReceiver.js:39:37)
[0] at ConfigProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\antd\lib\config-provider\index.js:206:13)
[0] at exports.ThemeProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:24917)
[0] at App (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\.next\server\pages\_app.js:113957:5)
[0] at I18nProvider (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\next-translate\lib\cjs\I18nProvider.js:44:18)
[0] at AppWithTranslations (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\next-translate\lib\cjs\appWithI18n.js:65:92)
[0] at ae (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\styled-components\dist\styled-components.cjs.js:1:13296)
[0] at AppContainer (C:\Users\arjun\Documents\source\clients\Lukkien\dakota\client\node_modules\next\dist\server\render.js:293:29)
Same issue here, a fix would be very desirable.
+1 for a fix.
using:
"react": "^17.0.2",
"antd": "^4.15.2",
"next": "^12.3.3",
Using HeadlessUI and Next 13, I still get this error:
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.
@afc163 can you please look into it and change it to like
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
In case useful to others, this suggestion works perfectly you are using Next 13, with React Server Components (RSC) and React Client Components (RCC), and getting this error due to useLayoutEffec inside a RCC.