# Reactjs Websdk importing causes black screen entire project

**URL:** <https://devforum.zoom.us/t/reactjs-websdk-importing-causes-black-screen-entire-project/49430>\
**Category:** Web\
**Created:** [May 3, 2021, 8:21am UTC](https://devforum.zoom.us/t/reactjs-websdk-importing-causes-black-screen-entire-project/49430 "2021-05-03T08:21:14Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![teamayka](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/teamayka/32/18410_2.png) [@teamayka](https://devforum.zoom.us/u/teamayka)\
**Post date:** [May 3, 2021, 8:21am UTC](https://devforum.zoom.us/t/reactjs-websdk-importing-causes-black-screen-entire-project/49430/1 "2021-05-03T08:21:14Z")

</div>

While importing websdk in react it’s showing a black in entire project

import React,{useEffect} from “react”;

import {ZoomMtg} from ‘@zoomus/websdk’;

function App() {

var signatureEndpoint = ‘’

var apiKey = ‘’

var meetingNumber = ‘’

var role = 0

var leaveUrl = ‘[http://localhost:3000](http://localhost:3000)’

var userName = ‘React’

var userEmail = ‘’

var passWord = ‘’

useEffect(()=\>{

```
ZoomMtg.preLoadWasm();

ZoomMtg.prepareWebSDK();

```

},)

function getSignature(e) {

```
e.preventDefault();

fetch(signatureEndpoint, {

  method: 'POST',

  headers: { 'Content-Type': 'application/json' },

  body: JSON.stringify({

    meetingNumber: meetingNumber,

    role: role

  })

}).then(res => res.json())

.then(response => {

  startMeeting(response.signature)

}).catch(error => {

  console.error(error)

})

```

}

function startMeeting(signature) {

```
document.getElementById('zmmtg-root').style.display = 'block'

ZoomMtg.init({

  leaveUrl: leaveUrl,

  isSupportAV: true,

  success: (success) => {

    console.log(success)

    ZoomMtg.join({

      signature: signature,

      meetingNumber: meetingNumber,

      userName: userName,

      apiKey: apiKey,

      userEmail: userEmail,

      passWord: passWord,

      success: (success) => {

        console.log(success)

      },

      error: (error) => {

        console.log(error)

      }

    })

  },

  error: (error) => {

    console.log(error)

  }

})

```

}

return (

```
<div >

    <h1>Zoom WebSDK Sample React</h1>

    <button onClick={getSignature}>Join Meeting</button>

</div>

```

);

}

export default App;

**Error**  
showing a black screen ,ui hidden with that and while inpspect i can see that

 have some css property width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: black; and when i change the delete position property i can see the ui 

**Which Web Client SDK version?**  
“@zoomus/websdk”: “^1.9.1”,

**To Reproduce(If applicable)**  
Steps to reproduce the behavior:

**Screenshots**

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/1/5/1532a1c40ab7dd543a8af68947169b96fa7be1ac.png)

**Device (please complete the following information):**

- Browser: Chrome

---

<div class="post-metadata">

**Author:** ![alexmayo](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/alexmayo/32/27289_2.png) [@alexmayo](https://devforum.zoom.us/u/alexmayo)\
**Post date:** [May 4, 2021, 2:11pm UTC](https://devforum.zoom.us/t/reactjs-websdk-importing-causes-black-screen-entire-project/49430/2 "2021-05-04T14:11:53Z")

</div>

Hi @teamayka,

I can see from your screenshot that there are 3x console errors. Please could you share them with us?

Many thanks,  
Alex

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [May 4, 2021, 7:43pm UTC](https://devforum.zoom.us/t/reactjs-websdk-importing-causes-black-screen-entire-project/49430/3 "2021-05-04T19:43:58Z")

</div>

Hey @teamayka ,

Here is our Web SDK React sample app if you would like to see a working example of how to use the Web SDK with react:

> **[zoom/websdk-sample-react](https://github.com/zoom/websdk-sample-react)**
>
> Use the Zoom Web SDK in a React App. Contribute to zoom/websdk-sample-react development by creating an account on GitHub.

CC @alexmayo ,

Thanks,  
Tommy

---

<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:** [June 4, 2021, 5:44am UTC](https://devforum.zoom.us/t/reactjs-websdk-importing-causes-black-screen-entire-project/49430/4 "2021-06-04T05:44:56Z")

</div>

Closed on June 4, 2021, 5:44am UTC

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