unplugin / unplugin-vue-components

📲 On-demand components auto importing for Vue
https://www.npmjs.com/package/unplugin-vue-components
MIT License
3.82k stars 352 forks source link

vue3在script上使用setup后引入的组件无法解析到 #543

Open Yxiuchao opened 2 years ago

Yxiuchao commented 2 years ago

Describe the bug

在vue文件中通过给script设置setup后组件可以使用,但是在无法解析到

组件模板:

<script setup lang="ts">
import { ProCard } from 'element-pro-components';

</script>

vue.config.js配置方式

require('unplugin-vue-components/webpack')(
        {
          resolvers: [
            (name) => {/*  */
              if (name.startsWith('Pro')) {
                const fileName = name.slice(3).replace(/\B([A-Z])/g, '-$1').toLocaleLowerCase();
                return {
                  importName: name,
                  path: 'element-pro-components',
                  from: 'element-pro-components/lib',
                  sideEffects: `element-pro-components/lib/styles/${fileName}`
                }
              }
            }
          ],
        })

无法解析到引用的组件

Reproduction

none

System Info

window10
chrome:107.0.5304.87

Used Package Manager

yarn

Validations

azaleta commented 1 year ago

The resolver is not correct. https://github.com/antfu/unplugin-vue-components/blob/c1ffcd665d283ecb0c2453ac5c8ad7affb73b09e/src/types.ts#L30-L32

if you ref to the type ComponentInfo should be

{
  as?: string
  name?: string
  from: string
  sideEffects?: SideEffectsInfo
}

So I think you should return

        (name) => {
          if (name.startsWith('Pro')) {
            const fileName = name.slice(3).replace(/\B([A-Z])/g, '-$1').toLocaleLowerCase()
            return {
              name,
              from: 'element-pro-components',   //define is not in lib 
              sideEffects: `element-pro-components/lib/styles/${fileName}`,
            }
          }
        },