How to auto import ant design vue component and styles in tsx or jsx?

[MAXLZ]

tsx component

export default defineComponent({
// ...
  setup(props, { attrs }) {
  // ...
    return (): JSX.Element => {
      return <Input {...attrs} />
    }
  },
})

vue.config.js

const Components = require('unplugin-vue-components/webpack')
const AutoImport = require('unplugin-auto-import/webpack')

module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [
          resolvers.AntDesignVueResolver({
            resolveIcons: true,
            importStyle: 'less',
          })
        ]
      }),

      // How to set ?
      AutoImport({
        include: [
          /\.[tj]sx?$/,
        ],
        imports: [],
        resolvers: (name) => {
          console.log(name)
        }
      })
    ]
  }
}

[yinbinyu]

I have the same problem.

[Anthony Fu]

The current implementation does not support importing side-effects, contributions are welcome.

Context:
https://github.com/antfu/unplugin-vue-components/blob/275dae778782fd90d6b97c83e33b4c26721bc6e4/src/types.ts#L14

[绝弹]

I try to import naive-ui components in vite, it works in .vue file, not in .tsx, maybe something missed. For resolver , I want auto import like this import { NButton } from 'naive'，my resolver is like this: resolvers: (name) => { if(name.startWith('N')) { return { name, module: 'naive-ui' } } }. hope it help you.