ant-design: Select mode="multiple" throws useLayoutEffect warning in Next.js
- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
Reproduce locally
npx create-next-app nextjs-antd-select-bug
cd nextjs-antd-select-bug
npm install antd
npm run dev
Edit pages/index.js
import {Select} from "antd";
import "antd/dist/antd.css";
export default function Page() {
return (
<div>
<Select
mode="multiple"
style={{width: "300px"}}
>
<Select.Option value="A">Option A</Select.Option>
<Select.Option value="B">Option B</Select.Option>
</Select>
</div>
)
}
Open http://localhost:3000/ The warning is logged in the server console with every page refresh
Reproduce on Codesandbox
- Open https://codesandbox.io/s/awesome-moser-wr83y
- Hit Refresh button in the Browser panel
- The warning is logged in the Terminal log
What is expected?
No exceptions or warnings are expected.
What is actually happening?
The following warning is logged upon every single page refresh.
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. Toavoid this, useLayoutEffect should only be used in components that renderexclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
at Overflow (/sandbox/node_modules/rc-overflow/lib/Overflow.js:35:32)
at SelectSelector (/sandbox/node_modules/rc-select/lib/Selector/MultipleSelector.js:36:18)
at div
at Selector (/sandbox/node_modules/rc-select/lib/Selector/index.js:36:35)
at Trigger (/sandbox/node_modules/rc-trigger/lib/index.js:79:36)
at SelectTrigger (/sandbox/node_modules/rc-select/lib/SelectTrigger.js:66:25)
at div
at Select (/sandbox/node_modules/rc-select/lib/generate.js:88:34)
at Select (/sandbox/node_modules/rc-select/lib/Select.js:95:34)
at InternalSelect (/sandbox/node_modules/antd/lib/select/index.js:55:31)
at div
at Page
at App (webpack-internal:///./node_modules/next/dist/pages/_app.js:31:1)
at AppContainer (/sandbox/node_modules/next/dist/next-server/server/render.js:28:859)
Environment | Info |
---|---|
antd | 4.15.4 |
React | 17.0.2 |
System | macOS Big Sur 11.3 |
Browser | Safari 14.1 |
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 51
- Comments: 61 (8 by maintainers)
Commits related to this issue
- Add syntax highlight to submission code - Remove `white-space: pre-line` from global CSS, as this was breaking white spaces on submission code - Downgraded antd to version v4.15.2 due to [this issue]... — committed to wdsrocha/dojo by wdsrocha 3 years ago
- Wrap Menu component in useEffect Resolves: https://github.com/ant-design/ant-design/issues/30396 — committed to RobKenis/rob-kenis-dot-com by deleted user 3 years ago
I’m getting the same issue with the
Menu
component also triggering thisrc-overflow
behaviour:Affects version 4.16.0; 4.15.6 doesn’t have this issue.
+1 Menu also has this problem. version: 4.16.0 Downgrading to 4.15.6 fixs the problem.
hi everybody i find a solution for this problem I use this line in _document.tsx and useLayoutEffect warning resolved
my _document.tsx file :
Can people please stop commenting with non-updates. It’s quite frustrating to check for progress just to see another waiting comment.
Please subscribe and thumbs up the original post, and then one person can bump the issue every so often, not within a couple hours of each other.
hi, any update here?
Having the same issue with the version “antd”: “4.16.8”, “react”: “16.12.0”, “next”: “10.0.9”.
It would be great to have this fixed 😃
I’m going to be stuck on 4.15.2 forever if this doesn’t get fixed. @afc163, any plans to fix?
This works for me. Thanks a lot!
For me this one worked
I have the same problem !!! This problem occurs when I upgrade
antd
from^4.0.0
to^4.0.5
.“antd”:
^4.5.0
“next”:^9.2.1
“react”:^16.12.0
Can verify, downgraded to 4.15.2 for now.
Seems fixed in 4.18.8. Thanks!
Almost 3 months ago was opened PR with fix https://github.com/react-component/overflow/pull/16 @afc163 / @zombieJ code is trivial but it’s really difficult to add tests for such case. Maybe you accept PR without tests?
same problem… any update for this ? The menu component also has this problem. antd: 4.6.13 next: 11.1.0
The tree component is still affected by this in antd 4.18.2.
I use nextjs and my workaround is to dynamically load the component containing the tree and disabling ssr for it. Instead of
I am using
with a file
MyTree.js
asI was using the menu component inside nextjs when i came through this error, since my menu doesn’t need to change after the initial render, i basically wrapped my menu component inside a useEffect Hook 😃 Worked like a charm
{ useEffect(() => { // ... }); }
I updated to version 4.18.7 but I still have the same problem. Menu in Next js
Table also have same problem
Try to delete
node_modules
and lock file(package-lock.json
oryarn.lock
) then reinstall.I updated the version from “4.16.13” to “4.18.4” and now I get a lot of the following warnings:
After a little debugging, I found that the latest version of antd uses useLayoutEffect for the “ellipsis” property. This is a tragedy for me, because I use this component in the whole project. But the saddest thing is that I never used the “ellipsis” property. And now, every time I refresh the page, I get hundreds of lines in the console about the warning, which I can not easily fix, and among all this text to see the real errors that may occur during development.
Hope the developers will be able to follow the recommendations described at the link “https://reactjs.org/link/uselayouteffect-ssr”, so that this does not happen at least with the component that is used so often.
Should be fixed on the library as follow:
Credit: https://github.com/react-component/overflow/issues/6#issuecomment-819215239
@Mihai-github seems like there could be some negative impacts from this solution? Although I’m not sure exactly…