React Websdk Unexpected token '<'

Im trying to embed a zoom metting inside a div using zmmtg-root id and im geeting this exception

import { useEffect } from 'react';
import { ZoomMtg } from '@zoomus/websdk';
const apiKeys = {
    apiKey: process.env.REACT_APP_ZOOM_API_KEY,
    apiSecret: process.env.REACT_APP_ZOOM_API_SECRET,
};
const meetConfig = {
    apiKey: apiKeys.apiKey.toString(),
    meetingNumber: 97674828533,
    userEmail: 'avglive.developer@gmail.com', // must be the attendee email address
    passWord: 'FS2M95',
    role: 0,
    error(res) {
        console.log('Joining meeting Error');
        console.dir(res);
    },
    success(e) {
        console.log('Joining meeting Success');
        console.log('Success: ', e);
    },
};

const Zoom = () => {
    ZoomMtg.setZoomJSLib('https://source.zoom.us/1.9.1/lib', '/av');
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();

    const joinMeeting = (signature) => {
        ZoomMtg.init({
            leaveUrl: 'http://www.zoom.us',
            isSupportAV: true,
            debug: true,
            success: () => {
                ZoomMtg.join({
                    meetingNumber: meetConfig.meetingNumber,
                    userName: 'Usuario de prueba',
                    signature,
                    apiKey: meetConfig.apiKey,
                    passWord: meetConfig.passWord,
                    success: (res) => {
                        console.log('join meeting success', res);
                    },
                    error: (res) => {
                        console.error('join meeting error', res);
                    },
                });
            },
        });
    };

    useEffect(() => {
      
        ZoomMtg.generateSignature({
            meetingNumber: meetConfig.meetingNumber,
            apiKey: meetConfig.apiKey,
            apiSecret: apiKeys.apiSecret,
            role: meetConfig.role,
            success: (res) => {
                console.log('signature res: ', res);
                setTimeout(() => {
                    joinMeeting(res.result);
                }, 1000);
            },
        });
    }, []);
    return null;
};

const App = () => (
    <div id='zmmtg-root' style={{ height: '800px', width: '800px' }}>
        <Zoom />
    </div>
);
export default App;

Error
Uncaught SyntaxError: Unexpected token ‘<’

To Reproduce(If applicable)
Just run the app

Hey @avglive.developer,

Thank you for reaching out to the Zoom Developer Forum. First, you can try removing the #zmmtg-root from your code as this element will be inserted by the Web SDK. If that doesn’t help, you can use our Sample React App as a reference when building out your application.

You can also test with that app to confirm that you are supplying the correct details.

Let me know if that helps.

Thanks,
Max

I’m experiencing this as well. I’m not including #zmmtg-root. Code is as follows:

import React, { useEffect } from "react";
import { ZoomMtg } from "@zoomus/websdk";

function Theirs() {
  useEffect(() => {
    ZoomMtg.setZoomJSLib("node_modules/@zoomus/websdk/dist/lib", "/av");
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();
  });

  const meetConfig = {
    apiKey: Meteor.settings.public.ZOOM_API,
    meetingNumber: [REDACTED],
    leaveUrl: "http://localhost:3000",
    userName: "test",
    passWord: "#####",
    userEmail: "test@example.com",
    role: 0,
  };

  function getSignature(e) {
    e.preventDefault();

    Meteor.call("zoom.generateSignature", meetConfig.meetingNumber, 0, function (e, response) {
      if (e) {
        console.log(e);
      }
      if (response) {
        Session.set("sigResponse", response);
        startMeeting(response);
      }
    });
  }

  function startMeeting(signature) {
    document.getElementById("zmmtg-root").style.display = "block";

    ZoomMtg.init({
      leaveUrl: meetConfig.leaveUrl,
      success: (success) => {
        console.log({ success, apiKey: meetConfig.apiKey });

        ZoomMtg.join({
          signature: signature,
          meetingNumber: meetConfig.meetingNumber,
          userName: meetConfig.userName,
          apiKey: Meteor.settings.public.ZOOM_API,
          userEmail: meetConfig.userEmail,
          passWord: meetConfig.passWord,
          success: (success) => {
            console.log("🐻", success);
          },
          error: (error) => {
            console.log("💥", error);
          },
        });
      },
      error: (error) => {
        console.log(error);
      },
    });
  }

  return (
    <div className='App'>
      <main>
        <h1>Zoom WebSDK Sample React</h1>

        <button onClick={getSignature}>Join Meeting</button>
      </main>
    </div>
  );
}

export default Theirs;

Hey @chris8,

Try importing the library from the CDN instead of locally:

Let me know if that helps.

Thanks,
Max

Hey Max,
I tried that and it worked. Thanks for your help.
Chris

1 Like

Great! I’m glad that worked. Feel free to reach out if you encounter any further issues or questions. :slightly_smiling_face:

Max

This error appears since the Zoom SDK tries to load the file locally, but cannot find it, so the local web server returns a 404 HTML page (which begins with <!DOCTYPE html>), hence the ‘<’ in the error message. The SDK expects a JavaScript file, but it receives an HTML response instead.

Try this:
On line 6, try changing the path to a relative path, something like ../node_modules/@zoomus…. Perhaps that will provide a correct path to the lib files.


What you could also do is to copy the /av directory (inside node_modules/@zoomus/websdk/dist/lib) into the public folder.

Then serving it that way using the path '.' like so:

ZoomMtg.setZoomJSLib(".", "/av");

Hey @daniel2,

Thank you for sharing your experience with this issue as well as potential workarounds! That will certainly be helpful for other users.

Thanks,
Max

1 Like