From a2f7d6d06295e5e9dc4a34302a638b71eb469933 Mon Sep 17 00:00:00 2001
From: Garret MH <garret.mcgraw-hanson@capgroup.com>
Date: Mon, 26 Sep 2022 06:33:41 -0700
Subject: [PATCH] feat: Vue 3 Migration Build support (#5973), close #5765

closes vueComponent/ant-design-vue#5765

Add `compatConfig: { MODE: 3 }` to all component definitions to signal to `@vue/compat` not to use any Vue 2 compatibility features.
---
 components/_util/ActionButton.tsx                              | 1 +
 components/_util/BaseInput.tsx                                 | 1 +
 components/_util/Portal.tsx                                    | 1 +
 components/_util/PortalWrapper.tsx                             | 1 +
 components/_util/__mocks__/Portal.tsx                          | 1 +
 components/_util/transButton.tsx                               | 1 +
 components/_util/wave.tsx                                      | 1 +
 components/affix/index.tsx                                     | 1 +
 components/alert/index.tsx                                     | 1 +
 components/anchor/Anchor.tsx                                   | 1 +
 components/anchor/AnchorLink.tsx                               | 1 +
 components/auto-complete/index.tsx                             | 1 +
 components/avatar/Avatar.tsx                                   | 1 +
 components/avatar/Group.tsx                                    | 1 +
 components/back-top/index.tsx                                  | 1 +
 components/badge/Badge.tsx                                     | 1 +
 components/badge/Ribbon.tsx                                    | 1 +
 components/badge/ScrollNumber.tsx                              | 1 +
 components/badge/SingleNumber.tsx                              | 1 +
 components/breadcrumb/Breadcrumb.tsx                           | 1 +
 components/breadcrumb/BreadcrumbItem.tsx                       | 1 +
 components/breadcrumb/BreadcrumbSeparator.tsx                  | 1 +
 components/button/LoadingIcon.tsx                              | 1 +
 components/button/button-group.tsx                             | 1 +
 components/button/button.tsx                                   | 1 +
 components/card/Card.tsx                                       | 1 +
 components/card/Grid.tsx                                       | 1 +
 components/card/Meta.tsx                                       | 1 +
 components/carousel/index.tsx                                  | 1 +
 components/cascader/index.tsx                                  | 1 +
 components/checkbox/Checkbox.tsx                               | 1 +
 components/checkbox/Group.tsx                                  | 1 +
 components/collapse/Collapse.tsx                               | 1 +
 components/collapse/CollapsePanel.tsx                          | 1 +
 components/collapse/PanelContent.tsx                           | 1 +
 components/comment/index.tsx                                   | 1 +
 components/config-provider/index.tsx                           | 1 +
 components/date-picker/generatePicker/generateRangePicker.tsx  | 1 +
 components/date-picker/generatePicker/generateSinglePicker.tsx | 1 +
 components/descriptions/index.tsx                              | 2 ++
 components/divider/index.tsx                                   | 1 +
 components/drawer/index.tsx                                    | 1 +
 components/dropdown/dropdown-button.tsx                        | 1 +
 components/dropdown/dropdown.tsx                               | 1 +
 components/form/ErrorList.tsx                                  | 1 +
 components/form/Form.tsx                                       | 1 +
 components/form/FormItem.tsx                                   | 1 +
 components/form/FormItemContext.ts                             | 1 +
 components/form/FormItemInput.tsx                              | 1 +
 components/grid/Col.tsx                                        | 1 +
 components/grid/Row.tsx                                        | 1 +
 components/image/PreviewGroup.tsx                              | 1 +
 components/input-number/index.tsx                              | 1 +
 components/input-number/src/InputNumber.tsx                    | 1 +
 components/input-number/src/StepHandler.tsx                    | 1 +
 components/input/ClearableLabeledInput.tsx                     | 1 +
 components/input/Group.tsx                                     | 1 +
 components/input/Input.tsx                                     | 1 +
 components/input/Password.tsx                                  | 1 +
 components/input/ResizableTextArea.tsx                         | 1 +
 components/input/Search.tsx                                    | 1 +
 components/input/TextArea.tsx                                  | 1 +
 components/layout/Sider.tsx                                    | 1 +
 components/layout/layout.tsx                                   | 3 +++
 components/list/Item.tsx                                       | 1 +
 components/list/ItemMeta.tsx                                   | 1 +
 components/list/index.tsx                                      | 1 +
 components/locale-provider/LocaleReceiver.tsx                  | 1 +
 components/locale-provider/index.tsx                           | 1 +
 components/mentions/index.tsx                                  | 2 ++
 components/menu/src/Divider.tsx                                | 1 +
 components/menu/src/InlineSubMenuList.tsx                      | 1 +
 components/menu/src/ItemGroup.tsx                              | 1 +
 components/menu/src/Menu.tsx                                   | 1 +
 components/menu/src/MenuItem.tsx                               | 1 +
 components/menu/src/PopupTrigger.tsx                           | 1 +
 components/menu/src/SubMenu.tsx                                | 1 +
 components/menu/src/hooks/useKeyPath.ts                        | 1 +
 components/menu/src/hooks/useMenuContext.ts                    | 1 +
 components/modal/Modal.tsx                                     | 1 +
 components/page-header/index.tsx                               | 1 +
 components/pagination/MiniSelect.tsx                           | 1 +
 components/pagination/Pagination.tsx                           | 1 +
 components/popconfirm/index.tsx                                | 1 +
 components/popover/index.tsx                                   | 1 +
 components/progress/Circle.tsx                                 | 1 +
 components/progress/Line.tsx                                   | 1 +
 components/progress/Steps.tsx                                  | 1 +
 components/progress/progress.tsx                               | 1 +
 components/radio/Group.tsx                                     | 1 +
 components/radio/Radio.tsx                                     | 1 +
 components/radio/RadioButton.tsx                               | 1 +
 components/rate/Star.tsx                                       | 1 +
 components/rate/index.tsx                                      | 1 +
 components/result/index.tsx                                    | 1 +
 components/select/index.tsx                                    | 1 +
 components/skeleton/Avatar.tsx                                 | 1 +
 components/skeleton/Button.tsx                                 | 1 +
 components/skeleton/Image.tsx                                  | 1 +
 components/skeleton/Input.tsx                                  | 1 +
 components/skeleton/Paragraph.tsx                              | 1 +
 components/skeleton/Skeleton.tsx                               | 1 +
 components/skeleton/Title.tsx                                  | 1 +
 components/slider/SliderTooltip.tsx                            | 1 +
 components/slider/index.tsx                                    | 1 +
 components/space/index.tsx                                     | 1 +
 components/spin/Spin.tsx                                       | 1 +
 components/statistic/Countdown.tsx                             | 1 +
 components/statistic/Statistic.tsx                             | 1 +
 components/steps/index.tsx                                     | 2 ++
 components/switch/index.tsx                                    | 1 +
 components/table/hooks/useFilter/FilterSearch.tsx              | 1 +
 components/tabs/src/TabContext.ts                              | 1 +
 components/tabs/src/TabNavList/AddButton.tsx                   | 1 +
 components/tabs/src/TabNavList/OperationNode.tsx               | 1 +
 components/tabs/src/TabNavList/TabNode.tsx                     | 1 +
 components/tabs/src/TabNavList/index.tsx                       | 1 +
 components/tabs/src/TabPanelList/TabPane.tsx                   | 1 +
 components/tabs/src/TabPanelList/index.tsx                     | 1 +
 components/tabs/src/Tabs.tsx                                   | 2 ++
 components/tag/CheckableTag.tsx                                | 1 +
 components/tag/index.tsx                                       | 1 +
 components/timeline/Timeline.tsx                               | 1 +
 components/timeline/TimelineItem.tsx                           | 1 +
 components/tooltip/Tooltip.tsx                                 | 1 +
 components/transfer/ListBody.tsx                               | 1 +
 components/transfer/ListItem.tsx                               | 1 +
 components/transfer/index.tsx                                  | 1 +
 components/transfer/list.tsx                                   | 1 +
 components/transfer/search.tsx                                 | 1 +
 components/tree-select/index.tsx                               | 1 +
 components/tree/DirectoryTree.tsx                              | 1 +
 components/tree/Tree.tsx                                       | 1 +
 components/typography/Base.tsx                                 | 1 +
 components/typography/Editable.tsx                             | 1 +
 components/upload/Dragger.tsx                                  | 1 +
 components/upload/Upload.tsx                                   | 1 +
 components/upload/UploadList/ListItem.tsx                      | 1 +
 components/upload/UploadList/index.tsx                         | 1 +
 components/vc-align/Align.tsx                                  | 1 +
 components/vc-cascader/Cascader.tsx                            | 1 +
 components/vc-cascader/OptionList/index.tsx                    | 1 +
 components/vc-checkbox/Checkbox.tsx                            | 1 +
 components/vc-dialog/Content.tsx                               | 1 +
 components/vc-dialog/Dialog.tsx                                | 1 +
 components/vc-dialog/DialogWrap.tsx                            | 1 +
 components/vc-dialog/Mask.tsx                                  | 1 +
 components/vc-drawer/src/DrawerChild.tsx                       | 1 +
 components/vc-drawer/src/DrawerWrapper.tsx                     | 1 +
 components/vc-dropdown/Dropdown.tsx                            | 1 +
 components/vc-image/src/Image.tsx                              | 1 +
 components/vc-image/src/Preview.tsx                            | 1 +
 components/vc-image/src/PreviewGroup.tsx                       | 1 +
 components/vc-mentions/src/DropdownMenu.tsx                    | 1 +
 components/vc-mentions/src/KeywordTrigger.tsx                  | 1 +
 components/vc-mentions/src/Mentions.tsx                        | 1 +
 components/vc-mentions/src/Option.tsx                          | 1 +
 components/vc-notification/Notification.tsx                    | 1 +
 components/vc-overflow/Item.tsx                                | 1 +
 components/vc-overflow/RawItem.tsx                             | 1 +
 components/vc-overflow/context.ts                              | 1 +
 components/vc-pagination/Options.tsx                           | 1 +
 components/vc-pagination/Pager.tsx                             | 1 +
 components/vc-pagination/Pagination.tsx                        | 1 +
 components/vc-picker/RangeContext.tsx                          | 1 +
 components/vc-picker/panels/TimePanel/TimeBody.tsx             | 1 +
 components/vc-progress/src/Circle.tsx                          | 1 +
 components/vc-progress/src/Line.tsx                            | 1 +
 components/vc-resize-observer/index.tsx                        | 1 +
 components/vc-select/BaseSelect.tsx                            | 1 +
 components/vc-select/OptionList.tsx                            | 1 +
 components/vc-select/Select.tsx                                | 1 +
 components/vc-select/Selector/Input.tsx                        | 1 +
 components/vc-slider/src/Handle.tsx                            | 1 +
 components/vc-slider/src/Range.tsx                             | 1 +
 components/vc-slider/src/Slider.tsx                            | 1 +
 components/vc-slider/src/common/createSlider.tsx               | 1 +
 components/vc-steps/Step.tsx                                   | 1 +
 components/vc-steps/Steps.tsx                                  | 1 +
 components/vc-table/Footer/Row.tsx                             | 1 +
 components/vc-table/Header/DragHandle.tsx                      | 1 +
 components/vc-tooltip/src/Content.tsx                          | 1 +
 components/vc-tooltip/src/Tooltip.tsx                          | 1 +
 components/vc-tree-select/LegacyContext.tsx                    | 1 +
 components/vc-tree-select/OptionList.tsx                       | 1 +
 components/vc-tree-select/TreeSelect.tsx                       | 1 +
 components/vc-tree/MotionTreeNode.tsx                          | 1 +
 components/vc-tree/NodeList.tsx                                | 1 +
 components/vc-tree/Tree.tsx                                    | 1 +
 components/vc-tree/TreeNode.tsx                                | 1 +
 components/vc-tree/contextTypes.ts                             | 1 +
 components/vc-trigger/Popup/MobilePopupInner.tsx               | 1 +
 components/vc-trigger/Popup/PopupInner.tsx                     | 1 +
 components/vc-trigger/Popup/index.tsx                          | 1 +
 components/vc-trigger/Trigger.tsx                              | 1 +
 components/vc-upload/AjaxUploader.tsx                          | 1 +
 components/vc-upload/Upload.tsx                                | 1 +
 components/vc-virtual-list/List.tsx                            | 1 +
 components/vc-virtual-list/ScrollBar.tsx                       | 1 +
 199 files changed, 205 insertions(+)

diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx
index fe1eb83de..19b1365ae 100644
--- a/components/_util/ActionButton.tsx
+++ b/components/_util/ActionButton.tsx
@@ -26,6 +26,7 @@ function isThenable(thing?: PromiseLike<any>): boolean {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ActionButton',
   props: actionButtonProps,
   setup(props, { slots }) {
diff --git a/components/_util/BaseInput.tsx b/components/_util/BaseInput.tsx
index 0c0e42f84..009613a74 100644
--- a/components/_util/BaseInput.tsx
+++ b/components/_util/BaseInput.tsx
@@ -2,6 +2,7 @@ import { defineComponent, ref, withDirectives } from 'vue';
 import antInput from './antInputDirective';
 import PropTypes from './vue-types';
 const BaseInput = defineComponent({
+  compatConfig: { MODE: 3 },
   props: {
     value: PropTypes.string.def(''),
   },
diff --git a/components/_util/Portal.tsx b/components/_util/Portal.tsx
index cde3e70e0..0aea311bc 100644
--- a/components/_util/Portal.tsx
+++ b/components/_util/Portal.tsx
@@ -11,6 +11,7 @@ import {
 import { useInjectPortal } from '../vc-trigger/context';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Portal',
   inheritAttrs: false,
   props: {
diff --git a/components/_util/PortalWrapper.tsx b/components/_util/PortalWrapper.tsx
index 66491fc73..5c02f3ba3 100644
--- a/components/_util/PortalWrapper.tsx
+++ b/components/_util/PortalWrapper.tsx
@@ -49,6 +49,7 @@ const getParent = (getContainer: GetContainer) => {
 export type GetContainer = string | HTMLElement | (() => HTMLElement);
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PortalWrapper',
   inheritAttrs: false,
   props: {
diff --git a/components/_util/__mocks__/Portal.tsx b/components/_util/__mocks__/Portal.tsx
index 0043608ff..d71306396 100644
--- a/components/_util/__mocks__/Portal.tsx
+++ b/components/_util/__mocks__/Portal.tsx
@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Portal',
   inheritAttrs: false,
   props: ['getContainer'],
diff --git a/components/_util/transButton.tsx b/components/_util/transButton.tsx
index 66861efaf..caced47cd 100644
--- a/components/_util/transButton.tsx
+++ b/components/_util/transButton.tsx
@@ -15,6 +15,7 @@ const inlineStyle = {
 };
 
 const TransButton = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TransButton',
   inheritAttrs: false,
   props: {
diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx
index 1170e3d13..ef69ef66c 100644
--- a/components/_util/wave.tsx
+++ b/components/_util/wave.tsx
@@ -21,6 +21,7 @@ function isNotGrey(color: string) {
   return true;
 }
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Wave',
   props: {
     insertExtraNode: Boolean,
diff --git a/components/affix/index.tsx b/components/affix/index.tsx
index 72313e490..e6ee0e972 100644
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -72,6 +72,7 @@ export type AffixExpose = {
 
 export type AffixInstance = ComponentPublicInstance<AffixProps, AffixExpose>;
 const Affix = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAffix',
   props: affixProps(),
   setup(props, { slots, emit, expose }) {
diff --git a/components/alert/index.tsx b/components/alert/index.tsx
index 1dfae9a68..2fae9e018 100644
--- a/components/alert/index.tsx
+++ b/components/alert/index.tsx
@@ -63,6 +63,7 @@ export const alertProps = () => ({
 export type AlertProps = Partial<ExtractPropTypes<ReturnType<typeof alertProps>>>;
 
 const Alert = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAlert',
   inheritAttrs: false,
   props: alertProps(),
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
index 9fd6ac319..f5ffe30ce 100644
--- a/components/anchor/Anchor.tsx
+++ b/components/anchor/Anchor.tsx
@@ -73,6 +73,7 @@ export interface AnchorState {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAnchor',
   inheritAttrs: false,
   props: anchorProps(),
diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx
index 049790643..8f16a9808 100644
--- a/components/anchor/AnchorLink.tsx
+++ b/components/anchor/AnchorLink.tsx
@@ -16,6 +16,7 @@ export const anchorLinkProps = () => ({
 export type AnchorLinkProps = Partial<ExtractPropTypes<ReturnType<typeof anchorLinkProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAnchorLink',
   props: initDefaultProps(anchorLinkProps(), { href: '#' }),
   slots: ['title'],
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index 1cca93153..f04479a2d 100644
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -39,6 +39,7 @@ export const AutoCompleteOption = Option;
 export const AutoCompleteOptGroup = OptGroup;
 
 const AutoComplete = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAutoComplete',
   inheritAttrs: false,
   props: autoCompleteProps(),
diff --git a/components/avatar/Avatar.tsx b/components/avatar/Avatar.tsx
index 10382e17d..b6af5eca1 100644
--- a/components/avatar/Avatar.tsx
+++ b/components/avatar/Avatar.tsx
@@ -37,6 +37,7 @@ export const avatarProps = () => ({
 export type AvatarProps = Partial<ExtractPropTypes<ReturnType<typeof avatarProps>>>;
 
 const Avatar = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAvatar',
   inheritAttrs: false,
   props: avatarProps(),
diff --git a/components/avatar/Group.tsx b/components/avatar/Group.tsx
index 035992238..3e09f9ed6 100644
--- a/components/avatar/Group.tsx
+++ b/components/avatar/Group.tsx
@@ -27,6 +27,7 @@ export const groupProps = () => ({
 export type AvatarGroupProps = Partial<ExtractPropTypes<ReturnType<typeof groupProps>>>;
 
 const Group = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AAvatarGroup',
   inheritAttrs: false,
   props: groupProps(),
diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx
index 2abef7ac1..fd00085c3 100644
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@@ -32,6 +32,7 @@ export const backTopProps = () => ({
 export type BackTopProps = Partial<ExtractPropTypes<typeof backTopProps>>;
 
 const BackTop = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABackTop',
   inheritAttrs: false,
   props: backTopProps(),
diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx
index 38962db61..0464f7b6c 100644
--- a/components/badge/Badge.tsx
+++ b/components/badge/Badge.tsx
@@ -34,6 +34,7 @@ export const badgeProps = () => ({
 export type BadgeProps = Partial<ExtractPropTypes<ReturnType<typeof badgeProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABadge',
   Ribbon,
   inheritAttrs: false,
diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
index 7fba9933a..0d6c9cc30 100644
--- a/components/badge/Ribbon.tsx
+++ b/components/badge/Ribbon.tsx
@@ -16,6 +16,7 @@ export const ribbonProps = () => ({
 export type RibbonProps = Partial<ExtractPropTypes<ReturnType<typeof ribbonProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABadgeRibbon',
   inheritAttrs: false,
   props: ribbonProps(),
diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx
index f7a83a21b..37c3b2c4d 100644
--- a/components/badge/ScrollNumber.tsx
+++ b/components/badge/ScrollNumber.tsx
@@ -18,6 +18,7 @@ const scrollNumberProps = {
 export type ScrollNumberProps = Partial<ExtractPropTypes<typeof scrollNumberProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ScrollNumber',
   inheritAttrs: false,
   props: scrollNumberProps,
diff --git a/components/badge/SingleNumber.tsx b/components/badge/SingleNumber.tsx
index fb7500b2e..3c18e128a 100644
--- a/components/badge/SingleNumber.tsx
+++ b/components/badge/SingleNumber.tsx
@@ -45,6 +45,7 @@ function getOffset(start: number, end: number, unit: -1 | 1) {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'SingleNumber',
   props: {
     prefixCls: String,
diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
index cbb49077d..37d240117 100644
--- a/components/breadcrumb/Breadcrumb.tsx
+++ b/components/breadcrumb/Breadcrumb.tsx
@@ -52,6 +52,7 @@ function defaultItemRender(opt: {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABreadcrumb',
   props: breadcrumbProps(),
   slots: ['separator', 'itemRender'],
diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index dad66482c..a00d0e324 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -17,6 +17,7 @@ export const breadcrumbItemProps = () => ({
 
 export type BreadcrumbItemProps = Partial<ExtractPropTypes<ReturnType<typeof breadcrumbItemProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABreadcrumbItem',
   inheritAttrs: false,
   __ANT_BREADCRUMB_ITEM: true,
diff --git a/components/breadcrumb/BreadcrumbSeparator.tsx b/components/breadcrumb/BreadcrumbSeparator.tsx
index f0b4f2cab..91e90732d 100644
--- a/components/breadcrumb/BreadcrumbSeparator.tsx
+++ b/components/breadcrumb/BreadcrumbSeparator.tsx
@@ -11,6 +11,7 @@ export type BreadcrumbSeparatorProps = Partial<
 >;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ABreadcrumbSeparator',
   __ANT_BREADCRUMB_SEPARATOR: true,
   inheritAttrs: false,
diff --git a/components/button/LoadingIcon.tsx b/components/button/LoadingIcon.tsx
index 938969688..391527fd4 100644
--- a/components/button/LoadingIcon.tsx
+++ b/components/button/LoadingIcon.tsx
@@ -25,6 +25,7 @@ const resetStyle = (node: HTMLSpanElement) => {
   }
 };
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'LoadingIcon',
   props: {
     prefixCls: String,
diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx
index fd543d9ff..f934ece19 100644
--- a/components/button/button-group.tsx
+++ b/components/button/button-group.tsx
@@ -16,6 +16,7 @@ export const buttonGroupProps = () => ({
 export type ButtonGroupProps = Partial<ExtractPropTypes<ReturnType<typeof buttonGroupProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AButtonGroup',
   props: buttonGroupProps(),
   setup(props, { slots }) {
diff --git a/components/button/button.tsx b/components/button/button.tsx
index d5a1a3960..8ae5b4716 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -29,6 +29,7 @@ function isUnborderedButtonType(type: ButtonType | undefined) {
 }
 export { buttonProps };
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AButton',
   inheritAttrs: false,
   __ANT_BUTTON: true,
diff --git a/components/card/Card.tsx b/components/card/Card.tsx
index 0eab4a542..d3484716f 100644
--- a/components/card/Card.tsx
+++ b/components/card/Card.tsx
@@ -49,6 +49,7 @@ export const cardProps = () => ({
 export type CardProps = Partial<ExtractPropTypes<ReturnType<typeof cardProps>>>;
 
 const Card = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACard',
   props: cardProps(),
   slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'],
diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx
index 2d89c0485..9780cf4a8 100644
--- a/components/card/Grid.tsx
+++ b/components/card/Grid.tsx
@@ -8,6 +8,7 @@ export const cardGridProps = () => ({
 });
 export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardGridProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACardGrid',
   __ANT_CARD_GRID: true,
   props: cardGridProps(),
diff --git a/components/card/Meta.tsx b/components/card/Meta.tsx
index 5d2aba02b..3778e3941 100644
--- a/components/card/Meta.tsx
+++ b/components/card/Meta.tsx
@@ -12,6 +12,7 @@ export const cardMetaProps = () => ({
 });
 export type CardGridProps = Partial<ExtractPropTypes<ReturnType<typeof cardMetaProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACardMeta',
   props: cardMetaProps(),
   slots: ['title', 'description', 'avatar'],
diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx
index 1cf2b04b9..8417d5c54 100644
--- a/components/carousel/index.tsx
+++ b/components/carousel/index.tsx
@@ -70,6 +70,7 @@ export const carouselProps = () => ({
 });
 export type CarouselProps = Partial<ExtractPropTypes<ReturnType<typeof carouselProps>>>;
 const Carousel = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACarousel',
   inheritAttrs: false,
   props: carouselProps(),
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 775a0c3cb..44ba2625b 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -112,6 +112,7 @@ export interface CascaderRef {
 }
 
 const Cascader = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACascader',
   inheritAttrs: false,
   props: initDefaultProps(cascaderProps(), {
diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx
index 5faf7e311..3c6f62f18 100644
--- a/components/checkbox/Checkbox.tsx
+++ b/components/checkbox/Checkbox.tsx
@@ -12,6 +12,7 @@ import type { CheckboxChangeEvent, CheckboxProps } from './interface';
 import { CheckboxGroupContextKey, checkboxProps } from './interface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACheckbox',
   inheritAttrs: false,
   __ANT_CHECKBOX: true,
diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
index 0886ec971..d096fd8ce 100644
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@@ -6,6 +6,7 @@ import type { CheckboxOptionType } from './interface';
 import { CheckboxGroupContextKey, checkboxGroupProps } from './interface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACheckboxGroup',
   props: checkboxGroupProps(),
   // emits: ['change', 'update:value'],
diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx
index fe00042c6..12159363b 100644
--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@@ -31,6 +31,7 @@ function getActiveKeysArray(activeKey: Key | Key[]) {
 export { collapseProps };
 export type CollapseProps = Partial<ExtractPropTypes<ReturnType<typeof collapseProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACollapse',
   inheritAttrs: false,
   props: initDefaultProps(collapseProps(), {
diff --git a/components/collapse/CollapsePanel.tsx b/components/collapse/CollapsePanel.tsx
index e42c1bc50..b799a38e3 100644
--- a/components/collapse/CollapsePanel.tsx
+++ b/components/collapse/CollapsePanel.tsx
@@ -11,6 +11,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 export { collapsePanelProps };
 export type CollapsePanelProps = Partial<ExtractPropTypes<ReturnType<typeof collapsePanelProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACollapsePanel',
   inheritAttrs: false,
   props: initDefaultProps(collapsePanelProps(), {
diff --git a/components/collapse/PanelContent.tsx b/components/collapse/PanelContent.tsx
index b7e69c7c8..29a2aabff 100644
--- a/components/collapse/PanelContent.tsx
+++ b/components/collapse/PanelContent.tsx
@@ -3,6 +3,7 @@ import { collapsePanelProps } from './commonProps';
 import classNames from '../_util/classNames';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PanelContent',
   props: collapsePanelProps(),
   setup(props, { slots }) {
diff --git a/components/comment/index.tsx b/components/comment/index.tsx
index b642066be..7858d4a25 100644
--- a/components/comment/index.tsx
+++ b/components/comment/index.tsx
@@ -22,6 +22,7 @@ export const commentProps = () => ({
 export type CommentProps = Partial<ExtractPropTypes<ReturnType<typeof commentProps>>>;
 
 const Comment = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AComment',
   props: commentProps(),
   slots: ['actions', 'author', 'avatar', 'content', 'datetime'],
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index 51f285672..6c78b7c67 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -105,6 +105,7 @@ export const globalConfig = () => ({
 });
 
 const ConfigProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AConfigProvider',
   inheritAttrs: false,
   props: configProviderProps(),
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 991b708a9..4f9f4b10d 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -24,6 +24,7 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
   extraProps: ExtraProps,
 ) {
   const RangePicker = defineComponent({
+    compatConfig: { MODE: 3 },
     name: 'ARangePicker',
     inheritAttrs: false,
     props: {
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index cf2cd2755..97b2563fe 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -28,6 +28,7 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
       ...extraProps,
     };
     return defineComponent({
+      compatConfig: { MODE: 3 },
       name: displayName,
       inheritAttrs: false,
       props: comProps,
diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx
index a245b5d3c..956063b6f 100644
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@@ -46,6 +46,7 @@ export type DescriptionsItemProp = Partial<
 >;
 
 export const DescriptionsItem = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADescriptionsItem',
   props: descriptionsItemProp(),
   slots: ['label'],
@@ -157,6 +158,7 @@ export const descriptionsContext: InjectionKey<DescriptionsContextProp> =
   Symbol('descriptionsContext');
 
 const Descriptions = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADescriptions',
   props: descriptionsProps(),
   slots: ['title', 'extra'],
diff --git a/components/divider/index.tsx b/components/divider/index.tsx
index af4311980..0c6f74a20 100644
--- a/components/divider/index.tsx
+++ b/components/divider/index.tsx
@@ -27,6 +27,7 @@ export const dividerProps = () => ({
 export type DividerProps = Partial<ExtractPropTypes<ReturnType<typeof dividerProps>>>;
 
 const Divider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADivider',
   props: dividerProps(),
   setup(props, { slots }) {
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index 42c3bfe02..4f3325d35 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -90,6 +90,7 @@ export const drawerProps = () => ({
 export type DrawerProps = Partial<ExtractPropTypes<ReturnType<typeof drawerProps>>>;
 
 const Drawer = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADrawer',
   inheritAttrs: false,
   props: initDefaultProps(drawerProps(), {
diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx
index 9b35e8da4..88268ce94 100644
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@@ -12,6 +12,7 @@ const ButtonGroup = Button.Group;
 export type DropdownButtonProps = Partial<ExtractPropTypes<ReturnType<typeof dropdownButtonProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADropdownButton',
   inheritAttrs: false,
   __ANT_BUTTON: true,
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index a6e5ff717..a2b4601f3 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -15,6 +15,7 @@ import getPlacements from '../tooltip/placements';
 export type DropdownProps = Partial<ExtractPropTypes<ReturnType<typeof dropdownProps>>>;
 
 const Dropdown = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADropdown',
   inheritAttrs: false,
   props: initDefaultProps(dropdownProps(), {
diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
index 4bebce09f..8863e7d68 100644
--- a/components/form/ErrorList.tsx
+++ b/components/form/ErrorList.tsx
@@ -14,6 +14,7 @@ export interface ErrorListProps {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ErrorList',
   props: ['errors', 'help', 'onDomErrorVisibleChange', 'helpStatus', 'warnings'],
   setup(props) {
diff --git a/components/form/Form.tsx b/components/form/Form.tsx
index ac33a8b5c..5c8221fc9 100755
--- a/components/form/Form.tsx
+++ b/components/form/Form.tsx
@@ -99,6 +99,7 @@ function isEqualName(name1: NamePath, name2: NamePath) {
 }
 
 const Form = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AForm',
   inheritAttrs: false,
   props: initDefaultProps(formProps(), {
diff --git a/components/form/FormItem.tsx b/components/form/FormItem.tsx
index 62f4a99fd..dd49c1e85 100644
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@@ -122,6 +122,7 @@ let indexGuid = 0;
 const defaultItemNamePrefixCls = 'form_item';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AFormItem',
   inheritAttrs: false,
   __ANT_NEW_FORM_ITEM: true,
diff --git a/components/form/FormItemContext.ts b/components/form/FormItemContext.ts
index b2010b730..860a9f86e 100644
--- a/components/form/FormItemContext.ts
+++ b/components/form/FormItemContext.ts
@@ -94,6 +94,7 @@ export const useInjectFormItemContext = () => {
 };
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AFormItemRest',
   setup(_, { slots }) {
     provide(InternalContextKey, defaultInternalContext);
diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx
index 630fbec63..a2eb6813c 100644
--- a/components/form/FormItemInput.tsx
+++ b/components/form/FormItemInput.tsx
@@ -34,6 +34,7 @@ const iconMap: { [key: string]: any } = {
   validating: LoadingOutlined,
 };
 const FormItemInput = defineComponent({
+  compatConfig: { MODE: 3 },
   slots: ['help', 'extra', 'errors'],
   inheritAttrs: false,
   props: [
diff --git a/components/grid/Col.tsx b/components/grid/Col.tsx
index bc891c555..0009b0d44 100644
--- a/components/grid/Col.tsx
+++ b/components/grid/Col.tsx
@@ -69,6 +69,7 @@ export const colProps = () => ({
 export type ColProps = Partial<ExtractPropTypes<ReturnType<typeof colProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACol',
   props: colProps(),
   setup(props, { slots }) {
diff --git a/components/grid/Row.tsx b/components/grid/Row.tsx
index 857827ed0..5d8cd814e 100644
--- a/components/grid/Row.tsx
+++ b/components/grid/Row.tsx
@@ -31,6 +31,7 @@ export const rowProps = () => ({
 export type RowProps = Partial<ExtractPropTypes<ReturnType<typeof rowProps>>>;
 
 const ARow = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ARow',
   props: rowProps(),
   setup(props, { slots }) {
diff --git a/components/image/PreviewGroup.tsx b/components/image/PreviewGroup.tsx
index 47cdc49e6..9fad82b1f 100644
--- a/components/image/PreviewGroup.tsx
+++ b/components/image/PreviewGroup.tsx
@@ -21,6 +21,7 @@ export const icons = {
 };
 
 const InternalPreviewGroup = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AImagePreviewGroup',
   inheritAttrs: false,
   props: { previewPrefixCls: String },
diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx
index 90441a568..a2e055e9c 100644
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@@ -30,6 +30,7 @@ export const inputNumberProps = () => ({
 export type InputNumberProps = Partial<ExtractPropTypes<ReturnType<typeof inputNumberProps>>>;
 
 const InputNumber = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AInputNumber',
   inheritAttrs: false,
   props: inputNumberProps(),
diff --git a/components/input-number/src/InputNumber.tsx b/components/input-number/src/InputNumber.tsx
index 1317191cd..6817e3be8 100644
--- a/components/input-number/src/InputNumber.tsx
+++ b/components/input-number/src/InputNumber.tsx
@@ -79,6 +79,7 @@ export const inputNumberProps = () => ({
 });
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'InnerInputNumber',
   inheritAttrs: false,
   props: {
diff --git a/components/input-number/src/StepHandler.tsx b/components/input-number/src/StepHandler.tsx
index ebcde8d32..f63beb217 100644
--- a/components/input-number/src/StepHandler.tsx
+++ b/components/input-number/src/StepHandler.tsx
@@ -14,6 +14,7 @@ const STEP_INTERVAL = 200;
 const STEP_DELAY = 600;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'StepHandler',
   inheritAttrs: false,
   props: {
diff --git a/components/input/ClearableLabeledInput.tsx b/components/input/ClearableLabeledInput.tsx
index eab3603c9..85a51a833 100644
--- a/components/input/ClearableLabeledInput.tsx
+++ b/components/input/ClearableLabeledInput.tsx
@@ -12,6 +12,7 @@ import { getInputClassName, hasAddon, hasPrefixSuffix } from './util';
 const ClearableInputType = ['text', 'input'];
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ClearableLabeledInput',
   inheritAttrs: false,
   props: {
diff --git a/components/input/Group.tsx b/components/input/Group.tsx
index f0627a78b..22557ed8f 100644
--- a/components/input/Group.tsx
+++ b/components/input/Group.tsx
@@ -5,6 +5,7 @@ import type { FocusEventHandler, MouseEventHandler } from '../_util/EventInterfa
 import useConfigInject from '../_util/hooks/useConfigInject';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AInputGroup',
   props: {
     prefixCls: String,
diff --git a/components/input/Input.tsx b/components/input/Input.tsx
index 698d5c110..f7520dd68 100644
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@@ -105,6 +105,7 @@ export function triggerFocus(
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AInput',
   inheritAttrs: false,
   props: inputProps(),
diff --git a/components/input/Password.tsx b/components/input/Password.tsx
index 20d3521ec..dbda6b96f 100644
--- a/components/input/Password.tsx
+++ b/components/input/Password.tsx
@@ -17,6 +17,7 @@ const ActionMap = {
 const defaultIconRender = (visible: boolean) =>
   visible ? <EyeOutlined /> : <EyeInvisibleOutlined />;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AInputPassword',
   inheritAttrs: false,
   props: {
diff --git a/components/input/ResizableTextArea.tsx b/components/input/ResizableTextArea.tsx
index a654f38bc..b9c7a3320 100644
--- a/components/input/ResizableTextArea.tsx
+++ b/components/input/ResizableTextArea.tsx
@@ -23,6 +23,7 @@ const RESIZE_STATUS_RESIZING = 1;
 const RESIZE_STATUS_RESIZED = 2;
 
 const ResizableTextArea = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ResizableTextArea',
   inheritAttrs: false,
   props: textAreaProps(),
diff --git a/components/input/Search.tsx b/components/input/Search.tsx
index a5e6ac8b5..eb495e37b 100644
--- a/components/input/Search.tsx
+++ b/components/input/Search.tsx
@@ -14,6 +14,7 @@ import omit from '../_util/omit';
 import isMobile from '../_util/isMobile';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AInputSearch',
   inheritAttrs: false,
   props: {
diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
index 689676f0b..200df51f6 100644
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -45,6 +45,7 @@ function setTriggerValue(
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATextarea',
   inheritAttrs: false,
   props: textAreaProps(),
diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index 71bc6af28..cf3de3db3 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -58,6 +58,7 @@ const generateId = (() => {
 })();
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ALayoutSider',
   inheritAttrs: false,
   props: initDefaultProps(siderProps(), {
diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
index 41b5e6366..c10023c3e 100644
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@@ -20,6 +20,7 @@ type GeneratorArgument = {
 function generator({ suffixCls, tagName, name }: GeneratorArgument) {
   return (BasicComponent: typeof Basic) => {
     const Adapter = defineComponent({
+      compatConfig: { MODE: 3 },
       name,
       props: basicProps(),
       setup(props, { slots }) {
@@ -39,6 +40,7 @@ function generator({ suffixCls, tagName, name }: GeneratorArgument) {
 }
 
 const Basic = defineComponent({
+  compatConfig: { MODE: 3 },
   props: basicProps(),
   setup(props, { slots }) {
     return () => createVNode(props.tagName, { class: props.prefixCls }, slots);
@@ -46,6 +48,7 @@ const Basic = defineComponent({
 });
 
 const BasicLayout = defineComponent({
+  compatConfig: { MODE: 3 },
   props: basicProps(),
   setup(props, { slots }) {
     const { direction } = useConfigInject('', props);
diff --git a/components/list/Item.tsx b/components/list/Item.tsx
index 48b3cb8b6..51bc83e5e 100644
--- a/components/list/Item.tsx
+++ b/components/list/Item.tsx
@@ -20,6 +20,7 @@ export const listItemProps = () => ({
 
 export type ListItemProps = Partial<ExtractPropTypes<ReturnType<typeof listItemProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AListItem',
   inheritAttrs: false,
   Meta: ItemMeta,
diff --git a/components/list/ItemMeta.tsx b/components/list/ItemMeta.tsx
index 5259a525f..666043425 100644
--- a/components/list/ItemMeta.tsx
+++ b/components/list/ItemMeta.tsx
@@ -13,6 +13,7 @@ export const listItemMetaProps = () => ({
 export type ListItemMetaProps = Partial<ExtractPropTypes<ReturnType<typeof listItemMetaProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AListItemMeta',
   props: listItemMetaProps(),
   displayName: 'AListItemMeta', // 兼容历史函数式组件
diff --git a/components/list/index.tsx b/components/list/index.tsx
index 7471bb4ac..530d536dc 100644
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@@ -77,6 +77,7 @@ import { ListContextKey } from './contextKey';
 import type { RenderEmptyHandler } from '../config-provider/renderEmpty';
 
 const List = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AList',
   Item,
   props: initDefaultProps(listProps(), {
diff --git a/components/locale-provider/LocaleReceiver.tsx b/components/locale-provider/LocaleReceiver.tsx
index afc946b8b..f5f776aa5 100644
--- a/components/locale-provider/LocaleReceiver.tsx
+++ b/components/locale-provider/LocaleReceiver.tsx
@@ -19,6 +19,7 @@ export interface LocaleReceiverContext {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'LocaleReceiver',
   props: {
     componentName: String as PropType<LocaleComponentName>,
diff --git a/components/locale-provider/index.tsx b/components/locale-provider/index.tsx
index ed51a3009..ce85caf46 100644
--- a/components/locale-provider/index.tsx
+++ b/components/locale-provider/index.tsx
@@ -53,6 +53,7 @@ export interface LocaleProviderProps {
 export const ANT_MARK = 'internalMark';
 
 const LocaleProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ALocaleProvider',
   props: {
     locale: {
diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx
index 92860e4ea..85f3802fc 100644
--- a/components/mentions/index.tsx
+++ b/components/mentions/index.tsx
@@ -88,6 +88,7 @@ export const mentionsProps = () => ({
 export type MentionsProps = Partial<ExtractPropTypes<ReturnType<typeof mentionsProps>>>;
 
 const Mentions = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AMentions',
   inheritAttrs: false,
   props: mentionsProps(),
@@ -204,6 +205,7 @@ const Mentions = defineComponent({
 
 /* istanbul ignore next */
 export const MentionsOption = defineComponent({
+  compatConfig: { MODE: 3 },
   ...Option,
   name: 'AMentionsOption',
   props: optionProps,
diff --git a/components/menu/src/Divider.tsx b/components/menu/src/Divider.tsx
index 8bcedee8a..40ede4f2d 100644
--- a/components/menu/src/Divider.tsx
+++ b/components/menu/src/Divider.tsx
@@ -10,6 +10,7 @@ export const menuDividerProps = () => ({
 export type MenuDividerProps = Partial<ExtractPropTypes<ReturnType<typeof menuDividerProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AMenuDivider',
   props: menuDividerProps(),
   setup(props) {
diff --git a/components/menu/src/InlineSubMenuList.tsx b/components/menu/src/InlineSubMenuList.tsx
index c8a94f546..29794e8be 100644
--- a/components/menu/src/InlineSubMenuList.tsx
+++ b/components/menu/src/InlineSubMenuList.tsx
@@ -5,6 +5,7 @@ import type { MenuMode } from './interface';
 import SubMenuList from './SubMenuList';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'InlineSubMenuList',
   inheritAttrs: false,
   props: {
diff --git a/components/menu/src/ItemGroup.tsx b/components/menu/src/ItemGroup.tsx
index 6ea5d7a33..875decd58 100644
--- a/components/menu/src/ItemGroup.tsx
+++ b/components/menu/src/ItemGroup.tsx
@@ -12,6 +12,7 @@ export const menuItemGroupProps = () => ({
 export type MenuItemGroupProps = Partial<ExtractPropTypes<ReturnType<typeof menuItemGroupProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AMenuItemGroup',
   inheritAttrs: false,
   props: menuItemGroupProps(),
diff --git a/components/menu/src/Menu.tsx b/components/menu/src/Menu.tsx
index 863aeb521..006025fc8 100644
--- a/components/menu/src/Menu.tsx
+++ b/components/menu/src/Menu.tsx
@@ -84,6 +84,7 @@ export type MenuProps = Partial<ExtractPropTypes<ReturnType<typeof menuProps>>>;
 
 const EMPTY_LIST: string[] = [];
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AMenu',
   inheritAttrs: false,
   props: menuProps(),
diff --git a/components/menu/src/MenuItem.tsx b/components/menu/src/MenuItem.tsx
index db9b41741..f8d9cc6a0 100644
--- a/components/menu/src/MenuItem.tsx
+++ b/components/menu/src/MenuItem.tsx
@@ -31,6 +31,7 @@ export const menuItemProps = () => ({
 export type MenuItemProps = Partial<ExtractPropTypes<ReturnType<typeof menuItemProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AMenuItem',
   inheritAttrs: false,
   props: menuItemProps(),
diff --git a/components/menu/src/PopupTrigger.tsx b/components/menu/src/PopupTrigger.tsx
index 09996d427..169065162 100644
--- a/components/menu/src/PopupTrigger.tsx
+++ b/components/menu/src/PopupTrigger.tsx
@@ -15,6 +15,7 @@ const popupPlacementMap = {
   'vertical-right': 'leftTop',
 };
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PopupTrigger',
   inheritAttrs: false,
   props: {
diff --git a/components/menu/src/SubMenu.tsx b/components/menu/src/SubMenu.tsx
index 3eb4269f8..8d1ef3318 100644
--- a/components/menu/src/SubMenu.tsx
+++ b/components/menu/src/SubMenu.tsx
@@ -42,6 +42,7 @@ export const subMenuProps = () => ({
 export type SubMenuProps = Partial<ExtractPropTypes<ReturnType<typeof subMenuProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASubMenu',
   inheritAttrs: false,
   props: subMenuProps(),
diff --git a/components/menu/src/hooks/useKeyPath.ts b/components/menu/src/hooks/useKeyPath.ts
index 27b1413b0..6c98c673a 100644
--- a/components/menu/src/hooks/useKeyPath.ts
+++ b/components/menu/src/hooks/useKeyPath.ts
@@ -28,6 +28,7 @@ const useProvideKeyPath = (eventKey: string, key: Key, menuInfo: StoreMenuInfo)
 
 const measure = Symbol('measure');
 export const PathContext = defineComponent({
+  compatConfig: { MODE: 3 },
   setup(_props, { slots }) {
     // 不需要响应式
     provide(measure, true);
diff --git a/components/menu/src/hooks/useMenuContext.ts b/components/menu/src/hooks/useMenuContext.ts
index a161ea94a..f0b0b47f0 100644
--- a/components/menu/src/hooks/useMenuContext.ts
+++ b/components/menu/src/hooks/useMenuContext.ts
@@ -109,6 +109,7 @@ const useInjectFirstLevel = () => {
 };
 
 const MenuContextProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'MenuContextProvider',
   inheritAttrs: false,
   props: {
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index 011daa78f..b13b7edb6 100644
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@@ -140,6 +140,7 @@ export interface ModalLocale {
 export const destroyFns = [];
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AModal',
   inheritAttrs: false,
   props: initDefaultProps(modalProps(), {
diff --git a/components/page-header/index.tsx b/components/page-header/index.tsx
index 86768b508..4da27e9a5 100644
--- a/components/page-header/index.tsx
+++ b/components/page-header/index.tsx
@@ -32,6 +32,7 @@ export const pageHeaderProps = () => ({
 export type PageHeaderProps = Partial<ExtractPropTypes<ReturnType<typeof pageHeaderProps>>>;
 
 const PageHeader = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'APageHeader',
   props: pageHeaderProps(),
   // emits: ['back'],
diff --git a/components/pagination/MiniSelect.tsx b/components/pagination/MiniSelect.tsx
index 283c9a643..910cedaff 100644
--- a/components/pagination/MiniSelect.tsx
+++ b/components/pagination/MiniSelect.tsx
@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import VcSelect, { selectProps } from '../select';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
   props: selectProps(),
   Option: VcSelect.Option,
diff --git a/components/pagination/Pagination.tsx b/components/pagination/Pagination.tsx
index be101e9f0..36c255ba6 100644
--- a/components/pagination/Pagination.tsx
+++ b/components/pagination/Pagination.tsx
@@ -75,6 +75,7 @@ export interface PaginationLocale {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'APagination',
   inheritAttrs: false,
   props: paginationProps(),
diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx
index 153641292..6bbe831f5 100644
--- a/components/popconfirm/index.tsx
+++ b/components/popconfirm/index.tsx
@@ -56,6 +56,7 @@ export interface PopconfirmLocale {
 }
 
 const Popconfirm = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'APopconfirm',
   props: initDefaultProps(popconfirmProps(), {
     ...tooltipDefaultProps(),
diff --git a/components/popover/index.tsx b/components/popover/index.tsx
index 3b4a8db93..4cea05bc9 100644
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@@ -19,6 +19,7 @@ export const popoverProps = () => ({
 export type PopoverProps = Partial<ExtractPropTypes<ReturnType<typeof popoverProps>>>;
 
 const Popover = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'APopover',
   props: initDefaultProps(popoverProps(), {
     ...tooltipDefaultProps(),
diff --git a/components/progress/Circle.tsx b/components/progress/Circle.tsx
index 3f95f0b25..8ab7180e5 100644
--- a/components/progress/Circle.tsx
+++ b/components/progress/Circle.tsx
@@ -22,6 +22,7 @@ function getStrokeColor({
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Circle',
   inheritAttrs: false,
   props: progressProps(),
diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx
index fb87838f1..d8b84b97b 100644
--- a/components/progress/Line.tsx
+++ b/components/progress/Line.tsx
@@ -68,6 +68,7 @@ export const handleGradient = (strokeColor: ProgressGradient, directionConfig: D
 };
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Line',
   props: lineProps(),
   setup(props, { slots }) {
diff --git a/components/progress/Steps.tsx b/components/progress/Steps.tsx
index bd3346783..322673fa4 100644
--- a/components/progress/Steps.tsx
+++ b/components/progress/Steps.tsx
@@ -17,6 +17,7 @@ export const stepsProps = () => ({
 export type StepsProps = Partial<ExtractPropTypes<typeof stepsProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Steps',
   props: stepsProps(),
   setup(props, { slots }) {
diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx
index 36cceb1e2..335c3edeb 100644
--- a/components/progress/progress.tsx
+++ b/components/progress/progress.tsx
@@ -14,6 +14,7 @@ import { progressProps, progressStatuses } from './props';
 import type { VueNode } from '../_util/type';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AProgress',
   props: initDefaultProps(progressProps(), {
     type: 'line',
diff --git a/components/radio/Group.tsx b/components/radio/Group.tsx
index 7b29700d8..0548defaa 100644
--- a/components/radio/Group.tsx
+++ b/components/radio/Group.tsx
@@ -39,6 +39,7 @@ export const radioGroupProps = () => ({
 export type RadioGroupProps = Partial<ExtractPropTypes<ReturnType<typeof radioGroupProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ARadioGroup',
   props: radioGroupProps(),
   // emits: ['update:value', 'change'],
diff --git a/components/radio/Radio.tsx b/components/radio/Radio.tsx
index c8a8cae30..64c080d9c 100644
--- a/components/radio/Radio.tsx
+++ b/components/radio/Radio.tsx
@@ -29,6 +29,7 @@ export const radioProps = () => ({
 export type RadioProps = Partial<ExtractPropTypes<ReturnType<typeof radioProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ARadio',
   props: radioProps(),
   // emits: ['update:checked', 'update:value', 'change', 'blur', 'focus'],
diff --git a/components/radio/RadioButton.tsx b/components/radio/RadioButton.tsx
index e2c37d2c3..ac7221fb0 100644
--- a/components/radio/RadioButton.tsx
+++ b/components/radio/RadioButton.tsx
@@ -5,6 +5,7 @@ import useConfigInject from '../_util/hooks/useConfigInject';
 import type { RadioGroupContext } from './interface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ARadioButton',
   props: radioProps(),
   setup(props, { slots }) {
diff --git a/components/rate/Star.tsx b/components/rate/Star.tsx
index 76e0043b4..0eb16b558 100644
--- a/components/rate/Star.tsx
+++ b/components/rate/Star.tsx
@@ -20,6 +20,7 @@ export const starProps = {
 export type StarProps = Partial<ExtractPropTypes<typeof starProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Star',
   inheritAttrs: false,
   props: starProps,
diff --git a/components/rate/index.tsx b/components/rate/index.tsx
index c9521db98..d7a7ad956 100644
--- a/components/rate/index.tsx
+++ b/components/rate/index.tsx
@@ -40,6 +40,7 @@ export const rateProps = () => ({
 export type RateProps = Partial<ExtractPropTypes<ReturnType<typeof rateProps>>>;
 
 const Rate = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ARate',
   inheritAttrs: false,
   props: initDefaultProps(rateProps(), {
diff --git a/components/result/index.tsx b/components/result/index.tsx
index c24d1953e..b7a0c4cf2 100644
--- a/components/result/index.tsx
+++ b/components/result/index.tsx
@@ -59,6 +59,7 @@ const renderExtra = (prefixCls: string, extra: VNodeTypes) =>
   extra && <div class={`${prefixCls}-extra`}>{extra}</div>;
 
 const Result = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AResult',
   props: resultProps(),
   slots: ['title', 'subTitle', 'icon', 'extra'],
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 4275c5413..e013d27df 100644
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -55,6 +55,7 @@ export type SelectProps = Partial<ExtractPropTypes<ReturnType<typeof selectProps
 
 const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
 const Select = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASelect',
   Option,
   OptGroup,
diff --git a/components/skeleton/Avatar.tsx b/components/skeleton/Avatar.tsx
index c73de0eb6..e8610b970 100644
--- a/components/skeleton/Avatar.tsx
+++ b/components/skeleton/Avatar.tsx
@@ -15,6 +15,7 @@ export const avatarProps = () => {
 export type SkeletonAvatarProps = Partial<ExtractPropTypes<ReturnType<typeof avatarProps>>>;
 
 const SkeletonAvatar = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASkeletonAvatar',
   props: initDefaultProps(avatarProps(), {
     size: 'default',
diff --git a/components/skeleton/Button.tsx b/components/skeleton/Button.tsx
index 4dd33bcd9..2db3ae6d2 100644
--- a/components/skeleton/Button.tsx
+++ b/components/skeleton/Button.tsx
@@ -16,6 +16,7 @@ export const skeletonButtonProps = () => {
 export type SkeletonButtonProps = Partial<ExtractPropTypes<ReturnType<typeof skeletonButtonProps>>>;
 
 const SkeletonButton = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASkeletonButton',
   props: initDefaultProps(skeletonButtonProps(), {
     size: 'default',
diff --git a/components/skeleton/Image.tsx b/components/skeleton/Image.tsx
index f1578b03f..29820acca 100644
--- a/components/skeleton/Image.tsx
+++ b/components/skeleton/Image.tsx
@@ -11,6 +11,7 @@ const path =
   'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';
 
 const SkeletonImage = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASkeletonImage',
   props: omit(skeletonElementProps(), ['size', 'shape', 'active']),
   setup(props) {
diff --git a/components/skeleton/Input.tsx b/components/skeleton/Input.tsx
index 5ade312b8..26963a074 100644
--- a/components/skeleton/Input.tsx
+++ b/components/skeleton/Input.tsx
@@ -11,6 +11,7 @@ export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' |
 }
 
 const SkeletonInput = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASkeletonInput',
   props: {
     ...omit(skeletonElementProps(), ['shape']),
diff --git a/components/skeleton/Paragraph.tsx b/components/skeleton/Paragraph.tsx
index 5202f8525..d1d2d7301 100644
--- a/components/skeleton/Paragraph.tsx
+++ b/components/skeleton/Paragraph.tsx
@@ -13,6 +13,7 @@ export type SkeletonParagraphProps = Partial<
 >;
 
 const SkeletonParagraph = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'SkeletonParagraph',
   props: skeletonParagraphProps(),
   setup(props) {
diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx
index a91045aca..35c7b9078 100644
--- a/components/skeleton/Skeleton.tsx
+++ b/components/skeleton/Skeleton.tsx
@@ -80,6 +80,7 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton
 }
 
 const Skeleton = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASkeleton',
   props: initDefaultProps(skeletonProps(), {
     avatar: false,
diff --git a/components/skeleton/Title.tsx b/components/skeleton/Title.tsx
index 36eb71ef5..feaf6bfd0 100644
--- a/components/skeleton/Title.tsx
+++ b/components/skeleton/Title.tsx
@@ -9,6 +9,7 @@ export const skeletonTitleProps = () => ({
 export type SkeletonTitleProps = Partial<ExtractPropTypes<ReturnType<typeof skeletonTitleProps>>>;
 
 const SkeletonTitle = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'SkeletonTitle',
   props: skeletonTitleProps(),
   setup(props) {
diff --git a/components/slider/SliderTooltip.tsx b/components/slider/SliderTooltip.tsx
index e9b070a09..f9be502d8 100644
--- a/components/slider/SliderTooltip.tsx
+++ b/components/slider/SliderTooltip.tsx
@@ -3,6 +3,7 @@ import Tooltip, { tooltipProps } from '../tooltip';
 import raf from '../_util/raf';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'SliderTooltip',
   inheritAttrs: false,
   props: tooltipProps(),
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index b12e82e4c..b1bc32d1e 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -78,6 +78,7 @@ export type SliderProps = Partial<ExtractPropTypes<ReturnType<typeof sliderProps
 export type Visibles = { [index: number]: boolean };
 
 const Slider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASlider',
   inheritAttrs: false,
   props: sliderProps(),
diff --git a/components/space/index.tsx b/components/space/index.tsx
index 4a22ad9ec..b53128895 100644
--- a/components/space/index.tsx
+++ b/components/space/index.tsx
@@ -31,6 +31,7 @@ function getNumberSize(size: SpaceSize) {
 }
 
 const Space = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASpace',
   props: spaceProps(),
   slots: ['split'],
diff --git a/components/spin/Spin.tsx b/components/spin/Spin.tsx
index 41c318cf9..dd115cab7 100644
--- a/components/spin/Spin.tsx
+++ b/components/spin/Spin.tsx
@@ -32,6 +32,7 @@ export function setDefaultIndicator(Content: any) {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASpin',
   inheritAttrs: false,
   props: initDefaultProps(spinProps(), {
diff --git a/components/statistic/Countdown.tsx b/components/statistic/Countdown.tsx
index 566e08d22..ecba9fcea 100644
--- a/components/statistic/Countdown.tsx
+++ b/components/statistic/Countdown.tsx
@@ -23,6 +23,7 @@ export const countdownProps = () => {
 
 export type CountdownProps = Partial<ExtractPropTypes<ReturnType<typeof countdownProps>>>;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AStatisticCountdown',
   props: initDefaultProps(countdownProps(), {
     format: 'HH:mm:ss',
diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx
index 7d6c0c33e..30e08ec64 100644
--- a/components/statistic/Statistic.tsx
+++ b/components/statistic/Statistic.tsx
@@ -28,6 +28,7 @@ export const statisticProps = () => ({
 export type StatisticProps = Partial<ExtractPropTypes<ReturnType<typeof statisticProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AStatistic',
   props: initDefaultProps(statisticProps(), {
     decimalSeparator: '.',
diff --git a/components/steps/index.tsx b/components/steps/index.tsx
index 0c1f8ff81..dad2b58e7 100644
--- a/components/steps/index.tsx
+++ b/components/steps/index.tsx
@@ -49,6 +49,7 @@ export type StepsProps = Partial<ExtractPropTypes<ReturnType<typeof stepsProps>>
 export type StepProps = Partial<ExtractPropTypes<ReturnType<typeof stepProps>>>;
 
 const Steps = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASteps',
   inheritAttrs: false,
   props: initDefaultProps(stepsProps(), {
@@ -128,6 +129,7 @@ const Steps = defineComponent({
 
 /* istanbul ignore next */
 export const Step = defineComponent({
+  compatConfig: { MODE: 3 },
   ...VcStep,
   name: 'AStep',
   props: VcStepProps(),
diff --git a/components/switch/index.tsx b/components/switch/index.tsx
index 39491c65c..b0c86a406 100644
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@@ -55,6 +55,7 @@ export const switchProps = () => ({
 export type SwitchProps = Partial<ExtractPropTypes<ReturnType<typeof switchProps>>>;
 
 const Switch = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ASwitch',
   __ANT_SWITCH: true,
   inheritAttrs: false,
diff --git a/components/table/hooks/useFilter/FilterSearch.tsx b/components/table/hooks/useFilter/FilterSearch.tsx
index 7487ef805..9b47d0f09 100644
--- a/components/table/hooks/useFilter/FilterSearch.tsx
+++ b/components/table/hooks/useFilter/FilterSearch.tsx
@@ -5,6 +5,7 @@ import type { TableLocale } from '../../interface';
 import Input from '../../../input';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'FilterSearch',
   inheritAttrs: false,
   props: {
diff --git a/components/tabs/src/TabContext.ts b/components/tabs/src/TabContext.ts
index d563aa7f1..50da557ac 100644
--- a/components/tabs/src/TabContext.ts
+++ b/components/tabs/src/TabContext.ts
@@ -18,6 +18,7 @@ export const useInjectTabs = () => {
 };
 
 const TabsContextProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TabsContextProvider',
   inheritAttrs: false,
   props: {
diff --git a/components/tabs/src/TabNavList/AddButton.tsx b/components/tabs/src/TabNavList/AddButton.tsx
index 896133991..677d301eb 100644
--- a/components/tabs/src/TabNavList/AddButton.tsx
+++ b/components/tabs/src/TabNavList/AddButton.tsx
@@ -9,6 +9,7 @@ export interface AddButtonProps {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AddButton',
   inheritAttrs: false,
   props: {
diff --git a/components/tabs/src/TabNavList/OperationNode.tsx b/components/tabs/src/TabNavList/OperationNode.tsx
index 2891f972d..22ec38af1 100644
--- a/components/tabs/src/TabNavList/OperationNode.tsx
+++ b/components/tabs/src/TabNavList/OperationNode.tsx
@@ -30,6 +30,7 @@ export const operationNodeProps = {
 export type OperationNodeProps = Partial<ExtractPropTypes<typeof operationNodeProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'OperationNode',
   inheritAttrs: false,
   props: operationNodeProps,
diff --git a/components/tabs/src/TabNavList/TabNode.tsx b/components/tabs/src/TabNavList/TabNode.tsx
index 701abb3fe..5117ac931 100644
--- a/components/tabs/src/TabNavList/TabNode.tsx
+++ b/components/tabs/src/TabNavList/TabNode.tsx
@@ -21,6 +21,7 @@ export interface TabNodeProps {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TabNode',
   props: {
     id: { type: String as PropType<string> },
diff --git a/components/tabs/src/TabNavList/index.tsx b/components/tabs/src/TabNavList/index.tsx
index e6f91c0fa..e21568218 100644
--- a/components/tabs/src/TabNavList/index.tsx
+++ b/components/tabs/src/TabNavList/index.tsx
@@ -60,6 +60,7 @@ interface ExtraContentProps {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TabNavList',
   inheritAttrs: false,
   props: tabNavListProps(),
diff --git a/components/tabs/src/TabPanelList/TabPane.tsx b/components/tabs/src/TabPanelList/TabPane.tsx
index fcb8dc682..34afe68e4 100644
--- a/components/tabs/src/TabPanelList/TabPane.tsx
+++ b/components/tabs/src/TabPanelList/TabPane.tsx
@@ -21,6 +21,7 @@ const tabPaneProps = () => ({
 export type TabPaneProps = Partial<ExtractPropTypes<ReturnType<typeof tabPaneProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATabPane',
   inheritAttrs: false,
   __ANT_TAB_PANE: true,
diff --git a/components/tabs/src/TabPanelList/index.tsx b/components/tabs/src/TabPanelList/index.tsx
index 82754ed77..d3d4a8be2 100644
--- a/components/tabs/src/TabPanelList/index.tsx
+++ b/components/tabs/src/TabPanelList/index.tsx
@@ -14,6 +14,7 @@ export interface TabPanelListProps {
   destroyInactiveTabPane?: boolean;
 }
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TabPanelList',
   inheritAttrs: false,
   props: {
diff --git a/components/tabs/src/Tabs.tsx b/components/tabs/src/Tabs.tsx
index 956f1654d..2a16924ed 100644
--- a/components/tabs/src/Tabs.tsx
+++ b/components/tabs/src/Tabs.tsx
@@ -115,6 +115,7 @@ function parseTabList(children: any[]): Tab[] {
     .filter(tab => tab);
 }
 const InternalTabs = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'InternalTabs',
   inheritAttrs: false,
   props: {
@@ -328,6 +329,7 @@ const InternalTabs = defineComponent({
 });
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATabs',
   inheritAttrs: false,
   props: initDefaultProps(tabsProps(), {
diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx
index a866ad4c3..001b6c02c 100644
--- a/components/tag/CheckableTag.tsx
+++ b/components/tag/CheckableTag.tsx
@@ -17,6 +17,7 @@ const checkableTagProps = () => ({
 export type CheckableTagProps = Partial<ExtractPropTypes<ReturnType<typeof checkableTagProps>>>;
 
 const CheckableTag = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ACheckableTag',
   props: checkableTagProps(),
   // emits: ['update:checked', 'change', 'click'],
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index ef2bbea61..7ad896a99 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -31,6 +31,7 @@ export const tagProps = () => ({
 export type TagProps = HTMLAttributes & Partial<ExtractPropTypes<ReturnType<typeof tagProps>>>;
 
 const Tag = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATag',
   props: tagProps(),
   // emits: ['update:visible', 'close'],
diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx
index 1b4821b6c..e8e8b0924 100644
--- a/components/timeline/Timeline.tsx
+++ b/components/timeline/Timeline.tsx
@@ -21,6 +21,7 @@ export const timelineProps = () => ({
 export type TimelineProps = Partial<ExtractPropTypes<ReturnType<typeof timelineProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATimeline',
   props: initDefaultProps(timelineProps(), {
     reverse: false,
diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index e1ee03687..2564e7f43 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/components/timeline/TimelineItem.tsx
@@ -18,6 +18,7 @@ export const timelineItemProps = () => ({
 export type TimelineItemProps = Partial<ExtractPropTypes<ReturnType<typeof timelineItemProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATimelineItem',
   props: initDefaultProps(timelineItemProps(), {
     color: 'blue',
diff --git a/components/tooltip/Tooltip.tsx b/components/tooltip/Tooltip.tsx
index 0df852a35..55b198f1a 100644
--- a/components/tooltip/Tooltip.tsx
+++ b/components/tooltip/Tooltip.tsx
@@ -60,6 +60,7 @@ export const tooltipDefaultProps = () => ({
 export type TooltipProps = Partial<ExtractPropTypes<ReturnType<typeof tooltipProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATooltip',
   inheritAttrs: false,
   props: initDefaultProps(tooltipProps(), {
diff --git a/components/transfer/ListBody.tsx b/components/transfer/ListBody.tsx
index cd5a54513..0423abc01 100644
--- a/components/transfer/ListBody.tsx
+++ b/components/transfer/ListBody.tsx
@@ -40,6 +40,7 @@ function parsePagination(pagination) {
 }
 
 const ListBody = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ListBody',
   inheritAttrs: false,
   props: transferListBodyProps,
diff --git a/components/transfer/ListItem.tsx b/components/transfer/ListItem.tsx
index ec7a07784..267fba7f9 100644
--- a/components/transfer/ListItem.tsx
+++ b/components/transfer/ListItem.tsx
@@ -26,6 +26,7 @@ export const transferListItemProps = {
 export type TransferListItemProps = Partial<ExtractPropTypes<typeof transferListItemProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ListItem',
   inheritAttrs: false,
   props: transferListItemProps,
diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx
index b772a9d87..786bf10c6 100644
--- a/components/transfer/index.tsx
+++ b/components/transfer/index.tsx
@@ -105,6 +105,7 @@ export const transferProps = () => ({
 export type TransferProps = Partial<ExtractPropTypes<ReturnType<typeof transferProps>>>;
 
 const Transfer = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATransfer',
   inheritAttrs: false,
   props: transferProps(),
diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx
index ae8150d9b..2a75f6249 100644
--- a/components/transfer/list.tsx
+++ b/components/transfer/list.tsx
@@ -62,6 +62,7 @@ export const transferListProps = {
 export type TransferListProps = Partial<ExtractPropTypes<typeof transferListProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TransferList',
   inheritAttrs: false,
   props: transferListProps,
diff --git a/components/transfer/search.tsx b/components/transfer/search.tsx
index b1e05373c..efac7a700 100644
--- a/components/transfer/search.tsx
+++ b/components/transfer/search.tsx
@@ -17,6 +17,7 @@ export const transferSearchProps = {
 export type TransferSearchProps = Partial<ExtractPropTypes<typeof transferSearchProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Search',
   inheritAttrs: false,
   props: initDefaultProps(transferSearchProps, {
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 2d7b430b5..b61489e4c 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -70,6 +70,7 @@ export function treeSelectProps<
 export type TreeSelectProps = Partial<ExtractPropTypes<ReturnType<typeof treeSelectProps>>>;
 
 const TreeSelect = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATreeSelect',
   inheritAttrs: false,
   props: initDefaultProps(treeSelectProps(), {
diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx
index 00632ebf5..b34f7a095 100644
--- a/components/tree/DirectoryTree.tsx
+++ b/components/tree/DirectoryTree.tsx
@@ -37,6 +37,7 @@ function getIcon(props: AntdTreeNodeAttribute) {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ADirectoryTree',
   inheritAttrs: false,
   props: initDefaultProps(directoryTreeProps(), {
diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx
index d4ae4ef79..9f2fb6d06 100644
--- a/components/tree/Tree.tsx
+++ b/components/tree/Tree.tsx
@@ -142,6 +142,7 @@ export const treeProps = () => {
 export type TreeProps = Partial<ExtractPropTypes<ReturnType<typeof treeProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ATree',
   inheritAttrs: false,
   props: initDefaultProps(treeProps(), {
diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx
index d4761ff57..1e92bb145 100644
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@@ -123,6 +123,7 @@ export const baseProps = () => ({
 });
 
 const Base = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Base',
   inheritAttrs: false,
   props: baseProps(),
diff --git a/components/typography/Editable.tsx b/components/typography/Editable.tsx
index 52462f5fe..4f0fd9dbf 100644
--- a/components/typography/Editable.tsx
+++ b/components/typography/Editable.tsx
@@ -21,6 +21,7 @@ const editableProps = () => ({
 });
 export type EditableProps = Partial<ExtractPropTypes<ReturnType<typeof editableProps>>>;
 const Editable = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Editable',
   props: editableProps(),
   // emits: ['save', 'cancel', 'end', 'change'],
diff --git a/components/upload/Dragger.tsx b/components/upload/Dragger.tsx
index 251912a4f..0d94bcca9 100644
--- a/components/upload/Dragger.tsx
+++ b/components/upload/Dragger.tsx
@@ -3,6 +3,7 @@ import Upload from './Upload';
 import { uploadProps } from './interface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AUploadDragger',
   inheritAttrs: false,
   props: uploadProps(),
diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx
index 3d7cb0902..04653a9d2 100644
--- a/components/upload/Upload.tsx
+++ b/components/upload/Upload.tsx
@@ -26,6 +26,7 @@ import { useInjectFormItemContext } from '../form';
 export const LIST_IGNORE = `__LIST_IGNORE_${Date.now()}__`;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AUpload',
   inheritAttrs: false,
   props: initDefaultProps(uploadProps(), {
diff --git a/components/upload/UploadList/ListItem.tsx b/components/upload/UploadList/ListItem.tsx
index de38a6e2a..229f4132a 100644
--- a/components/upload/UploadList/ListItem.tsx
+++ b/components/upload/UploadList/ListItem.tsx
@@ -52,6 +52,7 @@ export const listItemProps = () => {
 export type ListItemProps = Partial<ExtractPropTypes<ReturnType<typeof listItemProps>>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ListItem',
   inheritAttrs: false,
   props: listItemProps(),
diff --git a/components/upload/UploadList/index.tsx b/components/upload/UploadList/index.tsx
index a44068335..2834d4818 100644
--- a/components/upload/UploadList/index.tsx
+++ b/components/upload/UploadList/index.tsx
@@ -21,6 +21,7 @@ const HackSlot = (_, { slots }) => {
 };
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AUploadList',
   props: initDefaultProps(uploadListProps(), {
     listType: 'text' as UploadListType, // or picture
diff --git a/components/vc-align/Align.tsx b/components/vc-align/Align.tsx
index d7ce12f36..71a1a33d1 100644
--- a/components/vc-align/Align.tsx
+++ b/components/vc-align/Align.tsx
@@ -59,6 +59,7 @@ function getPoint(point: TargetType) {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Align',
   props: alignProps,
   emits: ['align'],
diff --git a/components/vc-cascader/Cascader.tsx b/components/vc-cascader/Cascader.tsx
index 071882267..8374c76d5 100644
--- a/components/vc-cascader/Cascader.tsx
+++ b/components/vc-cascader/Cascader.tsx
@@ -187,6 +187,7 @@ function toRawValues(value: ValueType): SingleValueType[] {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Cascader',
   inheritAttrs: false,
   props: initDefaultProps(internalCascaderProps(), {}),
diff --git a/components/vc-cascader/OptionList/index.tsx b/components/vc-cascader/OptionList/index.tsx
index f55070336..e9e999a8f 100644
--- a/components/vc-cascader/OptionList/index.tsx
+++ b/components/vc-cascader/OptionList/index.tsx
@@ -17,6 +17,7 @@ import type { Key } from '../../_util/type';
 import type { EventHandler } from '../../_util/EventInterface';
 import Column, { FIX_LABEL } from './Column';
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'OptionList',
   inheritAttrs: false,
   setup(_props, context) {
diff --git a/components/vc-checkbox/Checkbox.tsx b/components/vc-checkbox/Checkbox.tsx
index 987a14dd1..87ba6934e 100644
--- a/components/vc-checkbox/Checkbox.tsx
+++ b/components/vc-checkbox/Checkbox.tsx
@@ -20,6 +20,7 @@ export const checkboxProps = {
   required: Boolean,
 };
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Checkbox',
   inheritAttrs: false,
   props: initDefaultProps(checkboxProps, {
diff --git a/components/vc-dialog/Content.tsx b/components/vc-dialog/Content.tsx
index 1163b9e49..9eb965a81 100644
--- a/components/vc-dialog/Content.tsx
+++ b/components/vc-dialog/Content.tsx
@@ -11,6 +11,7 @@ export type ContentRef = {
   changeActive: (next: boolean) => void;
 };
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Content',
   inheritAttrs: false,
   props: {
diff --git a/components/vc-dialog/Dialog.tsx b/components/vc-dialog/Dialog.tsx
index 1a37b40b5..33ed64b27 100644
--- a/components/vc-dialog/Dialog.tsx
+++ b/components/vc-dialog/Dialog.tsx
@@ -15,6 +15,7 @@ import Mask from './Mask';
 import { getMotionName, getUUID } from './util';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Dialog',
   inheritAttrs: false,
   props: initDefaultProps(
diff --git a/components/vc-dialog/DialogWrap.tsx b/components/vc-dialog/DialogWrap.tsx
index dce058f9b..abbb9a26d 100644
--- a/components/vc-dialog/DialogWrap.tsx
+++ b/components/vc-dialog/DialogWrap.tsx
@@ -7,6 +7,7 @@ import { useProvidePortal } from '../vc-trigger/context';
 import { initDefaultProps } from '../_util/props-util';
 const IDialogPropTypes = getDialogPropTypes();
 const DialogWrap = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'DialogWrap',
   inheritAttrs: false,
   props: initDefaultProps(IDialogPropTypes, {
diff --git a/components/vc-dialog/Mask.tsx b/components/vc-dialog/Mask.tsx
index 4c488a1e7..4b858d10a 100644
--- a/components/vc-dialog/Mask.tsx
+++ b/components/vc-dialog/Mask.tsx
@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import Transition, { getTransitionProps } from '../_util/transition';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Mask',
   props: {
     prefixCls: String,
diff --git a/components/vc-drawer/src/DrawerChild.tsx b/components/vc-drawer/src/DrawerChild.tsx
index 071de2356..4d6a11d11 100644
--- a/components/vc-drawer/src/DrawerChild.tsx
+++ b/components/vc-drawer/src/DrawerChild.tsx
@@ -33,6 +33,7 @@ export interface scrollLockOptions {
 }
 
 const DrawerChild = defineComponent({
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
   props: drawerChildProps(),
   emits: ['close', 'handleClick', 'change'],
diff --git a/components/vc-drawer/src/DrawerWrapper.tsx b/components/vc-drawer/src/DrawerWrapper.tsx
index 0984d3287..af0bd7124 100644
--- a/components/vc-drawer/src/DrawerWrapper.tsx
+++ b/components/vc-drawer/src/DrawerWrapper.tsx
@@ -5,6 +5,7 @@ import { drawerProps } from './IDrawerPropTypes';
 import PortalWrapper from '../../_util/PortalWrapper';
 
 const DrawerWrapper = defineComponent({
+  compatConfig: { MODE: 3 },
   inheritAttrs: false,
   props: initDefaultProps(drawerProps(), {
     prefixCls: 'drawer',
diff --git a/components/vc-dropdown/Dropdown.tsx b/components/vc-dropdown/Dropdown.tsx
index 43082ae59..403f3e960 100644
--- a/components/vc-dropdown/Dropdown.tsx
+++ b/components/vc-dropdown/Dropdown.tsx
@@ -7,6 +7,7 @@ import { cloneElement } from '../_util/vnode';
 import classNames from '../_util/classNames';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   props: {
     minOverlayWidthMatchTrigger: { type: Boolean, default: undefined },
     arrow: { type: Boolean, default: false },
diff --git a/components/vc-image/src/Image.tsx b/components/vc-image/src/Image.tsx
index b6cb47ad8..7c56c94f3 100644
--- a/components/vc-image/src/Image.tsx
+++ b/components/vc-image/src/Image.tsx
@@ -63,6 +63,7 @@ export const mergeDefaultValue = <T extends object>(obj: T, defaultValues: objec
 };
 let uuid = 0;
 const ImageInternal = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Image',
   inheritAttrs: false,
   props: imageProps(),
diff --git a/components/vc-image/src/Preview.tsx b/components/vc-image/src/Preview.tsx
index 14f041538..cfccdb270 100644
--- a/components/vc-image/src/Preview.tsx
+++ b/components/vc-image/src/Preview.tsx
@@ -54,6 +54,7 @@ export const previewProps = {
   },
 };
 const Preview = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Preview',
   inheritAttrs: false,
   props: previewProps,
diff --git a/components/vc-image/src/PreviewGroup.tsx b/components/vc-image/src/PreviewGroup.tsx
index 6674990f2..0a1eeb8dd 100644
--- a/components/vc-image/src/PreviewGroup.tsx
+++ b/components/vc-image/src/PreviewGroup.tsx
@@ -57,6 +57,7 @@ export const context = {
 };
 
 const Group = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PreviewGroup',
   inheritAttrs: false,
   props: {
diff --git a/components/vc-mentions/src/DropdownMenu.tsx b/components/vc-mentions/src/DropdownMenu.tsx
index 5660f6019..6e6512dba 100644
--- a/components/vc-mentions/src/DropdownMenu.tsx
+++ b/components/vc-mentions/src/DropdownMenu.tsx
@@ -7,6 +7,7 @@ import Spin from '../../spin';
 
 function noop() {}
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'DropdownMenu',
   props: {
     prefixCls: String,
diff --git a/components/vc-mentions/src/KeywordTrigger.tsx b/components/vc-mentions/src/KeywordTrigger.tsx
index bc9e9c53f..b428e8a68 100644
--- a/components/vc-mentions/src/KeywordTrigger.tsx
+++ b/components/vc-mentions/src/KeywordTrigger.tsx
@@ -40,6 +40,7 @@ const BUILT_IN_PLACEMENTS = {
 };
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'KeywordTrigger',
   props: {
     loading: { type: Boolean, default: undefined },
diff --git a/components/vc-mentions/src/Mentions.tsx b/components/vc-mentions/src/Mentions.tsx
index a155084d2..ebfa57863 100644
--- a/components/vc-mentions/src/Mentions.tsx
+++ b/components/vc-mentions/src/Mentions.tsx
@@ -33,6 +33,7 @@ export type MentionsProps = Partial<ExtractPropTypes<typeof vcMentionsProps>>;
 function noop() {}
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Mentions',
   inheritAttrs: false,
   props: initDefaultProps(vcMentionsProps, defaultProps),
diff --git a/components/vc-mentions/src/Option.tsx b/components/vc-mentions/src/Option.tsx
index 449ad1353..c649cac8a 100644
--- a/components/vc-mentions/src/Option.tsx
+++ b/components/vc-mentions/src/Option.tsx
@@ -10,6 +10,7 @@ export const optionProps = {
 export type OptionProps = Partial<ExtractPropTypes<typeof optionProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Option',
   props: optionProps,
   render(_props: any, { slots }: any) {
diff --git a/components/vc-notification/Notification.tsx b/components/vc-notification/Notification.tsx
index 15036897b..96f63d003 100644
--- a/components/vc-notification/Notification.tsx
+++ b/components/vc-notification/Notification.tsx
@@ -213,6 +213,7 @@ Notification.newInstance = function newNotificationInstance(properties, callback
     document.body.appendChild(div);
   }
   const Wrapper = defineComponent({
+    compatConfig: { MODE: 3 },
     name: 'NotificationWrapper',
     setup(_props, { attrs }) {
       const notiRef = ref();
diff --git a/components/vc-overflow/Item.tsx b/components/vc-overflow/Item.tsx
index 2cd358491..ffab20fbd 100644
--- a/components/vc-overflow/Item.tsx
+++ b/components/vc-overflow/Item.tsx
@@ -8,6 +8,7 @@ import PropTypes from '../_util/vue-types';
 const UNDEFINED = undefined;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Item',
   props: {
     prefixCls: String,
diff --git a/components/vc-overflow/RawItem.tsx b/components/vc-overflow/RawItem.tsx
index 898f23583..309badbe2 100644
--- a/components/vc-overflow/RawItem.tsx
+++ b/components/vc-overflow/RawItem.tsx
@@ -5,6 +5,7 @@ import { OverflowContextProvider, useInjectOverflowContext } from './context';
 import Item from './Item';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'RawItem',
   inheritAttrs: false,
   props: {
diff --git a/components/vc-overflow/context.ts b/components/vc-overflow/context.ts
index 21db22afb..c92005a10 100644
--- a/components/vc-overflow/context.ts
+++ b/components/vc-overflow/context.ts
@@ -24,6 +24,7 @@ const OverflowContextProviderKey: InjectionKey<
 > = Symbol('OverflowContextProviderKey');
 
 export const OverflowContextProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'OverflowContextProvider',
   inheritAttrs: false,
   props: {
diff --git a/components/vc-pagination/Options.tsx b/components/vc-pagination/Options.tsx
index 7ea1fd146..9a405ed26 100644
--- a/components/vc-pagination/Options.tsx
+++ b/components/vc-pagination/Options.tsx
@@ -5,6 +5,7 @@ import antInput from '../_util/antInputDirective';
 import type { EventHandler } from '../_util/EventInterface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   props: {
     disabled: { type: Boolean, default: undefined },
     changeSize: Function,
diff --git a/components/vc-pagination/Pager.tsx b/components/vc-pagination/Pager.tsx
index dd2ad3784..95c0cebcb 100644
--- a/components/vc-pagination/Pager.tsx
+++ b/components/vc-pagination/Pager.tsx
@@ -4,6 +4,7 @@ import type { CSSProperties } from 'vue';
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Pager',
   inheritAttrs: false,
   props: {
diff --git a/components/vc-pagination/Pagination.tsx b/components/vc-pagination/Pagination.tsx
index eccd943a1..d0c3b7152 100644
--- a/components/vc-pagination/Pagination.tsx
+++ b/components/vc-pagination/Pagination.tsx
@@ -26,6 +26,7 @@ function calculatePage(p, state, props) {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Pagination',
   mixins: [BaseMixin],
   inheritAttrs: false,
diff --git a/components/vc-picker/RangeContext.tsx b/components/vc-picker/RangeContext.tsx
index 17146b3ac..0316e6ba9 100644
--- a/components/vc-picker/RangeContext.tsx
+++ b/components/vc-picker/RangeContext.tsx
@@ -40,6 +40,7 @@ export const useInjectRange = () => {
 };
 
 export const RangeContextProvider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PanelContextProvider',
   inheritAttrs: false,
   props: {
diff --git a/components/vc-picker/panels/TimePanel/TimeBody.tsx b/components/vc-picker/panels/TimePanel/TimeBody.tsx
index e67c35614..363e944e8 100644
--- a/components/vc-picker/panels/TimePanel/TimeBody.tsx
+++ b/components/vc-picker/panels/TimePanel/TimeBody.tsx
@@ -42,6 +42,7 @@ export type TimeBodyProps<DateType> = {
 } & SharedTimeProps<DateType>;
 
 const TimeBody = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TimeBody',
   inheritAttrs: false,
   props: [
diff --git a/components/vc-progress/src/Circle.tsx b/components/vc-progress/src/Circle.tsx
index 938c74fd1..f865a8244 100644
--- a/components/vc-progress/src/Circle.tsx
+++ b/components/vc-progress/src/Circle.tsx
@@ -67,6 +67,7 @@ function getPathStyles(
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'VCCircle',
   props: initDefaultProps(propTypes, defaultProps),
   setup(props) {
diff --git a/components/vc-progress/src/Line.tsx b/components/vc-progress/src/Line.tsx
index 80402d451..b7a954673 100644
--- a/components/vc-progress/src/Line.tsx
+++ b/components/vc-progress/src/Line.tsx
@@ -5,6 +5,7 @@ import { useTransitionDuration, defaultProps } from './common';
 import { propTypes } from './types';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Line',
   props: initDefaultProps(propTypes, defaultProps),
   setup(props) {
diff --git a/components/vc-resize-observer/index.tsx b/components/vc-resize-observer/index.tsx
index 86613fc4a..bc6007536 100644
--- a/components/vc-resize-observer/index.tsx
+++ b/components/vc-resize-observer/index.tsx
@@ -20,6 +20,7 @@ interface ResizeObserverState {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ResizeObserver',
   props: {
     disabled: Boolean,
diff --git a/components/vc-select/BaseSelect.tsx b/components/vc-select/BaseSelect.tsx
index 76d42c0b2..dbd14fea9 100644
--- a/components/vc-select/BaseSelect.tsx
+++ b/components/vc-select/BaseSelect.tsx
@@ -257,6 +257,7 @@ export function isMultiple(mode: Mode) {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'BaseSelect',
   inheritAttrs: false,
   props: initDefaultProps(baseSelectProps(), { showAction: [], notFoundContent: 'Not Found' }),
diff --git a/components/vc-select/OptionList.tsx b/components/vc-select/OptionList.tsx
index de375667e..cb05797d1 100644
--- a/components/vc-select/OptionList.tsx
+++ b/components/vc-select/OptionList.tsx
@@ -34,6 +34,7 @@ export type OptionListProps = Record<string, never>;
  * Will fallback to dom if use customize render.
  */
 const OptionList = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'OptionList',
   inheritAttrs: false,
   slots: ['option'],
diff --git a/components/vc-select/Select.tsx b/components/vc-select/Select.tsx
index ffc11b7ce..5b3b639a2 100644
--- a/components/vc-select/Select.tsx
+++ b/components/vc-select/Select.tsx
@@ -163,6 +163,7 @@ function isRawValue(value: DraftValueType): value is RawValueType {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Select',
   inheritAttrs: false,
   props: initDefaultProps(selectProps(), {
diff --git a/components/vc-select/Selector/Input.tsx b/components/vc-select/Selector/Input.tsx
index 8d5a1eb49..8e2d83460 100644
--- a/components/vc-select/Selector/Input.tsx
+++ b/components/vc-select/Selector/Input.tsx
@@ -41,6 +41,7 @@ export const inputProps = {
 export type InputProps = Partial<ExtractPropTypes<typeof inputProps>>;
 
 const Input = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Input',
   inheritAttrs: false,
   props: inputProps,
diff --git a/components/vc-slider/src/Handle.tsx b/components/vc-slider/src/Handle.tsx
index 94cb33fcb..1bf6b6516 100644
--- a/components/vc-slider/src/Handle.tsx
+++ b/components/vc-slider/src/Handle.tsx
@@ -5,6 +5,7 @@ import PropTypes from '../../_util/vue-types';
 import addEventListener from '../../vc-util/Dom/addEventListener';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Handle',
   inheritAttrs: false,
   props: {
diff --git a/components/vc-slider/src/Range.tsx b/components/vc-slider/src/Range.tsx
index f755ba7c3..099470083 100644
--- a/components/vc-slider/src/Range.tsx
+++ b/components/vc-slider/src/Range.tsx
@@ -53,6 +53,7 @@ const rangeProps = {
   draggableTrack: { type: Boolean, default: undefined },
 };
 const Range = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Range',
   mixins: [BaseMixin],
   inheritAttrs: false,
diff --git a/components/vc-slider/src/Slider.tsx b/components/vc-slider/src/Slider.tsx
index e09ece8db..1972cf527 100644
--- a/components/vc-slider/src/Slider.tsx
+++ b/components/vc-slider/src/Slider.tsx
@@ -7,6 +7,7 @@ import * as utils from './utils';
 import { defineComponent } from 'vue';
 
 const Slider = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Slider',
   mixins: [BaseMixin],
   inheritAttrs: false,
diff --git a/components/vc-slider/src/common/createSlider.tsx b/components/vc-slider/src/common/createSlider.tsx
index dd3b39c42..626ea72d6 100644
--- a/components/vc-slider/src/common/createSlider.tsx
+++ b/components/vc-slider/src/common/createSlider.tsx
@@ -39,6 +39,7 @@ export default function createSlider(Component) {
     draggableTrack: { type: Boolean, default: undefined },
   };
   return defineComponent({
+    compatConfig: { MODE: 3 },
     name: 'CreateSlider',
     mixins: [BaseMixin, Component],
     inheritAttrs: false,
diff --git a/components/vc-steps/Step.tsx b/components/vc-steps/Step.tsx
index 69bb8a1a3..6790f9157 100644
--- a/components/vc-steps/Step.tsx
+++ b/components/vc-steps/Step.tsx
@@ -33,6 +33,7 @@ export const VcStepProps = () => ({
   stepIcon: Function,
 });
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Step',
   props: VcStepProps(),
   slots: ['title', 'subTitle', 'description', 'tailContent', 'stepIcon', 'progressDot'],
diff --git a/components/vc-steps/Steps.tsx b/components/vc-steps/Steps.tsx
index e25c112e8..a07b4c0b7 100644
--- a/components/vc-steps/Steps.tsx
+++ b/components/vc-steps/Steps.tsx
@@ -22,6 +22,7 @@ export type ProgressDotRender = (info: {
 }) => any;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Steps',
   props: {
     type: PropTypes.string.def('default'),
diff --git a/components/vc-table/Footer/Row.tsx b/components/vc-table/Footer/Row.tsx
index ac3fa8d5e..e86e87a2d 100644
--- a/components/vc-table/Footer/Row.tsx
+++ b/components/vc-table/Footer/Row.tsx
@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'FooterRow',
   setup(_props, { slots }) {
     return () => <tr>{slots.default?.()}</tr>;
diff --git a/components/vc-table/Header/DragHandle.tsx b/components/vc-table/Header/DragHandle.tsx
index 2e75461ae..713a8260a 100644
--- a/components/vc-table/Header/DragHandle.tsx
+++ b/components/vc-table/Header/DragHandle.tsx
@@ -24,6 +24,7 @@ type HandleEvent = MouseEvent & TouchEvent;
 
 const defaultMinWidth = 50;
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'DragHandle',
   props: {
     prefixCls: String,
diff --git a/components/vc-tooltip/src/Content.tsx b/components/vc-tooltip/src/Content.tsx
index b812f7cd3..f51b277c4 100644
--- a/components/vc-tooltip/src/Content.tsx
+++ b/components/vc-tooltip/src/Content.tsx
@@ -11,6 +11,7 @@ const tooltipContentProps = {
 export type TooltipContentProps = Partial<ExtractPropTypes<typeof tooltipContentProps>>;
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Content',
   props: tooltipContentProps,
   slots: ['overlay'],
diff --git a/components/vc-tooltip/src/Tooltip.tsx b/components/vc-tooltip/src/Tooltip.tsx
index 12b6eff51..0339b2cc5 100644
--- a/components/vc-tooltip/src/Tooltip.tsx
+++ b/components/vc-tooltip/src/Tooltip.tsx
@@ -7,6 +7,7 @@ import type { CSSProperties, PropType } from 'vue';
 import { defineComponent, ref, watchEffect } from 'vue';
 function noop() {}
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Tooltip',
   inheritAttrs: false,
   props: {
diff --git a/components/vc-tree-select/LegacyContext.tsx b/components/vc-tree-select/LegacyContext.tsx
index e4df81392..64a813b64 100644
--- a/components/vc-tree-select/LegacyContext.tsx
+++ b/components/vc-tree-select/LegacyContext.tsx
@@ -42,6 +42,7 @@ const TreeSelectLegacyContextPropsKey: InjectionKey<LegacyContextProps> = Symbol
 );
 
 // export const LegacySelectContext = defineComponent({
+//  compatConfig: { MODE: 3 },
 //   name: 'SelectContext',
 //   props: {
 //     value: { type: Object as PropType<LegacyContextProps> },
diff --git a/components/vc-tree-select/OptionList.tsx b/components/vc-tree-select/OptionList.tsx
index fd3bd65a9..0877e2920 100644
--- a/components/vc-tree-select/OptionList.tsx
+++ b/components/vc-tree-select/OptionList.tsx
@@ -32,6 +32,7 @@ interface TreeEventInfo {
 type ReviseRefOptionListProps = Omit<RefOptionListProps, 'scrollTo'> & { scrollTo: ScrollTo };
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'OptionList',
   inheritAttrs: false,
   slots: ['notFoundContent', 'menuItemSelectedIcon'],
diff --git a/components/vc-tree-select/TreeSelect.tsx b/components/vc-tree-select/TreeSelect.tsx
index 801e52805..1c420896a 100644
--- a/components/vc-tree-select/TreeSelect.tsx
+++ b/components/vc-tree-select/TreeSelect.tsx
@@ -204,6 +204,7 @@ function isRawValue(value: RawValueType | LabeledValueType): value is RawValueTy
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TreeSelect',
   inheritAttrs: false,
   props: initDefaultProps(treeSelectProps(), {
diff --git a/components/vc-tree/MotionTreeNode.tsx b/components/vc-tree/MotionTreeNode.tsx
index 1f2ba8c8c..b2503919c 100644
--- a/components/vc-tree/MotionTreeNode.tsx
+++ b/components/vc-tree/MotionTreeNode.tsx
@@ -16,6 +16,7 @@ import { treeNodeProps } from './props';
 import collapseMotion from '../_util/collapseMotion';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'MotionTreeNode',
   inheritAttrs: false,
   props: {
diff --git a/components/vc-tree/NodeList.tsx b/components/vc-tree/NodeList.tsx
index df608ca8d..01b9a9635 100644
--- a/components/vc-tree/NodeList.tsx
+++ b/components/vc-tree/NodeList.tsx
@@ -92,6 +92,7 @@ function getAccessibilityPath(item: FlattenNode): string {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'NodeList',
   inheritAttrs: false,
   props: nodeListProps,
diff --git a/components/vc-tree/Tree.tsx b/components/vc-tree/Tree.tsx
index 3e6155299..828d52533 100644
--- a/components/vc-tree/Tree.tsx
+++ b/components/vc-tree/Tree.tsx
@@ -52,6 +52,7 @@ export type DraggableConfig = {
 };
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Tree',
   inheritAttrs: false,
   slots: ['checkable', 'title', 'icon', 'titleRender'],
diff --git a/components/vc-tree/TreeNode.tsx b/components/vc-tree/TreeNode.tsx
index eb83f5086..63845fa0f 100644
--- a/components/vc-tree/TreeNode.tsx
+++ b/components/vc-tree/TreeNode.tsx
@@ -24,6 +24,7 @@ const ICON_CLOSE = 'close';
 const defaultTitle = '---';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TreeNode',
   inheritAttrs: false,
   props: treeNodeProps,
diff --git a/components/vc-tree/contextTypes.ts b/components/vc-tree/contextTypes.ts
index addf28a34..4089364b7 100644
--- a/components/vc-tree/contextTypes.ts
+++ b/components/vc-tree/contextTypes.ts
@@ -91,6 +91,7 @@ export interface TreeContextProps {
 const TreeContextKey: InjectionKey<ComputedRef<TreeContextProps>> = Symbol('TreeContextKey');
 
 export const TreeContext = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'TreeContext',
   props: {
     value: { type: Object as PropType<TreeContextProps> },
diff --git a/components/vc-trigger/Popup/MobilePopupInner.tsx b/components/vc-trigger/Popup/MobilePopupInner.tsx
index c5b3117f8..f19b98cd7 100644
--- a/components/vc-trigger/Popup/MobilePopupInner.tsx
+++ b/components/vc-trigger/Popup/MobilePopupInner.tsx
@@ -6,6 +6,7 @@ import type { MobilePopupProps } from './interface';
 import { mobileProps } from './interface';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'MobilePopupInner',
   inheritAttrs: false,
   props: mobileProps,
diff --git a/components/vc-trigger/Popup/PopupInner.tsx b/components/vc-trigger/Popup/PopupInner.tsx
index 39604e230..71c91291e 100644
--- a/components/vc-trigger/Popup/PopupInner.tsx
+++ b/components/vc-trigger/Popup/PopupInner.tsx
@@ -14,6 +14,7 @@ import { getTransitionProps } from '../../_util/transition';
 import supportsPassive from '../../_util/supportsPassive';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'PopupInner',
   inheritAttrs: false,
   props: innerProps,
diff --git a/components/vc-trigger/Popup/index.tsx b/components/vc-trigger/Popup/index.tsx
index cd6ae1f33..bbd383507 100644
--- a/components/vc-trigger/Popup/index.tsx
+++ b/components/vc-trigger/Popup/index.tsx
@@ -5,6 +5,7 @@ import MobilePopupInner from './MobilePopupInner';
 import PopupInner from './PopupInner';
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Popup',
   inheritAttrs: false,
   props: popupProps,
diff --git a/components/vc-trigger/Trigger.tsx b/components/vc-trigger/Trigger.tsx
index 2a51fb547..00c6c71cf 100644
--- a/components/vc-trigger/Trigger.tsx
+++ b/components/vc-trigger/Trigger.tsx
@@ -45,6 +45,7 @@ const ALL_HANDLERS = [
 ];
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Trigger',
   mixins: [BaseMixin],
   inheritAttrs: false,
diff --git a/components/vc-upload/AjaxUploader.tsx b/components/vc-upload/AjaxUploader.tsx
index bb5c1d3f9..72b1227fd 100644
--- a/components/vc-upload/AjaxUploader.tsx
+++ b/components/vc-upload/AjaxUploader.tsx
@@ -21,6 +21,7 @@ interface ParsedFileInfo {
   parsedFile: RcFile;
 }
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'AjaxUploader',
   inheritAttrs: false,
   props: uploadProps(),
diff --git a/components/vc-upload/Upload.tsx b/components/vc-upload/Upload.tsx
index 53119c087..d0e175e0b 100644
--- a/components/vc-upload/Upload.tsx
+++ b/components/vc-upload/Upload.tsx
@@ -7,6 +7,7 @@ import { uploadProps } from './interface';
 function empty() {}
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'Upload',
   inheritAttrs: false,
   props: initDefaultProps(uploadProps(), {
diff --git a/components/vc-virtual-list/List.tsx b/components/vc-virtual-list/List.tsx
index b0f1a8b3d..f234077ed 100644
--- a/components/vc-virtual-list/List.tsx
+++ b/components/vc-virtual-list/List.tsx
@@ -76,6 +76,7 @@ export interface ListState {
 }
 
 const List = defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'List',
   inheritAttrs: false,
   props: {
diff --git a/components/vc-virtual-list/ScrollBar.tsx b/components/vc-virtual-list/ScrollBar.tsx
index 282818cf3..a4a436df2 100644
--- a/components/vc-virtual-list/ScrollBar.tsx
+++ b/components/vc-virtual-list/ScrollBar.tsx
@@ -19,6 +19,7 @@ function getPageY(e: MouseEvent | TouchEvent) {
 }
 
 export default defineComponent({
+  compatConfig: { MODE: 3 },
   name: 'ScrollBar',
   inheritAttrs: false,
   props: {