Using Zoom Web SDK with a React Widget Thats used in JupyterLab

Description
So I am trying to use the zoom web sdk in jupyterlab and react. But I dont know how to implement the index.html to get this to work. The error is a Reference Error.

Error
ReferenceError: $ is not defined
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
at Object. (zoomus-websdk.umd.min.js:2)
at n (zoomus-websdk.umd.min.js:2)
main (at sign here) index.out.js:995

In my app.tsx file:

import { ReactWidget } from ‘@jupyterlab/apputils’;
import React, { FunctionComponent, useEffect, useState } from ‘react’;
import { VideoStream } from ‘./Video’;

const App: FunctionComponent = (): JSX.Element => {
const [loadedScript, setLoadedScript] = useState(false);

useEffect(() => {
const script = document.createElement(‘script’);

script.src = 'https://source.zoom.us/1.7.8/lib/vendor/jquery.min.js';
script.async = true;

document.body.appendChild(script);
console.log('-------------------> Added Jquery to window');
setLoadedScript(true);
return () => {
  document.body.removeChild(script);
  console.log('-------------------> Removed Jquery to window');
};

}, );

return loadedScript ?

Hello
: ;

// return (
//


//

Hello


//

// );
};

export default class AppWidget extends ReactWidget {
constructor() {
super();
this.addClass(‘jp-ReactWidget’);
}

render(): JSX.Element {
return ;
}
}

In my video.tsx file I have

/** (at sign here)jsx jsx */
import { ReactWidget } from ‘(at sign here)jupyterlab/apputils’;
import { jsx } from ‘(at sign here)emotion/core’;
//import axios from ‘axios’;
import { useEffect } from ‘react’;
import ‘bulma/css/bulma.css’;
import { ZoomMtg } from ‘(at sign here)zoomus/websdk’;

//import { BASE_URL, CUSTOM_HEADERS } from ‘./Constants’;

export const VideoStream = (): JSX.Element => {
const API_KEY = ‘I placed my key here’;
const API_SECRET = ‘And my api key here’;
const MEETING_NUMBER = MeetingNum;

const meetConfig = {
apiKey: API_KEY,
apiSecret: API_SECRET,
meetingNumber: MEETING_NUMBER,
userName: ‘test user’,
passWord: ‘9SFH9G’,
leaveUrl: ‘https://zoom.us’,
role: 0
};

const state = {
meetingLaunched: false
};

const launchMeeting = () => {
//setState({ meetingLaunched: !state.meetingLaunched });

ZoomMtg.generateSignature({
  meetingNumber: meetConfig.meetingNumber,
  apiKey: meetConfig.apiKey,
  apiSecret: meetConfig.apiSecret,
  role: meetConfig.role,
  success(res) {
    console.log('signature', res.result);
    ZoomMtg.init({
      leaveUrl: 'http://www.zoom.us',
      success() {
        ZoomMtg.join({
          meetingNumber: meetConfig.meetingNumber,
          userName: meetConfig.userName,
          signature: res.result,
          apiKey: meetConfig.apiKey,
          userEmail: 'email@gmail.com',
          passWord: meetConfig.passWord,
          success() {
            console.log('join meeting success');
          },
          error(res) {
            console.log(res);
          }
        });
      },
      error(res) {
        console.log(res);
      }
    });
  }
});

};

useEffect(() => {
ZoomMtg.setZoomJSLib(‘https://source.zoom.us/1.7.8/lib’, ‘/av’);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();
});

return (





  <script src="https://source.zoom.us/1.7.8/lib/vendor/jquery.min.js" />

  {!state ? (
    <button className="launchButton" onClick={launchMeeting}>
      Launch Meeting
    </button>
  ) : (
    <div />
  )}
</div>

);
};

export class VideoStreamWidget extends ReactWidget {
constructor() {
super();
this.addClass(‘jp-ReactWidget’);
}

render(): JSX.Element {
return ;
}
}

And my index.js (Used to create the jupyterlab widget)

import {
JupyterFrontEnd,
JupyterFrontEndPlugin
} from ‘(at sign here)jupyterlab/application’;

import { MainAreaWidget } from ‘(at sign here)jupyterlab/apputils’;

import { ILauncher } from ‘@jupyterlab/launcher’;

import { reactIcon } from ‘@jupyterlab/ui-components’;

import App from ‘./App’;

namespace CommandIDs {
export const create = ‘open-ignite-video’;
}

const extension: JupyterFrontEndPlugin = {
id: ‘ignite-video-stream-widget’,
autoStart: true,
optional: [ILauncher],
activate: (app: JupyterFrontEnd, launcher: ILauncher) => {
const { commands } = app;

const command = CommandIDs.create;
commands.addCommand(command, {
  caption: 'Open Ignite Video Panel',
  label: 'Ignite Video',
  icon: args => (args['isPalette'] ? null : reactIcon),
  execute: () => {
    const content = new App();
    const widget = new MainAreaWidget<App>({ content });
    widget.title.label = 'Ignite Video';
    app.shell.add(widget, 'main');
  }
});

if (launcher) {
  launcher.add({
    command
  });
}

}
};

export default extension;

I added the dependencies properly its just that i dont know how to implement the zoom sdk index.html file into our code. The way we have it setup right now is that the (at)zoom/websdk runs before the jquery so this issue arises. Does anyone have a work around?

Which version?

Browser is Chrome
using zoom sdk 1.7.8

Hey @ychama15,

You will need to provide jQuery globally before loading the Web SDK files.

Thanks,
Tommy