[BUG] warning.js:6 Warning: [antd: Menu] children will be removed in next major version. Please use items instead.

[nrikiji]

I have not been able to determine from which version I started getting this error. Do you know of a workaround for this error?

  "@pankod/refine-antd": "^3.21.0",
  "@pankod/refine-core": "^3.22.1",

[omeraplak]

Hey @nrikiji , Thank you for contacting us. Let's see what we can do 🚀

[aliemir]

We've discussed about this warning. Even though it's a warning, rc-util library (which antd uses under the hood) is using console.error to show it so little bit of a confusion here for the developers.

Deprecation of children in favor of items (in my personal opinion) deviates from the JSX and it's advantages on our cases. We can still update our Menu usage to move from children to items, yet items doesn't even support async conditional rendering of the elements. We don't want to add unnecessary complexity to the Sider just to get rid of this warning which we initially do not believe it's going to be released in antd@5 with no way to customize or any other alternatives.

Here's a simple case for us to choose children over items. We're using CanAccess component in order to render items by access control. items is not able to achieve that without having issues with the rendering. I mean, antd could at least give us an opportunity to have render callbacks to customize the Menu.Item and Menu.SubMenu components.

In conclusion, we're keeping the code as is and watch for the future changes in the antd's Menu component, which we believe there will be an improvement for items or children will win over before antd@5 is released.

For anyone, who wants to suppress the warning and keep using Sider component from @pankod/refine-antd, I'm sharing a simple code piece to filter console.error. Just use it before Sider component is rendered (for custom siders, make sure the code is invoked before Menu is rendered)

  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]);
    }
  };

Closing the issue for now, we'll watch the Menu changes in antd for future updates.