✅已解决 | vue3 可以使用登录组件吗?

引入报错
runtime-core.esm-bundler.js:6568 [Vue warn]: Property “$createElement” was accessed during render but is not defined on instance.
at <AuthingGuard key=0 appId=“6184880089185e871ed20107” mode=“model” … >
at <Main onVnodeUnmounted=fn ref=Ref< undefined > >
at
at
warn2 @ runtime-core.esm-bundler.js:6568
get @ runtime-core.esm-bundler.js:6005
y @ index.min.js:1
renderComponentRoot @ runtime-core.esm-bundler.js:444
componentUpdateFn @ runtime-core.esm-bundler.js:4211
run @ reactivity.esm-bundler.js:160
setupRenderEffect @ runtime-core.esm-bundler.js:4337
mountComponent @ runtime-core.esm-bundler.js:4120
processComponent @ runtime-core.esm-bundler.js:4078
patch @ runtime-core.esm-bundler.js:3673
mountChildren @ runtime-core.esm-bundler.js:3869
processFragment @ runtime-core.esm-bundler.js:4037
patch @ runtime-core.esm-bundler.js:3666
componentUpdateFn @ runtime-core.esm-bundler.js:4218
run @ reactivity.esm-bundler.js:160
setupRenderEffect @ runtime-core.esm-bundler.js:4337
mountComponent @ runtime-core.esm-bundler.js:4120
processComponent @ runtime-core.esm-bundler.js:4078
patch @ runtime-core.esm-bundler.js:3673
componentUpdateFn @ runtime-core.esm-bundler.js:4288
run @ reactivity.esm-bundler.js:160
callWithErrorHandling @ runtime-core.esm-bundler.js:6685
flushJobs @ runtime-core.esm-bundler.js:6924
Promise.then(异步)
queueFlush @ runtime-core.esm-bundler.js:6815
queueCb @ runtime-core.esm-bundler.js:6837
queuePostFlushCb @ runtime-core.esm-bundler.js:6843
queueEffectWithSuspense @ runtime-core.esm-bundler.js:1128
scheduler @ runtime-core.esm-bundler.js:7124
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:948
(匿名) @ reactivity.esm-bundler.js:1075
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:948
(匿名) @ reactivity.esm-bundler.js:1075
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:948
set value @ reactivity.esm-bundler.js:992
finalizeNavigation @ vue-router.esm-bundler.js:3187
(匿名) @ vue-router.esm-bundler.js:3060
Promise.then(异步)
pushWithRedirect @ vue-router.esm-bundler.js:3031
push @ vue-router.esm-bundler.js:2962
install @ vue-router.esm-bundler.js:3376
use @ runtime-core.esm-bundler.js:3088
(匿名) @ main.js:18
runtime-core.esm-bundler.js:6568 [Vue warn]: Property “_self” was accessed during render but is not defined on instance.
at <AuthingGuard key=0 appId=“6184880089185e871ed20107” mode=“model” … >
at <Main onVnodeUnmounted=fn ref=Ref< undefined > >
at
at
warn2 @ runtime-core.esm-bundler.js:6568
get @ runtime-core.esm-bundler.js:6005
y @ index.min.js:1
renderComponentRoot @ runtime-core.esm-bundler.js:444
componentUpdateFn @ runtime-core.esm-bundler.js:4211
run @ reactivity.esm-bundler.js:160
setupRenderEffect @ runtime-core.esm-bundler.js:4337
mountComponent @ runtime-core.esm-bundler.js:4120
processComponent @ runtime-core.esm-bundler.js:4078
patch @ runtime-core.esm-bundler.js:3673
mountChildren @ runtime-core.esm-bundler.js:3869
processFragment @ runtime-core.esm-bundler.js:4037
patch @ runtime-core.esm-bundler.js:3666
componentUpdateFn @ runtime-core.esm-bundler.js:4218
run @ reactivity.esm-bundler.js:160
setupRenderEffect @ runtime-core.esm-bundler.js:4337
mountComponent @ runtime-core.esm-bundler.js:4120
processComponent @ runtime-core.esm-bundler.js:4078
patch @ runtime-core.esm-bundler.js:3673
componentUpdateFn @ runtime-core.esm-bundler.js:4288
run @ reactivity.esm-bundler.js:160
callWithErrorHandling @ runtime-core.esm-bundler.js:6685
flushJobs @ runtime-core.esm-bundler.js:6924
Promise.then(异步)
queueFlush @ runtime-core.esm-bundler.js:6815
queueCb @ runtime-core.esm-bundler.js:6837
queuePostFlushCb @ runtime-core.esm-bundler.js:6843
queueEffectWithSuspense @ runtime-core.esm-bundler.js:1128
scheduler @ runtime-core.esm-bundler.js:7124
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:948
(匿名) @ reactivity.esm-bundler.js:1075
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:948
(匿名) @ reactivity.esm-bundler.js:1075
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:948
set value @ reactivity.esm-bundler.js:992
finalizeNavigation @ vue-router.esm-bundler.js:3187
(匿名) @ vue-router.esm-bundler.js:3060
Promise.then(异步)
pushWithRedirect @ vue-router.esm-bundler.js:3031
push @ vue-router.esm-bundler.js:2962
install @ vue-router.esm-bundler.js:3376
use @ runtime-core.esm-bundler.js:3088
(匿名) @ main.js:18
runtime-core.esm-bundler.js:6568 [Vue warn]: Unhandled error during execution of render function
at <AuthingGuard key=0 appId=“6184880089185e871ed20107” mode=“model” … >
at <Main onVnodeUnmounted=fn ref=Ref< undefined > >
at
at
warn2 @ runtime-core.esm-bundler.js:6568
logError @ runtime-core.esm-bundler.js:6742
handleError @ runtime-core.esm-bundler.js:6734
renderComponentRoot @ runtime-core.esm-bundler.js:473
componentUpdateFn @ runtime-core.esm-bundler.js:4211
run @ reactivity.esm-bundler.js:160
setupRenderEffect @ runtime-core.esm-bundler.js:4337
mountComponent @ runtime-core.esm-bundler.js:4120
processComponent @ runtime-core.esm-bundler.js:4078
patch @ runtime-core.esm-bundler.js:3673
mountChildren @ runtime-core.esm-bundler.js:3869
processFragment @ runtime-core.esm-bundler.js:4037
patch @ runtime-core.esm-bundler.js:3666
componentUpdateFn @ runtime-core.esm-bundler.js:4218
run @ reactivity.esm-bundler.js:160
setupRenderEffect @ runtime-core.esm-bundler.js:4337
mountComponent @ runtime-core.esm-bundler.js:4120
processComponent @ runtime-core.esm-bundler.js:4078
patch @ runtime-core.esm-bundler.js:3673
componentUpdateFn @ runtime-core.esm-bundler.js:4288
run @ reactivity.esm-bundler.js:160
callWithErrorHandling @ runtime-core.esm-bundler.js:6685
flushJobs @ runtime-core.esm-bundler.js:6924
Promise.then(异步)
queueFlush @ runtime-core.esm-bundler.js:6815
queueCb @ runtime-core.esm-bundler.js:6837
queuePostFlushCb @ runtime-core.esm-bundler.js:6843
queueEffectWithSuspense @ runtime-core.esm-bundler.js:1128
scheduler @ runtime-core.esm-bundler.js:7124
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:948
(匿名) @ reactivity.esm-bundler.js:1075
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:948
(匿名) @ reactivity.esm-bundler.js:1075
triggerEffects @ reactivity.esm-bundler.js:358
triggerRefValue @ reactivity.esm-bundler.js:948
set value @ reactivity.esm-bundler.js:992
finalizeNavigation @ vue-router.esm-bundler.js:3187
(匿名) @ vue-router.esm-bundler.js:3060
Promise.then(异步)
pushWithRedirect @ vue-router.esm-bundler.js:3031
push @ vue-router.esm-bundler.js:2962
install @ vue-router.esm-bundler.js:3376
use @ runtime-core.esm-bundler.js:3088
(匿名) @ main.js:18
runtime-core.esm-bundler.js:6568 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at Vue Issue Helper
at <AuthingGuard key=0 appId=“6184880089185e871ed20107” mode=“model” … >
at <Main onVnodeUnmounted=fn ref=Ref< undefined > >
at
at

好的,我们排查一下兼容性问题。

这个兼容性问题已经解决了,您现在更新一下 Guard 的版本 >= 2.4.60 就可以哈,如果您使用的 Vite 需要在 vite.config.js 添加

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: {
    include: ['@authing/native-js-ui-components']
  }
})