diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx
index fe1eb83de9..19b1365aed 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 0c0e42f843..009613a742 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 cde3e70e0a..0aea311bc6 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 66491fc73c..5c02f3ba38 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 0043608ff4..d713063962 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 66861efafd..caced47cda 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 1170e3d135..ef69ef66cd 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 72313e490c..e6ee0e9726 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 1dfae9a68a..2fae9e0181 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 9fd6ac3191..f5ffe30cee 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 0497906433..8f16a9808c 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 1cca93153b..f04479a2de 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 10382e17df..b6af5eca18 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 035992238c..3e09f9ed66 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 2abef7ac1e..fd00085c3a 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 38962db61e..0464f7b6c9 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 7fba9933a7..0d6c9cc304 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 f7a83a21ba..37c3b2c4d8 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 fb7500b2e3..3c18e128a2 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 cbb49077d3..37d240117d 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 dad66482c5..a00d0e324e 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 f0b4f2cab4..91e90732d8 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 938969688b..391527fd45 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 fd543d9ff8..f934ece192 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 d5a1a3960b..8ae5b4716d 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 0eab4a5429..d3484716f0 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 2d89c0485b..9780cf4a8c 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 5d2aba02b4..3778e39419 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 1cf2b04b9a..8417d5c541 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 775a0c3cbb..44ba2625b3 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 5faf7e311e..3c6f62f181 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 0886ec9710..d096fd8ce5 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 fe00042c61..12159363b2 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 e42c1bc50f..b799a38e36 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 b7e69c7c88..29a2aabff2 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 b642066be2..7858d4a255 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 51f2856723..6c78b7c67b 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 991b708a9a..4f9f4b10d6 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 cf2cd27557..97b2563fe2 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 a245b5d3cc..956063b6fb 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 af43119806..0c6f74a20a 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 42c3bfe021..4f3325d35a 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 9b35e8da48..88268ce94a 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 a6e5ff717a..a2b4601f35 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 4bebce09fe..8863e7d68e 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 ac33a8b5c3..5c8221fc97 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 62f4a99fdc..dd49c1e85f 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 b2010b730d..860a9f86e8 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 630fbec639..a2eb6813c4 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 bc891c5559..0009b0d447 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 857827ed0f..5d8cd814eb 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 47cdc49e64..9fad82b1f5 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 90441a5685..a2e055e9c2 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 1317191cd3..6817e3be8c 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 ebcde8d32a..f63beb2176 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 eab3603c95..85a51a8337 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 f0627a78b3..22557ed8fa 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 698d5c1102..f7520dd68d 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 20d3521eca..dbda6b96fb 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 a654f38bc3..b9c7a3320c 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 a5e6ac8b50..eb495e37bb 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 689676f0b5..200df51f68 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 71bc6af281..cf3de3db39 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 41b5e6366e..c10023c3e4 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 48b3cb8b67..51bc83e5e8 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 5259a525f0..666043425f 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 7471bb4ac1..530d536dce 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 afc946b8bb..f5f776aa58 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 ed51a30092..ce85caf466 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 92860e4eae..85f3802fcf 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 8bcedee8a2..40ede4f2d6 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 c8a94f546a..29794e8be9 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 6ea5d7a33a..875decd589 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 863aeb5218..006025fc83 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 db9b417419..f8d9cc6a0d 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 09996d427a..1690651624 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 3eb4269f82..8d1ef33188 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 27b1413b0c..6c98c673a8 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 a161ea94a2..f0b0b47f06 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 011daa78fb..b13b7edb6a 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 86768b508a..4da27e9a5f 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 283c9a643d..910cedaffb 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 be101e9f08..36c255ba62 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 1536412929..6bbe831f54 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 3b4a8db931..4cea05bc91 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 3f95f0b25a..8ab7180e51 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 fb87838f1c..d8b84b97b3 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 bd33467834..322673fa47 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 36cceb1e23..335c3edeba 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 7b29700d82..0548defaa5 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 c8a8cae302..64c080d9c3 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 e2c37d2c34..ac7221fb04 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 76e0043b4a..0eb16b558f 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 c9521db98a..d7a7ad9566 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 c24d1953ed..b7a0c4cf25 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 4275c54133..e013d27dfa 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 c73de0eb6c..e8610b9706 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 4dd33bcd96..2db3ae6d2a 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 f1578b03f6..29820accac 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 5ade312b8e..26963a074c 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 5202f85258..d1d2d73012 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 a91045acaa..35c7b90788 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 36eb71ef55..feaf6bfd05 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 e9b070a09d..f9be502d88 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 b12e82e4c3..b1bc32d1e2 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 4a22ad9ec9..b531288954 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 41c318cf93..dd115cab75 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 566e08d224..ecba9fcea2 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 7d6c0c33ee..30e08ec648 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 0c1f8ff811..dad2b58e75 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 39491c65cf..b0c86a406d 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 7487ef805d..9b47d0f097 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 d563aa7f16..50da557ac5 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 8961339919..677d301ebd 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 2891f972d7..22ec38af1c 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 701abb3feb..5117ac9314 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 e6f91c0fa5..e215682186 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 fcb8dc6828..34afe68e41 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 82754ed777..d3d4a8be20 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 956f1654dc..2a16924edd 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 a866ad4c37..001b6c02cc 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 ef2bbea617..7ad896a996 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 1b4821b6c7..e8e8b0924a 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 e1ee036870..2564e7f434 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 0df852a35b..55b198f1a5 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 cd5a545133..0423abc016 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 ec7a077842..267fba7f92 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 b772a9d870..786bf10c66 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 ae8150d9bd..2a75f62491 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 b1e05373cc..efac7a7007 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 2d7b430b5d..b61489e4cb 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 00632ebf5c..b34f7a0959 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 d4ae4ef791..9f2fb6d066 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 d4761ff57b..1e92bb145e 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 52462f5fec..4f0fd9dbfc 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 251912a4f8..0d94bcca9b 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 3d7cb09024..04653a9d23 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 de38a6e2a3..229f4132aa 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 a440683356..2834d48182 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 d7ce12f363..71a1a33d12 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 0718822670..8374c76d5c 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 f550703363..e9e999a8f3 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 987a14dd1d..87ba6934ea 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 1163b9e497..9eb965a817 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 1a37b40b59..33ed64b275 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 dce058f9bf..abbb9a26d4 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 4c488a1e7c..4b858d10ad 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 071de2356d..4d6a11d112 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 0984d32872..af0bd71242 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 43082ae59e..403f3e9601 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 b6cb47ad80..7c56c94f30 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 14f0415381..cfccdb2703 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 6674990f28..0a1eeb8dd6 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 5660f6019f..6e6512dba5 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 bc9e9c53fb..b428e8a68d 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 a155084d2e..ebfa578637 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 449ad1353d..c649cac8a6 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 15036897bd..96f63d0038 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 2cd3584916..ffab20fbd8 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 898f235836..309badbe2d 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 21db22afb0..c92005a10c 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 7ea1fd146e..9a405ed26d 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 dd2ad37846..95c0cebcbd 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 eccd943a17..d0c3b7152a 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 17146b3ac6..0316e6ba9b 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 e67c356148..363e944e80 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 938c74fd18..f865a8244a 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 80402d4515..b7a954673e 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 86613fc4a3..bc60075362 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 76d42c0b22..dbd14fea91 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 de375667ef..cb05797d1e 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 ffc11b7ce7..5b3b639a2d 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 8d5a1eb49b..8e2d834605 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 94cb33fcb2..1bf6b65162 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 f755ba7c36..0994700834 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 e09ece8db9..1972cf5276 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 dd3b39c422..626ea72d61 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 69bb8a1a33..6790f91577 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 e25c112e86..a07b4c0b74 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 ac3fa8d5e3..e86e87a2d0 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 2e75461ae5..713a8260a1 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 b812f7cd37..f51b277c4e 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 12b6eff514..0339b2cc58 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 e4df813924..64a813b642 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 fd3bd65a9e..0877e29202 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 801e528054..1c420896a5 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 1f2ba8c8c7..b2503919c2 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 df608ca8d3..01b9a9635c 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 3e6155299d..828d52533c 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 eb83f50862..63845fa0ff 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 addf28a349..4089364b7f 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 c5b3117f81..f19b98cd7f 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 39604e230f..71c91291e8 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 cd6ae1f330..bbd383507c 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 2a51fb5473..00c6c71cf5 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 bb5c1d3f9b..72b1227fd4 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 53119c0875..d0e175e0b3 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 b0f1a8b3d2..f234077edd 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 282818cf3f..a4a436df23 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: {