React Websdk Unexpected token '<'

[avglive.developer (Avgrouplive)]

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

[MaxM]

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

[chris8 (Chris)]

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;

[MaxM]

Hey @chris8,

Try importing the library from the CDN instead of locally:

zoom/websdk-sample-react/blob/0ac10da7a4231b06da69a31c0f9c5ea07d0a848a/src/App.js#L5

Let me know if that helps.

Thanks,
Max

[chris8 (Chris)]

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

[MaxM]

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

Max

[daniel2 (Daniel)]

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");

[MaxM]

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