cannot auto import ant-design-vue components if enable global and external in rollupOptions

[richex-cn]

Describe the bug

When I enable global and external in rollupOptions for Vue by rollup-plugin-external-globals, The ant-design-vue component will not be automatically introduced at build time.

Primary code like (see vite.config.ts in reproduce):

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts',
      resolvers: [AntDesignVueResolver()]
    })
  ],

  build: {
    minify: false,
    rollupOptions: {
      external: ['vue'],
      plugins: [
        externalGlobals({
          vue: 'Vue'
        })
      ]
    }
  }
})

When development (pnpm run dev), render code like:

...
import { Button as __unplugin_components_0 } from "/node_modules/.vite/deps/ant-design-vue_es.js?v=6976ec1a";
...
function _sfc_render(_ctx, _cache) {
  const _component_a_button = __unplugin_components_0

  return (_openBlock(), _createElementBlock("div", null, [
    _createVNode(_component_a_button, null, {
      default: _withCtx(() => [
        _createTextVNode("TEST")
      ]),
      _: 1 /* STABLE */
    })
  ]))
}
...

When production (pnpm run build), render code like:

...
function _sfc_render(_ctx, _cache) {
  const _component_a_button = Vue.resolveComponent("a-button");
  return Vue.openBlock(), Vue.createElementBlock("div", null, [
    Vue.createVNode(_component_a_button, null, {
      default: Vue.withCtx(() => [
        Vue.createTextVNode("TEST")
      ]),
      _: 1
    })
  ]);
}
...

Looks like the ant-design-vue components is not being imported at build time.

---

I have searched for issues in the repo, only one #311 is about global and external in rollupOptions. But it seems different from this problem.

Reproduction

https://github.com/richex-cn/issue-unplugin-vue-components-rollup-plugin-external-globals

System Info

System:
    OS: Windows 10 10.0.19041
  Binaries:
    Node: 17.9.1
    Yarn: 1.22.19
    npm: 8.11.0

Used Package Manager

pnpm

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guide.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• [X] The provided reproduction is a minimal reproducible of the bug.

[lishaobos]

hi, you need change the plugin

// import externalGlobals from 'rollup-plugin-external-globals'
import { viteExternalsPlugin } from 'vite-plugin-externals'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dirs: ['src/components'],
      dts: 'src/components.d.ts',
      resolvers: [AntDesignVueResolver()]
    }),
    viteExternalsPlugin({
      vue: 'Vue',
    })
  ],

  build: {
    minify: false,
    rollupOptions: {
      // external: ['vue'],
      // plugins: [
      //   externalGlobals({
      //     vue: 'Vue'
      //   })
      // ]
    }
  }
})

[richex-cn]

@lishaobos Thanks, It works for me!

I think this issue should remain open and it may be an issue that needs to be followed up.