unplugin-auto-import: Vue3 tsx auto import invalid

vite.config.ts

`import {fileURLToPath, URL} from ‘url’

import {defineConfig} from ‘vite’ import vue from ‘@vitejs/plugin-vue’ import vueJsx from ‘@vitejs/plugin-vue-jsx’ import AutoImport from ‘unplugin-auto-import/vite’ import { ElementPlusResolver } from ‘unplugin-vue-components/resolvers’ import Components from ‘unplugin-vue-components/vite’ import IconsResolver from ‘unplugin-icons/resolver’ import Icons from ‘unplugin-icons/vite’ import ElementPlus from ‘unplugin-element-plus/vite’ export default defineConfig({ plugins: [ vue({reactivityTransform: true}), vueJsx(), AutoImport({ include: [ /.[tj]sx?$/, // .ts, .tsx, .js, .jsx /.vue$/, /.vue?vue/, // .vue /.md$/, // .md ], imports: [‘vue’, ‘vue/macros’,‘@vueuse/core’], dts: ‘./auto-imports.d.ts’, resolvers: [ ElementPlusResolver(), IconsResolver({ prefix: ‘abc’, enabledCollections: [‘ep’,‘mdi’], }), ], }), Components({ resolvers: [ IconsResolver({ prefix: ‘abc’, enabledCollections: [‘ep’,‘mdi’], }), ElementPlusResolver(), ], dts: ‘./components.d.ts’, }), ElementPlus({ // importStyle: ‘sass’, useSource: true }), Icons({ autoInstall: true, }), ], resolve: { alias: { ‘@’: fileURLToPath(new URL(‘./src’, import.meta.url)) } }, })`

index.tsx

import {ElMenu,ElMenuItem,ElSubMenu} from "element-plus" export default defineComponent({ components:{ // ElMenu,ElMenuItem,ElSubMenu }, props: { }, setup() { return () => { return ( <el-menu className="menu-icon-svg" > <abc-ep-close /> </el-menu> ) } } })

icon auto import is also invalid

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 20 (6 by maintainers)

Most upvoted comments

@zz541843 it works https://github.com/zz541843/unplugin-auto-import_issues/pull/1

I did it in these steps

  1. fork your repo
  2. use pnpm instead of npm (personally use pnpm)
  3. update the dependency version
  4. fix your vite config add include/exclude to Component since your tsx is not in the /src/component as default, add dirs as well

@zz541843 it works zz541843/unplugin-auto-import_issues#1

I did it in these steps

  1. fork your repo
  2. use pnpm instead of npm (personally use pnpm)
  3. update the dependency version
  4. fix your vite config add include/exclude to Component since your tsx is not in the /src/component as default, add dirs as well

Thank you for your help !