Zoom SDK not able to load in ReactJS project

Description
I am using Zoom SDK to integrate in my React Application and made use of below repo to start with developing it.

My public/index.html file content is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.0/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.7.0/css/react-select.css" />
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <script src="https://source.zoom.us/1.7.0/lib/vendor/jquery.min.js"></script>

  </body>
</html>

In My ZoomCall component this is what I am doing:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { ZoomMtg } from '@zoomus/websdk';

export default class ZoomCall extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    console.log('checkSystemRequirements');
    ZoomMtg.setZoomJSLib('https://source.zoom.us/1.7.0/lib', '/av');
    ZoomMtg.preLoadWasm();
    ZoomMtg.prepareJssdk();
  }
  render() {
    return(
      <div>Zoom Call</div>
    );
  }
}


ZoomCall.propTypes = {
  meetingData: PropTypes.object
};

Error
The page does not renders and after few seconds browser crashes and do give any response. Console gives me this error when I try to load page:

You need to add jquery as a dependency.

1 Like

Thanks for sharing the solution @dramoslance! :slight_smile:

@vijay.singh, please let me know if you have additional questions.

-Tommy