使用Vanilla JS和PHP JWT签名加入Zoom会议时无限加载问题

我在医患匹配网站中集成Zoom会议功能，已在Zoom Marketplace创建Server to Server OAuth类型应用：

• 后端通过API创建会议正常，能获取会议号；
• 用PHP生成JWT签名，代码如下：

public function getJwtSignatureMeeting($meeting_number, $role = 1)
{
    $key = $this->client_secret;
    $iat = time();
    $exp = $iat + 3600;
    $payload = [
        'sdkKey' => $this->client_id,
        'appKey' => $this->client_id,
        'mn' => $meeting_number, // ZOOM MEETING NUMBER
        'role' => $role, // 1 : Host 0 : Participant
        'iat' => $iat,
        'exp' => $exp,
        'tokenExp' => $exp,
    ];

    $jwt = JWT::encode($payload, $key, 'HS256');
    return $jwt;
}

• 前端HTML及JS代码如下：

<link type="text/css" rel="stylesheet" href="LINK_TO_ZOOM_US/3.6.0/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="LINK_TO_ZOOM_US/3.6.0/css/react-select.css" />

<div id="zmmtg-root"></div>
<div id="aria-notify-area"></div>

<script src="LINK_TO_ZOOM_US/3.6.0/lib/vendor/react.min.js"></script>
<script src="LINK_TO_ZOOM_US/3.6.0/lib/vendor/react-dom.min.js"></script>
<script src="LINK_TO_ZOOM_US/3.6.0/lib/vendor/redux.min.js"></script>
<script src="LINK_TO_ZOOM_US/3.6.0/lib/vendor/redux-thunk.min.js"></script>
<script src="LINK_TO_ZOOM_US/3.6.0/lib/vendor/lodash.min.js"></script>
<script src="LINK_TO_ZOOM_US/zoom-meeting-3.6.0.min.js"></script>
<script>
    ZoomMtg.setZoomJSLib('LINK_TO_ZOOM_US/3.6.0/lib', '/av');

    ZoomMtg.preLoadWasm();

    ZoomMtg.init({
        leaveUrl: 'LEAVE_URL/thanks-for-joining',
        success: (success) => {
            ZoomMtg.join({
                appKey: 'CLIENT_ID',
                signature: 'SIGNATURE GENERATED WITH JWT AND PHP',
                meetingNumber: 123456789,
                passWord: '', // 创建会议时未设置密码，此处留空
                userName: 'John Doe',
                success: (success) => {
                    console.log(success)
                },
                error: (error) => {
                    console.log(error)
                }
            })
        },
        error: (error) => {
            console.log(error)
        }
    })
</script>

当前遇到的问题：控制台抛出Uncaught (in promise) Error: Minified React error #200，解码后对应“Target container is not a DOM element”；界面显示“Joining Meeting...”并无限加载，网络面板无错误。

这个错误核心是Zoom SDK初始化时无法找到指定的DOM容器，按以下步骤排查修复：

1. 确保DOM容器在SDK脚本执行前加载完成
   将Zoom初始化代码放在</body>标签前，或者用DOMContentLoaded事件包裹，确保页面DOM完全渲染后再执行初始化逻辑：

   document.addEventListener('DOMContentLoaded', function() {
       ZoomMtg.setZoomJSLib('LINK_TO_ZOOM_US/3.6.0/lib', '/av');
       ZoomMtg.preLoadWasm();
   
       ZoomMtg.init({
           leaveUrl: 'LEAVE_URL/thanks-for-joining',
           success: (success) => {
               ZoomMtg.join({
                   appKey: 'CLIENT_ID',
                   signature: 'SIGNATURE GENERATED WITH JWT AND PHP',
                   meetingNumber: 123456789,
                   passWord: '',
                   userName: 'John Doe',
                   success: (success) => {
                       console.log(success)
                   },
                   error: (error) => {
                       console.log(error)
                   }
               })
           },
           error: (error) => {
               console.log(error)
           }
       })
   });
   

2. 检查容器ID的正确性
   确认页面中存在id="zmmtg-root"和id="aria-notify-area"的DOM元素，无拼写错误，也未被其他脚本动态移除或修改ID。

3. 排查React版本冲突
   页面手动引入的React库可能与Zoom SDK内置的React版本冲突，导致DOM挂载失败。尝试移除手动引入的React相关脚本，使用SDK自带版本：

   <!-- 移除以下两行 -->
   <!-- <script src="LINK_TO_ZOOM_US/3.6.0/lib/vendor/react.min.js"></script> -->
   <!-- <script src="LINK_TO_ZOOM_US/3.6.0/lib/vendor/react-dom.min.js"></script> -->
   

4. 验证JWT签名有效性
   无效签名可能导致SDK内部流程异常，间接引发加载问题。检查生成的JWT签名，确保payload中的sdkKey/appKey、mn、role等参数正确无误。

5. 确认SDK资源路径正确
   检查LINK_TO_ZOOM_US指向的目录是否正确，所有CSS和JS资源都能正常加载（可在Network面板查看资源状态）。

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