Extracting styles for components result in a useLayoutEffect warning #1044
Description
Reproduction link
https://github.com/pbrzosko/antd-extract-styles
Steps to reproduce
- npm install
- tsx src/extract.tsx
What is expected?
No warning in the console.
What is actually happening?
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 /Users/przemek.brzosko/Projects/antd-extract-styles/node_modules/rc-slider/lib/Slider.js:45:32
at /Users/przemek.brzosko/Projects/antd-extract-styles/node_modules/antd/lib/slider/index.js:39:18
at MotionWrapper (/Users/przemek.brzosko/Projects/antd-extract-styles/node_modules/antd/lib/config-provider/MotionWrapper.js:14:5)
at ProviderChildren (/Users/przemek.brzosko/Projects/antd-extract-styles/node_modules/antd/lib/config-provider/index.js:142:5)
at ConfigProvider (/Users/przemek.brzosko/Projects/antd-extract-styles/node_modules/antd/lib/config-provider/index.js:433:25)
at StyleProvider (/Users/przemek.brzosko/Projects/antd-extract-styles/node_modules/@ant-design/cssinjs/lib/StyleContext.js:65:24)
| Environment | Info |
|---|---|
| antd | 5.19.4 |
| React | 18.3.1 |
| System | macOS Sonoma 14.5 |
| Browser | Google Chrome Version 126.0.6478.127 (Official Build) (arm64) |