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

Edit on CodeSandbox

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

  1. Open https://codesandbox.io/s/awesome-moser-wr83y
  2. Hit Refresh button in the Browser panel
  3. 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

Most upvoted comments

I’m getting the same issue with the Menu component also triggering this rc-overflow behaviour:

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 (/home/benjie/Dev/graphile/starter/node_modules/rc-overflow/lib/Overflow.js:42:32)
    at InheritableContextProvider (/home/benjie/Dev/graphile/starter/node_modules/rc-menu/lib/context/MenuContext.js:39:23)
    at Menu (/home/benjie/Dev/graphile/starter/node_modules/rc-menu/lib/Menu.js:76:32)
    at InternalMenu (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/menu/index.js:71:37)
    at Menu (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/menu/index.js:162:37)
    at div
    at aside
    at Sider (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/Sider.js:74:31)
    at section
    at BasicLayout (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:93:34)
    at Layout (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:61:37)
    at main
    at Basic (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:78:25)
    at Content (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:61:37)
    at section
    at BasicLayout (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:93:34)
    at Layout (/home/benjie/Dev/graphile/starter/node_modules/antd/lib/layout/layout.js:61:37)
    at SharedLayout (webpack-internal:///../../components/dist/SharedLayout.js:57:20)
    at SettingsLayout (webpack-internal:///../../components/dist/SettingsLayout.js:47:20)
    at Settings_Profile (webpack-internal:///./pages/settings/index.tsx:48:62)
    at ApolloProvider (/home/benjie/Dev/graphile/starter/node_modules/@apollo/client/react/context/context.cjs.js:32:21)
    at MyApp (webpack-internal:///./pages/_app.tsx:49:1)
    at WithApollo(MyApp) (/home/benjie/Dev/graphile/starter/node_modules/next-with-apollo/lib/withApollo.js:84:29)
    at AppContainer (/home/benjie/Dev/graphile/starter/node_modules/next/dist/next-server/server/render.js:28:952)

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.

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:71:37)
    at Menu (****/node_modules/antd/lib/menu/index.js:162:37)
    at div
    at aside
    at Sider (****/node_modules/antd/lib/layout/Sider.js:74:31)
    at section
    at BasicLayout (****/node_modules/antd/lib/layout/layout.js:93:34)
    at Layout (****/node_modules/antd/lib/layout/layout.js:61:37)
    at MainLayout (webpack-internal:///./src/components/main-layout.tsx:24:54)
    at Home
    at App (webpack-internal:///./src/pages/_app.tsx:33:3)
    at AppContainer (****/node_modules/next/dist/next-server/server/render.js:28:861)

hi everybody i find a solution for this problem I use this line in _document.tsx and useLayoutEffect warning resolved

import React from 'react';
React.useEffectLayout = React.useEffect

my _document.tsx file :

// eslint-disable-next-line @next/next/no-document-import-in-page
import Document, {
  Html,
  DocumentContext,
  Head,
  Main,
  NextScript,
} from "next/document";

import React from "react";

React.useLayoutEffect = React.useEffect;

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

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?

hi everybody i find a solution for this problem I use this line in _document.tsx and useLayoutEffect warning resolved

import React from 'react';
React.useEffectLayout = React.useEffect

my _document.tsx file :

// eslint-disable-next-line @next/next/no-document-import-in-page
import Document, {
  Html,
  DocumentContext,
  Head,
  Main,
  NextScript,
} from "next/document";

import React from "react";

React.useLayoutEffect = React.useEffect;

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

This works for me. Thanks a lot!

hi everybody i find a solution for this problem I use this line in _document.tsx and useLayoutEffect warning resolved

import React from 'react';
React.useEffectLayout = React.useEffect

my _document.tsx file :

// eslint-disable-next-line @next/next/no-document-import-in-page
import Document, {
  Html,
  DocumentContext,
  Head,
  Main,
  NextScript,
} from "next/document";

import React from "react";

React.useLayoutEffect = React.useEffect;

class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head></Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

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

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://fb.me/react-uselayouteffect-ssr for common fixes.
    in Overflow
    in Context.Provider
    in Context.Provider
    in InheritableContextProvider
    in Context.Provider
    in Menu
    in Context.Provider
    in Context.Consumer
    in InternalMenu
    in Context.Consumer
    in Menu
    in div
    in aside
    in Context.Provider
    in Sider
    in section
    in Context.Provider
    in BasicLayout
    in Layout
    in section
    in Context.Provider
    in BasicLayout
    in Layout
    in Layout
    in Context.Provider
    in Provider
    in Context.Provider
    in ProviderChildren
    in Context.Consumer
    in LocaleReceiver
    in ConfigProvider
    in Fragment
    in MyApp
    in withRedux(MyApp)
    in Context.Provider
    in Context.Provider
    in ae
    in Unknown
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer

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

import { Tree } from 'antd';
<Tree [..] />

I am using

import dynamic from 'next/dynamic';
const MyTree = dynamic(() => import('./MyTree'), {ssr: false});

[..]

<MyTree [..] />

with a file MyTree.js as

import { Tree } from 'antd';
const MyTree = () => {
 <Tree [..] />
}
export default MyTree

I 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

    at Overflow (C:\dev\semerkand\kurban\node_modules\rc-overflow\lib\Overflow.js:42:32)
    at InheritableContextProvider (C:\dev\semerkand\kurban\node_modules\rc-menu\lib\context\MenuContext.js:40:23)
    at Menu (C:\dev\semerkand\kurban\node_modules\rc-menu\lib\Menu.js:80:32)
    at InternalMenu (C:\dev\semerkand\kurban\node_modules\antd\lib\menu\index.js:77:37)
    at Menu (C:\dev\semerkand\kurban\node_modules\antd\lib\menu\index.js:176:37)
    at div
    at div
    at div
    at header
    at Basic (C:\dev\semerkand\kurban\node_modules\antd\lib\layout\layout.js:78:25)
    at Adapter (C:\dev\semerkand\kurban\node_modules\antd\lib\layout\layout.js:61:37)
    at Navbar
    at section
    at BasicLayout (C:\dev\semerkand\kurban\node_modules\antd\lib\layout\layout.js:93:34)
    at Adapter (C:\dev\semerkand\kurban\node_modules\antd\lib\layout\layout.js:61:37)
    at ContentComp (webpack-internal:///./components/content.tsx:17:32)
    at Index (webpack-internal:///./pages/index.tsx:42:26)
    at MyApp (webpack-internal:///./pages/_app.tsx:21:18)
    at StyleRegistry (C:\dev\semerkand\kurban\node_modules\styled-jsx\dist\index\index.js:671:34)
    at AppContainer (C:\dev\semerkand\kurban\node_modules\next\dist\server\render.js:394:29)
    at AppContainerWithIsomorphicFiberStructure (C:\dev\semerkand\kurban\node_modules\next\dist\server\render.js:424:57)
    at div
    at Body (C:\dev\semerkand\kurban\node_modules\next\dist\server\render.js:701:21)```

Table also have same problem

I updated to version 4.18.7 but I still have the same problem. Menu in Next js

    at Overflow (C:\dev\semerkand\kurban\node_modules\rc-overflow\lib\Overflow.js:42:32)
    at InheritableContextProvider (C:\dev\semerkand\kurban\node_modules\rc-menu\lib\context\MenuContext.js:40:23)
    at Menu (C:\dev\semerkand\kurban\node_modules\rc-menu\lib\Menu.js:80:32)
    at InternalMenu (C:\dev\semerkand\kurban\node_modules\antd\lib\menu\index.js:77:37)
    at Menu (C:\dev\semerkand\kurban\node_modules\antd\lib\menu\index.js:176:37)
    at div
    at div
    at div
    at header
    at Basic (C:\dev\semerkand\kurban\node_modules\antd\lib\layout\layout.js:78:25)
    at Adapter (C:\dev\semerkand\kurban\node_modules\antd\lib\layout\layout.js:61:37)
    at Navbar
    at section
    at BasicLayout (C:\dev\semerkand\kurban\node_modules\antd\lib\layout\layout.js:93:34)
    at Adapter (C:\dev\semerkand\kurban\node_modules\antd\lib\layout\layout.js:61:37)
    at ContentComp (webpack-internal:///./components/content.tsx:17:32)
    at Index (webpack-internal:///./pages/index.tsx:42:26)
    at MyApp (webpack-internal:///./pages/_app.tsx:21:18)
    at StyleRegistry (C:\dev\semerkand\kurban\node_modules\styled-jsx\dist\index\index.js:671:34)
    at AppContainer (C:\dev\semerkand\kurban\node_modules\next\dist\server\render.js:394:29)
    at AppContainerWithIsomorphicFiberStructure (C:\dev\semerkand\kurban\node_modules\next\dist\server\render.js:424:57)
    at div
    at Body (C:\dev\semerkand\kurban\node_modules\next\dist\server\render.js:701:21)```

Try to delete node_modules and lock file(package-lock.json or yarn.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:

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 Ellipsis
    at span
    at Typography
    ...

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:

const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect

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…