Can not use element-plus directive v-loading in jsx?

[jackchoumine]

Describe the bug

I wanna use v-loading from element-plus in jsx,

setup() {
  const loading = ref(true)
  setTimeout(() => {
    loading.value = !loading.value
  }, 5000)
  return () => <div v-loading={loading.value}></div>
}

Auto import by unplugin-vue-components come into error:

runtime-core.esm-bundler.js:2774 Uncaught TypeError: Cannot read properties of undefined (reading 'deep')
    at withDirectives (runtime-core.esm-bundler.js:2774:17)
    at Proxy.<anonymous> (UseButton.tsx:11:1)

After import element-plus global, work fine.

reproduction repo

Reproduction

in my repo

System Info

System:
    OS: Windows 10 10.0.19041
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12600K
    Memory: 3.72 GB / 15.79 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 78.0.3904.108
    Edge: Spartan (44.19041.1.0)
    Internet Explorer: 11.0.19041.1

Used Package Manager

npm

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.

[jackchoumine]

related issues:

Open element-plus directive error

solution: import it in main.js

import { ElLoading } from 'element-plus'
app.use(ElLoading)

Close this issue.

[hminghe]