kapa.ai•2y ago

Warning: [antd: Menu] `children` is deprecated. Please use `items` instead.

Hi @synisme. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

8 Replies

kapa.aiOP•2y ago

---------------------- Yes, you're correct. The children prop in Ant Design's Menu component is being deprecated and it's recommended to use items instead. However, the refine team has discussed this warning and decided to keep using children for now due to its advantages in their use cases, such as async conditional rendering of elements and the use of the CanAccess component for access control rendering. The items prop currently doesn't support these features without issues. Here's a simple code piece shared by the team to suppress the warning:

  const _error = console.error;

  const itemsWarning = "`children` will be removed in next major version. Please use `items` instead.";

  console.error = function (msg, ...args) {
    if (!`${msg}`.includes(itemsWarning)) {
      _error.apply(console, [msg, ...args]);
    }
  };

  const _error = console.error;

  const itemsWarning = "`children` will be removed in next major version. Please use `items` instead.";

  console.error = function (msg, ...args) {
    if (!`${msg}`.includes(itemsWarning)) {
      _error.apply(console, [msg, ...args]);
    }
  };

You can use this code before the Sider component or Menu is rendered to suppress the warning. The team will continue to monitor future changes in the antd's Menu component. They believe there will be improvements for items or children will win over before antd@5 is released. For more details, you can refer to the discussion on this topic in this Github issue (https://github.com/refinedev/refine/issues/1857). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.aiOP•2y ago

<@183085423604662273> kapa.ai is still learning and improving, please let us know how it did by reacting below

like-gold•2y ago

@kapa.ai what about this warning: app-index.js:32 Warning: An empty string ("") was passed to the href attribute. To fix this, either do not render the element at all or pass null to href instead of an empty string.

kapa.aiOP•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Hmm, I don't know enough to give you a confident answer yet. The information extracts provided do not contain specific details about the warning you're encountering. However, the warning message suggests that an empty string ("") was passed to the href attribute of a link component. This is generally not recommended. Instead, you should either not render the element at all or pass null to href instead of an empty string. For more specific guidance, you may want to refer to the official React documentation (https://reactjs.org/) or the Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.aiOP•2y ago

<@183085423604662273> kapa.ai is still learning and improving, please let us know how it did by reacting below

like-gold•2y ago

got it! @kapa.ai Warning: Expected server HTML to contain a matching <div> in <div>. at div at Dialog (webpack-internal:///(app-pages-browser)/./node_modules/rc-dialog/es/Dialog/index.js:35:32) at eval (webpack-internal:///(app-pages-browser)/./node_modules/@rc-component/portal/es/Portal.js:39:20) at DialogWrap (webpack-internal:///(app-pages-

kapa.aiOP•2y ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The warning message you're seeing is related to a mismatch between the server-rendered HTML and the client-rendered HTML during the hydration process in a React application. This usually happens when the HTML content rendered on the server differs from what is rendered on the client. In your case, it seems like the server-rendered HTML expected a matching <div> element inside another <div> element, which was not found during the hydration on the client side. This issue was reported in a Github issue (https://github.com/refinedev/refine/issues/3837) where a user described a similar bug after creating an app with Remix and Mui. The console displayed multiple errors related to server and client HTML mismatch. Unfortunately, the information extracts provided do not contain a specific solution to this issue. For more detailed guidance, you may want to refer to the official React documentation (https://reactjs.org/docs/react-dom.html#hydrate) on hydration or the Refine documentation (https://refine.dev/docs). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.aiOP•2y ago

<@183085423604662273> kapa.ai is still learning and improving, please let us know how it did by reacting below

Warning: [antd: Menu] `children` is deprecated. Please use `items` instead.

Did you find this page helpful?