React集成Keycloak报错：Keycloak实例仅能被实例化一次

问题场景 #

主应用集成Keycloak登录功能失败后，创建全新React项目并按照官方文档实现简易登录流程，却触发Keycloak Instance can only be instantiated once报错，浏览器控制台报错栈截图：

当前代码实现 #

App.tsx #

import './App.css'

import { ReactKeycloakProvider } from '@react-keycloak/web'
import keycloak from './keycloak'

function App() {
  return (
    <>
      <ReactKeycloakProvider authClient={keycloak}>...</ReactKeycloakProvider>
    </>
  )
}

export default App

keycloak.ts #

import Keycloak from 'keycloak-js'

const initOptions = {
    url: 'http://0.0.0.0:8080/auth',
    realm: 'test',
    clientId: 'test_client'
}

const keycloak = new Keycloak(initOptions)

export default keycloak

已尝试的解决方案 #

• 咨询AI工具、查阅同类问题
• 改用单例模式创建Keycloak实例，代码如下：

class KeycloakConfiguration {
private static instance: Keycloak.KeycloakInstance | null = null

private constructor() {}

public static getInstance(): Keycloak.KeycloakInstance {
    if (!KeycloakConfiguration.instance) {
        const initOptions = {
            url: 'http://0.0.0.0:8080/auth',
            realm: 'test',
            clientId: 'test_client',
        }

        KeycloakConfiguration.instance = new Keycloak(initOptions)
    }

    return KeycloakConfiguration.instance
}
}

以上方案均未解决问题。

内容的提问来源于stack exchange，提问作者C1PHER