A warning is displayed when executing extractStyle() in Antd5

[hassoubeat]

Hello.

Currently, when I proceeded with the implementation using the official procedure to make Antd5 work with SSR, the following warning is displayed when I execute extractStyle().

npm run dev

> predev
> ts-node --project ./tsconfig.node.json --esm ./scripts/genAntdCss.tsx

Warning: `children` of ResizeObserver is empty. Nothing is in observe.
Warning: [antd: BackTop] `BackTop` is deprecated. Please use `FloatButton.BackTop` instead.
Warning: [antd: Menu] `children` is deprecated. Please use `items` instead.
Warning: [antd: QRCode] need to receive `value` props
Warning: `children` of Tree is deprecated. Please use `treeData` instead.

Is there a way to solve this?

The environment and related code are as follows.

library	version
React	18.2.0
ts-node	10.9.2
antd	5.14.2
@ant-design/static-style-extract	1.0.2

genAntdCss.tsx

import React from 'react';
import fs from 'fs';
import { extractStyle } from "@ant-design/static-style-extract";
import { ConfigProvider } from "antd";
import { customTheme } from "../app/theme.js";

const outputPath = "./public/antd.min.css";

// ↓ Code that displays the warning
const css = extractStyle((node) => (
  <ConfigProvider theme={{ token: customTheme }} >
    {node}
  </ConfigProvider>
));

fs.writeFileSync(outputPath, css);

[Yuriy Shustov]

3 months - 0 comments
Got the same problem

Warning: children` of ResizeObserver is empty. Nothing is in observe.

Warning: [antd: BackTop] BackTop is deprecated. Please use FloatButton.BackTop instead.

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

Warning: [antd: QRCode] need to receive value props

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 C:\My Projects\nextjs-stroyrem\client\node_modules\rc-slider\lib\Slider.js:43:32
at C:\My Projects\nextjs-stroyrem\client\node_modules\antd\lib\slider\index.js:38:18
at StyleProvider (C:\My Projects\nextjs-stroyrem\client\node_modules@ant-design\cssinjs\lib\StyleContext.js:65:24)

Warning: children of Tree is deprecated. Please use treeData instead.`