# JSMediaSdk\_Instance not defined on React App

**URL:** <https://devforum.zoom.us/t/jsmediasdk-instance-not-defined-on-react-app/56541>\
**Category:** Web\
**Created:** [August 27, 2021, 9:49am UTC](https://devforum.zoom.us/t/jsmediasdk-instance-not-defined-on-react-app/56541 "2021-08-27T09:49:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Rahjaesh](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rahjaesh/32/23779_2.png) [@Rahjaesh](https://devforum.zoom.us/u/Rahjaesh)\
**Post date:** [August 27, 2021, 9:49am UTC](https://devforum.zoom.us/t/jsmediasdk-instance-not-defined-on-react-app/56541/1 "2021-08-27T09:49:10Z")

</div>

Hello, im currently using the SDK for some project

But for some reason i got black screen with the [JSMediaSdk\_Instance not defined] error everytime i joined a meeting, even though in the host side, the participant still counted as joined

I read the forums and some people say that u need to add these in didmount or useEffect:

```auto
ZoomMtg.setZoomJSLib("node_modules/@zoomus/websdk/dist/lib", "/av");
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

```

I did that, but still got the errors.

here’s my full code:

```auto
import React, { useEffect, useCallback } from "react";
import "./App.css";
import { ZoomMtg } from "@zoomus/websdk";
import { generateSignature } from './Function/GenerateSignature';

function App() {
  const apiKey = process.env.REACT_APP_API_KEY;
  const secretKey = process.env.REACT_APP_API_SECRET;
  const signature = generateSignature(apiKey, secretKey, 74780324270, 0);

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

  const initiate = () => {
    ZoomMtg.init({
      leaveUrl: 'https://www.google.com',
      isSupportAV: true,
      success: (success) => {
        console.log(success)
    
        ZoomMtg.join({
          signature: signature,
          meetingNumber: 74780324270,
          userName: 'Hendry Varvar',
          apiKey: apiKey,
          passWord: '4rBFJm',
          success: (success) => {
            console.log(success)
          },
          error: (error) => {
            console.log(error)
          }
        })
    
      },
      error: (error) => {
        console.log(error)
      }
    })
  };

  return (
    <div className="App">
      
    </div>
  );
}

export default App;

```

Thanks in advance !

---

<div class="post-metadata">

**Author:** ![MaxM](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/maxm/32/42303_2.png) [@MaxM](https://devforum.zoom.us/u/MaxM)\
**Post date:** [August 31, 2021, 4:40pm UTC](https://devforum.zoom.us/t/jsmediasdk-instance-not-defined-on-react-app/56541/2 "2021-08-31T16:40:39Z")

</div>

Hey @Rahjaesh,

Thank you for reaching out to the Zoom Developer Forum. Please try using the [CDN Method](https://marketplace.zoom.us/docs/sdk/native-sdks/web/build#option-2-import-through-cdn) to load dependencies. Here’s an example from our [Sample React App](https://github.com/zoom/websdk-sample-react/tree/master/src) that you can use as a reference.

> <https://github.com/zoom/meetingsdk-sample-react/blob/98334f6791f193f34404864b50f5ee1fb6cd64ae/public/index.html#L36-L41>

Let me know if that helps.

Thanks,  
Max

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [October 1, 2021, 2:41am UTC](https://devforum.zoom.us/t/jsmediasdk-instance-not-defined-on-react-app/56541/3 "2021-10-01T02:41:13Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.