[Bug Report] on-demand-import using vite not working for infinite-scroll directive

[adarshmadrecha]

Element Plus version

1.1.0-beta.14

OS/Browsers version

Windows / Chrome 94

Vue version

3.2.13

Reproduction Link

Steps to reproduce

// in vite.config.js

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

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }
});

// in any component

<template>
  <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
    <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
  </ul>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    const load = () => {
      count.value  = 2
    }
    return {
      count,
      load,
    }
  },
})
</script>

<style lang="scss">
.infinite-list {
  height: 300px;
  padding: 0;
  margin: 0;
  list-style: none;

  .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
    &   .list-item {
      margin-top: 10px;
    }
  }
}
</style>

What is Expected?

No warnings or errors

What is actually happening?

1. Warning in console Failed to resolve directive: infinite-scroll
2. Error in loading the component

[jw-foss]

I see, cc @sxzz can you confirm that this plugin can introduce directives automatically?

Personally I think directive can not be introduced by this plugin automatically thus you have to register it by yourself.

[sxzz]

unplugin-vue-components and unplugin-element-plus only registers for components and styles, please register directives by yourself.

[adarshmadrecha]

Personally I think directive can not be introduced by this plugin automatically thus you have to register it by yourself.

@JeremyWuuuuu It will be helpful for newcomers if this is documented in Quick Start docs. This is specially important as Auto Import mode is recommended.

https://element-plus.org/en-US/guide/quickstart.html#on-demand-import

[sxzz]

@adarshmadrecha OK, I will do this.

[mxp131011]

Formal package styles are not registered I didn't develop with TypeScript

正式包样式没有被注册，我没有用TypeScript开发，用的是js ，测试包可以正常注册，使用unplugin-element-plus也是一一样

[sxzz]

unplugin-vue-components and unplugin-element-plus only registers for components and styles, please register directives by yourself.

@mxp131011

[mxp131011]

The build release style was not successfully introduced ，dev is normal

构建正式版样式没有被成功引入，测试版是正常的

@sxzz

[trry-hub]

1.我也遇到了同样的问题，打包后样式没有生效. 2.在unplugin-vue-components and unplugin-element-plus同时使用时不能修改主题色，试了unplugin-element-plus 给的例子，并不行

[sxzz]

/cc @YunYouJun

[YunYouJun]

@mxp131011 @Name-Terry Can you provide a reproducible example?

https://unplugin.element-plus.org/

https://github.com/element-plus/unplugin-element-plus/tree/main/examples/vite

It seems work.

[mxp131011]

@YunYouJun https://github.com/mxp131011/zlt9_erp_pc_vite

[mxp131011]

详情：https://github.com/element-plus/element-plus/issues/3688 例子:https://github.com/mxp131011/zlt9_erp_pc_vite

particulars：https://github.com/element-plus/element-plus/issues/3688 examples:https://github.com/mxp131011/zlt9_erp_pc_vite

[trry-hub]

在不手动引入组件的前提下 无法自定义修改主题 例子：https://github.com/Name-Terry/test-unplugin-element-plus.git 可以看下 App.vue 中的使用方法

You cannot customize a change theme without manually importing a component examples：https://github.com/Name-Terry/test-unplugin-element-plus.git Take a look at how to use app.vue @YunYouJun

[YunYouJun]

@mxp131011 @Name-Terry

这和 unplugin-vue-components 插件有关，使用这个插件后自动导入的组件会使用 css 文件而非 scss，所以无法对样式进行编译。（而自定义主题显然需要编译 scss）。

目前解决方案只能是自己引入需要自定义的组件。 或者后续我看看能否修改 unplugin-vue-components 插件的 Resolver。

---

This is related to the unplugin-vue-components plugin. After using this plugin, the automatically imported components will use the css file instead of the scss, so the style cannot be compiled. (The custom theme obviously needs to compile scss).

The current solution can only be to introduce components that need to be customized. Or let me see if I can modify the Resolver of the unplugin-vue-components plugin.

[trry-hub]

@mxp131011 @Name-Terry

这和 unplugin-vue-components 插件有关，使用这个插件后自动导入的组件会使用 css 文件而非 scss，所以无法对样式进行编译。（而自定义主题显然需要编译 scss）。

目前解决方案只能是自己引入需要自定义的组件。 或者后续我看看能否修改 unplugin-vue-components 插件的 Resolver。

This is related to the unplugin-vue-components plugin. After using this plugin, the automatically imported components will use the css file instead of the scss, so the style cannot be compiled. (The custom theme obviously needs to compile scss).

The current solution can only be to introduce components that need to be customized. Or let me see if I can modify the Resolver of the unplugin-vue-components plugin.

Thank you very much @YunYouJun

[mxp131011]

用unplugin-element-plus也是一样呀 最开始我就用这个，手动引入组件，

[mxp131011]

unplugin-element-plus 和 unplugin-vue-components 这两个组件效果 都是 正式版不行，测试不可以

[mxp131011]

@YunYouJun

[YunYouJun]

@mxp131011 一个可运行的例子 https://github.com/element-plus/unplugin-element-plus/tree/main/examples/vite

[mxp131011]

unplugin-vue-components https://github.com/mxp131011/zlt9_erp_pc_vite unplugin-element-plus https://github.com/mxp131011/zlt9_erp_pc_vite2

这两个都是正式版不可以。 我那里做错了

[mxp131011]

unplugin-vue-components https://github.com/mxp131011/zlt9_erp_pc_vite unplugin-element-plus https://github.com/mxp131011/zlt9_erp_pc_vite2

这两个都是正式版不可以。 我那里做错了 @YunYouJun

[YunYouJun]

@mxp131011 @Name-Terry Sorry, I don’t have much time to check your project.

But I created their minimal use case for your reference. They work well.

unplugin-vue-components: https://github.com/element-plus/element-plus-vite-starter unplugin-element-plus: https://github.com/element-plus/unplugin-element-plus/tree/main/examples/vite

They do not need to be used at the same time.

[mxp131011]

找到原因了vite.config.js中build.rollupOptions.output.manualChunks用来配置代码拆分时的问题具体请看图，这应该也是一个bug，但是我不知道怎么修复：

正确拆分方式只能是： manualChunks(id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString(); } }

@YunYouJun

[trry-hub]

找到原因了vite.config.js中build.rollupOptions.output.manualChunks用来配置代码拆分时的问题具体请看图，这应该也是一个bug，但是我不知道怎么修复：

正确拆分方式只能是： manualChunks(id) { if (id.includes('node_modules')) { return id.toString().split('node_modules/')[1].split('/')[0].toString(); } }

@YunYouJun

我使用这个方法也解决了问题，谢谢