使用官方github代码(examples/guard-nextjs-react18)，单独跑官方代码没问题，引入项目后，二维码无法显示。
关键代码如下：
1,config/index.ts
import { GuardOptions } from ‘@authing/guard-react18’
export const guardOptions: GuardOptions = {
appId: “65dd415d57c5e88e4de9d099”,
// 如果你使用的是私有化部署的 Authing 服务，需要传入自定义 host，如:
// host: ‘https://my-authing-app.example.com’,
// 默认情况下，会使用你在 Authing 控制台中配置的第一个回调地址为此次认证使用的回调地址。
// 如果你配置了多个回调地址，也可以手动指定（此地址也需要加入到应用的「登录回调 URL」中）：
redirectUri: process.env.NEXT_PUBLIC_API_PREFIX+’/oauth/authorize/authing’,
config: {
socialConnectionList: [‘wechat:pc’]
}
}
2,业务代码signup/page.tsx
‘use client’
import { useEffect } from ‘react’
import { Guard } from ‘@authing/guard-react18’
import ‘@authing/guard-react18/dist/esm/guard.min.css’
import { guardOptions } from ‘@/config’
export default function SignUp() {
const guard = new Guard(guardOptions)
const guardEffects = async () => {
guard.start(’#authing-guard-container’).then(userInfo => {
console.log('start userInfo: ', userInfo)
})
guard.on('load', (e) => {
console.log('加载---啊', e)
})
guard.on('login', userInfo => {
console.log('userInfo: ', userInfo)
// ....... 跳转
})
}
useEffect(() => {
guardEffects()
}, [])
return (
)
}
3,运行后错误信息及图片
1）控制台：
app-index.js:34 TypeError: Cannot read properties of null (reading ‘nodeName’)
at Mq (guard.min.js:12:2185875)
at Mq (guard.min.js:12:2185886)
at Mq (guard.min.js:12:2185886)
at eval (guard.min.js:12:2168900)
at ol (guard.min.js:12:349563)
at Cu (guard.min.js:12:369685)
at eval (guard.min.js:12:366289)
at k (guard.min.js:12:386888)
at MessagePort.P (guard.min.js:12:387420)
window.console.error @ app-index.js:34
显示另外 1 个框架
收起
guard.min.js:12 Uncaught TypeError: Cannot read properties of null (reading ‘nodeName’)
at Mq (guard.min.js:12:2185875)
at Mq (guard.min.js:12:2185886)
at Mq (guard.min.js:12:2185886)
at eval (guard.min.js:12:2168900)
at ol (guard.min.js:12:349563)
at Cu (guard.min.js:12:369685)
at eval (guard.min.js:12:366289)
at k (guard.min.js:12:386888)
at MessagePort.P (guard.min.js:12:387420)
2），页面提示：
1 of 1 unhandled errorNext.js (14.0.4) out of date (learn more)
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading ‘nodeName’)
Call Stack
Mq
node_modules/@authing/guard-react18/dist/esm/guard.min.js (2:2185876)
Mq
node_modules/@authing/guard-react18/dist/esm/guard.min.js (2:2185876)
Mq
node_modules/@authing/guard-react18/dist/esm/guard.min.js (2:2185876)
eval
node_modules/@authing/guard-react18/dist/esm/guard.min.js (2:2168922)
ol
node_modules/@authing/guard-react18/dist/esm/guard.min.js (2:349576)
Cu
node_modules/@authing/guard-react18/dist/esm/guard.min.js (2:369685)
eval
node_modules/@authing/guard-react18/dist/esm/guard.min.js (2:366305)
k
node_modules/@authing/guard-react18/dist/esm/guard.min.js (2:386905)
MessagePort.P
node_modules/@authing/guard-react18/dist/esm/guard.min.js (2:387441)
3）页面情况：
后续再补
