search

graphile / starter

Opinionated SaaS quick-start with pre-built user account and organization system for full-stack application development in React, Node.js, GraphQL and PostgreSQL. Powered by PostGraphile, TypeScript, Apollo Client, Graphile Worker, Graphile Migrate, GraphQL Code Generator, Ant Design and Next.js
https://graphile-starter.herokuapp.com
Other
1.74k stars 219 forks source link

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output #262

Closed benjie closed 3 years ago

benjie commented 3 years ago

Summary

Bug in rc-overflow in Antd's menu component means menu cannot be server rendered without warning.

Steps to reproduce

Log in, load the settings page http://localhost:5678/settings

Expected results

No console output.

Actual results

The command line console outputs:

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

Related: https://github.com/ant-design/ant-design/issues/30396

benjie commented 3 years ago

Fixed by downgrading antd from 4.16.0 to 4.15.6