Using modularized antd with babel-plugin-import doesn't work on sub components like MenuItem, SubMenu, LayoutSlider / 按需加载无法在MenuItem、SubMenu、LayoutSlider等二级组件上应用

[mescab]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

2.0.0-rc.2

Environment

macOS 10.15.6, WebStrom 2020.2.3, Vue: 3.0.0, Antdv: 2.0.0-rc.1 or 2.0.0-rc.2

Reproduction link

https://github.com/vueComponent/ant-design-vue/releases/tag/2.0.0-rc.2

Steps to reproduce

1. vue create testVue3
2. npm install ant-design-vue@2.0.0-rc.2 (or ant-design-vue@2.0.0-rc.1)
3. create a component TestComponent referred to by App.vue which import Menu and MenuItem
4. enable babel-plugin-import in a way as below:

"plugins": [
["import", {"libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css"}]
]

and TestComponent:

<template>
    <Menu theme="dark"> 
        <MenuItem key="1">
            <span class="nav-text">Dashboard</span>
        </MenuItem>
        <MenuItem key="2">
            <span class="nav-text">Dashboard</span>
        </MenuItem>
    </Menu>
</template>

<script>

import MenuItem from "ant-design-vue/lib/menu/MenuItem"  // how to make this work??? this is the key
import {Menu} from 'ant-design-vue'

export default {
    name: "TestHomeLayout",
        components: {
            Menu,
            MenuItem
        },
}
</script>

The code above got no errors or warnings from "npm run serve", but finally result in a blank page in browser.

Open the browser inspection panel, the DOM tree look like:

<div id="app" data-v-app="">
    <div id="app">
        <ul role="menu" class="ant-menu-dark ant-menu-root ant-menu ant-menu-vertical" data-v-7e3d40e0="">
            <li role="menuitem" class="undefined-item" data-v-7e3d40e0="">
                <span class="nav-text" data-v-7e3d40e0="">Dashboard</span>
            </li>
            <li role="menuitem" class="undefined-item" data-v-7e3d40e0="">
                <span class="nav-text" data-v-7e3d40e0="">Settings</span>
            </li>
        </ul>
    </div>
</div>

The code above looks like the Menu component did work, but the MenuItem didn't. I don't know why and what's exactly the right way to import sub component.

I tried a few alternative ways and other sub components, but none of them walk me out.

Apart from that, if we use the '<a-menu>' and '<a-menu-item>' notation with a total import of ant-design-vue from main.js, everything is OK.

import { createApp } from 'vue'
import App from './App.vue'
import {router} from "@/router";

import Antd from 'ant-design-vue/dist/antd';   // one time complete import
import 'ant-design-vue/dist/antd.css';

import '@/global.less'

import store from '@/store'

const app = createApp(App)

app.use(router).use(store).use(Antd).mount('#app')

What is expected?

Using modularized antd should have same outcomes as one time complete import. / 按需加载和一次性全部加载在显示上应该没有区别。

What is actually happening?

Using modularized antd doesn't load sub component as expected.

---

Production build size is critical in my case, so we went to use modularized way to load antd component on demand.

[sendya]

<script>
import {Menu} from 'ant-design-vue'

export default {
    name: "TestHomeLayout",
        components: {
            [Menu.name]: Menu,
            [Menu.Item.name]: Menu.Item,
        },
}
</script>

[mescab]

<script>
import {Menu} from 'ant-design-vue'

export default {
    name: "TestHomeLayout",
        components: {
            [Menu.name]: Menu,
            [Menu.Item.name]: Menu.Item,
        },
}
</script>

这一写法的确能解决Menu(Menu.Item)，Layout(Layout.Sider，Layout.Content）等，但无法解决Select(Select.Option)。

以下的两种写法，其一直接用组件<Select>和<Select.Option>方式，其二用<a-select>及<a-select-option>都不行。

报错：Failed to resolve component: Select.Option

并伴随一个warning：

warning.js?2149:6 Warning: children should be Select.Option or Select.OptGroup instead of Select.Option.

现象是：可以正常弹出下拉列表，但选中的内容无法显示在Select输入框内。

写法一（代码摘自官方案例）：

<template>  
  <div>  
    <Select  
        v-model:value="value1"  
        style="width: 120px"  
        @focus="focus"  
        ref="select"  
        @change="handleChange"  
    >  
      <Select.Option value="jack">
        Jack
      </Select.Option>
      <Select.Option value="lucy">
        Lucy
      </Select.Option>
      <Select.Option value="disabled" disabled>
        Disabled
      </Select.Option>
      <Select.Option value="Yiminghe">
        yiminghe
      </Select.Option>
    </Select>
  </div>
</template>
<script>
import {Select} from "ant-design-vue";

export default {
  name: 'Sample',
  components: {
    Select,
  },
  data() {
    return {
      value1: 'lucy',
    };
  },
  methods: {
    focus() {
      console.log('focus');
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
  },
};
</script>

写法二：

<template>
  <div>
    <a-select
        v-model:value="value1"
        style="width: 120px"
        @focus="focus"
        ref="select"
        @change="handleChange"
    >
      <a-select-option value="jack">
        Jack
      </a-select-option>
      <a-select-option value="lucy">
        Lucy
      </a-select-option>
      <a-select-option value="disabled" disabled>
        Disabled
      </a-select-option>
      <a-select-option value="Yiminghe">
        yiminghe
      </a-select-option>
    </a-select>
  </div>
</template>
<script>
import {Select} from "ant-design-vue";

export default {
  name: 'Sample',
  components: {
    [Select.name]:Select,
    [Select.Option.name]: Select.Option
  },
  data() {
    return {
      value1: 'lucy',
    };
  },
  methods: {
    focus() {
      console.log('focus');
    },
    handleChange(value) {
      console.log(`selected ${value}`);
    },
  },
};
</script>

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.