Render icons from @ant-design/icons-vue once when using ssr

[wheeljs]

Describe the bug

Steps to reproduce

1. Setup a vite with ssr project by 'vite-ssr'.
2. Add ant-design-vue@^3.2.7
3. Add <a-select mode="multiple"> into component, select multiple options. It renders close icon for selected options in input and checked icon in popover, but each icon just render once.
4. Only one selected options in <a-select> has remove icon.

What is expected?

All selected options should have remove icon after its label whether ssr or not.(Works fine in normally command vite)

What is actually happening?

Only one selected options in <a-select> has remove icon.

---

I thought this may be a bug of vite-ssr, so I have also tested in vite-plugin-ssr(reproduction link), problems still exist, so I think this may be a vite's bug.

Reproduction

https://stackblitz.com/edit/vitejs-vite-evglmf?file=src%2FApp.vue

System Info

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 2.23 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 10.23.2 - ~/n/bin/node
    Yarn: 1.22.17 - ~/n/bin/yarn
    npm: 6.14.10 - ~/n/bin/npm
  Browsers:
    Chrome: 103.0.5060.53
    Firefox: 100.0.2
    Safari: 15.5
  npmPackages:
    @vitejs/plugin-vue: ^2.3.3 => 2.3.3
    vite: ^2.9.12 => 2.9.12

Used Package Manager

npm

Logs

Click to expand!

 vite v2.9.12 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

 -- SSR mode ready in 3313ms.

vite-ssr doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

Sorry for my English.

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[wheeljs]

After I tried with different vite ssr middlewares, and fire an issue in ant-design-vue. I had found components in ant-design-vue render icons from @ant-design/icons-vue, it uses export { default } from 'path/to/icon.svg', the author of antdv replied this problem was caused by vite does not support export { default }.

// @ant-design/icons-vue/CloseOutlined.js
export { default } from './es/icons/CloseOutlined'

Is there a workaround for this?

[vcasy]

I have tried to narrow it down a little bit. Hope someone can fix it.

The icons are not the issue.
Proof - this will not work (with vite SSR):

1. create a very simple component
2. use it in the icon slot

<a-select
mode="tags"
:options="options" 
>
  <template #removeIcon>
    <SimpleComponent />
  </template 
</a-select>

→ Component in icon slot will not render reliably
However if the slot is something simple like a native HTML Element (for example <button>test</button>) it works.

Somehow vite will not render the HTML content of any component in this slot.
Oddly enough the component itself will be attached correctly according to Vue.js devtools.

Without SSR it works fine. Even the SSR output by vite is also correct.
The problem occurs in client browser afterwards.

[daomiaru]

@wheeljs 你好我这边在使用nuxt3进行服务端渲染时遇到了和你一样的问题，请问你这里解决了吗

[edison1105]

Closing as it can't reproduce with the latest version.

    "ant-design-vue": "4.2.5",
    "vue": "3.5.8",