React 18集成IBM Cloud App ID报错：TypeError: AppID不是函数

问题描述 #

按照IBM Cloud的React集成App ID示例实现时，在React 18环境下执行以下代码出现错误：

TypeError: AppID is not a function

涉及代码片段：

const appID = useMemo(() => {
    return new AppID();
  }, []);

解决方案 #

1. 修正导入方式 #

ibmcloud-appid-js包的新版本可能调整了导出结构，将原来的命名导出改为默认导出。将导入语句修改为：

import AppID from 'ibmcloud-appid-js';

2. 使用实例获取方法替代直接构造 #

部分版本的包不再支持通过new AppID()创建实例，而是提供静态方法获取单例：

const appID = useMemo(() => {
  return AppID.getInstance();
}, []);

3. 补充初始化配置 #

确保初始化时传入正确的App ID配置参数，保证登录拦截功能正常工作：

const appID = useMemo(() => {
  const instance = AppID.getInstance();
  instance.init({
    clientId: '你的Client ID',
    tenantId: '你的Tenant ID',
    oauthServerUrl: '你的OAuth服务地址'
  });
  return instance;
}, []);

4. 版本兼容检查 #

确认ibmcloud-appid-js版本与React 18兼容，可尝试锁定到示例文档中使用的版本，或升级至最新稳定版。

验证 #

修改代码后重启应用，确认错误消失，且App ID能正常拦截未授权的登录请求，引导用户完成认证流程。

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