Issue with Indefinite Loading While Joining Zoom Meeting Using Vanilla JS and PHP JWT Signature

Meeting SDK
1

Hello,

I want to integrate Zoom Meeting on my matchmaking site between patients and doctors. So I started by creating an APP on the Zoom Marketplace by selecting Server to Server OAuth.

On the Backend side, I first create a meeting with the API, it works, I get a “meeting number” in the API response.
After that, I generate a JWT signature with PHP with the following information:

PHP

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;
}

Then I send all this information to my view, which is in HTML and Vanilla JavaScript:

HTML

<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: '', // I leave the password empty because when creating the meeting I also left it empty in the password field
                userName: 'John Doe',
                success: (success) => {
                    console.log(success)
                },
                error: (error) => {
                    console.log(error)
                }
            })
        },
        error: (error) => {
            console.log(error)
        }
    })
</script>

Here is my problem:

In my console, I have this error:

Uncaught (in promise) Error: Minified React error #200; visit REACT_JS_ORG_URL/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

Looking at this link, the full error corresponds to “Target container is not a DOM element.”

And on the interface, I have the message “Joining Meeting…” with a loader above it that spins indefinitely. No errors in the “Network” tab.

What should I do? Thank you in advance for your help.