# Error when following meetingsdk-sample-react guide

**URL:** <https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788>\
**Category:** Web\
**Created:** [February 23, 2022, 9:56pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788 "2022-02-23T21:56:25Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![DaviidEb](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/daviideb/32/35473_2.png) [@DaviidEb](https://devforum.zoom.us/u/DaviidEb)\
**Post date:** [February 23, 2022, 9:56pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/1 "2022-02-23T21:56:25Z")

</div>

Hi,

I’m following your Zoom Meeting SDK Sample React guide and when I execute npm start I get the following errors:

1-

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/6/463dbc093f7ba3aa62394729da3da23db573e9d2.png)

2-

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

As I said, I followed the readme instructions exactly ( also replacing App.js with App-new.js and deleting old App.js ).

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [February 26, 2022, 10:32pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/2 "2022-02-26T22:32:47Z")

</div>

@DaviidEb,

Thank you for posting in the Developer Forum. I tested on my end and was able to get the Component React SDK running with the following steps.

**Steps redacted, please refer to post below for further guidance:**

> [@Error when following meetingsdk-sample-react guide](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/3):
>
> @DaviidEb, Following up, It looks like the fix is actually easier than that. All you need to do is uncomment the highlighted line (linked below) in the Public \> index.html file : Uncomment this line: [https://github.com/zoom/meetingsdk-sample-react/blob/master/public/index.html#L53](https://github.com/zoom/meetingsdk-sample-react/blob/master/public/index.html#L53) Additionally, a documentation update request to include this step has been submitted as well. Let me know if you have any questions about this. Best,

Let me know if the result is the same on your end. Here is a video of me running the [React in component view for reference](https://www.loom.com/share/d37638ccdcf848bfbfeb7f6b3edd6589). Also, once confirmed, I will be sure to place a documentation update request to include the steps as well.

Best,  
Donte

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [February 28, 2022, 9:13pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/3 "2022-02-28T21:13:35Z")

</div>

@DaviidEb,

Following up, It looks like the fix is actually easier than that. All you need to do is uncomment the highlighted line (linked below) in the Public \> index.html file :

### Uncomment this line:

[https://github.com/zoom/meetingsdk-sample-react/blob/master/public/index.html#L53](https://github.com/zoom/meetingsdk-sample-react/blob/master/public/index.html#L53)

Additionally, a documentation update request to include this step has been submitted as well. Let me know if you have any questions about this.

Best,

---

<div class="post-metadata">

**Author:** ![DaviidEb](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/daviideb/32/35473_2.png) [@DaviidEb](https://devforum.zoom.us/u/DaviidEb)\
**Post date:** [February 28, 2022, 10:19pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/4 "2022-02-28T22:19:27Z")

</div>

Hi @donte.zoom first of all thanks for reply to my post.

With your steps, everything is working okey!!

I would like to ask you a couple of questions more:

1- For each user that joins in a meeting, do i have to create a signature?

2- Following the previous question : I installed Zoom to my PC and I’m using my personal meeting id as meetingNumber (free account) and my access code as passWord.  
So, why having 2 diferent functions like getSignature1(e) and setting role to 1 ( start meetings ) and getSignature2(e) and setting role to 0 ( join meetings ) for 2 different users like teacher ( can start a meeting ) and student ( can join a meeting but not create it ) each of them can start a meeting despite having assigned role to 0 to an student?

I hope I have explained myself in this last question 😄

David.

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [February 28, 2022, 10:55pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/5 "2022-02-28T22:55:22Z")

</div>

Hello, @DaviidEb,

> [@DaviidEb](#):
>
> 1- For each user that joins in a meeting, do i have to create a signature?

Correct, “_each request to start or join a Zoom Meeting or Webinar must be verified by an encrypted signature authorizing each user to enter_”. Please see our Generate Signature help documentation for greater details on this subject :

[https://marketplace.zoom.us/docs/sdk/native-sdks/web/signature](https://marketplace.zoom.us/docs/sdk/native-sdks/web/signature)

> [@DaviidEb](#):
>
> 2- Following the previous question : I installed Zoom to my PC and I’m using my personal meeting id as meetingNumber (free account) and my access code as passWord.  
> So, why having 2 diferent functions like getSignature1(e) and setting role to 1 ( start meetings ) and getSignature2(e) and setting role to 0 ( join meetings ) for 2 different users like the teacher ( can start a meeting ) and student ( can join a meeting but not create it ) each of them can start a meeting despite having assigned role to 0 to an student?

Thank you for this question. Are you able to share a video reproducing a meeting being started when the role is set to 0? Also, can you confirm if you have joined before host enabled in your account settings? You can reference our help documentation here:

[https://support.zoom.us/hc/en-us/articles/202828525-Allow-participants-to-join-before-host](https://support.zoom.us/hc/en-us/articles/202828525-Allow-participants-to-join-before-host)

Best,  
Donte

---

<div class="post-metadata">

**Author:** ![DaviidEb](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/daviideb/32/35473_2.png) [@DaviidEb](https://devforum.zoom.us/u/DaviidEb)\
**Post date:** [March 3, 2022, 8:09pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/6 "2022-03-03T20:09:30Z")

</div>

Hi @donte.zoom ,

Now is working correctly , I think it was because in my second function for just joining created meetings “joinmeeting(signature)” as student , I was setting manually the signature ( probably because i was testing something) and not setting it from the paramater that i was receiving in that function.

Taking advantage of the post,

1. I would like to know if its possible ,using the component view version, change the component size?If its possible, could you paste me an example?
2. If i want to have different meetings for example , for each class like : Maths,Biology in the same web app, which steps should I follow?

Thanks again, you’re helping me a lot!  
PD: I dont know if i should make a different post for this questions 😅

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [March 8, 2022, 1:23am UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/7 "2022-03-08T01:23:39Z")

</div>

> [@DaviidEb](#):
>
> I would like to know if its possible ,using the component view version, change the component size?If its possible, could you paste me an example?

Yes, is possible to position the component view, see our help documentation which includes a code snippet here :

[https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/positioning/](https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/positioning/)

> [@DaviidEb](#):
>
> If i want to have different meetings for example , for each class like : Maths,Biology in the same web app, which steps should I follow?

Are you looking to run an entirely different meeting? If so, can you can our concurrently meeting feature to accomplish that, here is our help documentation on this topic:

[https://support.zoom.us/hc/en-us/articles/206122046-Can-I-Host-Concurrent-Meetings-](https://support.zoom.us/hc/en-us/articles/206122046-Can-I-Host-Concurrent-Meetings-)

Alternatively, have you considered leveraging our Breakout Feature? You can pre-assign participants to the breakroom based on the class assignment.

[https://support.zoom.us/hc/en-us/articles/360032752671-Pre-assigning-participants-to-breakout-rooms](https://support.zoom.us/hc/en-us/articles/360032752671-Pre-assigning-participants-to-breakout-rooms)

This can be done programmatically via the Create Meeting API setting object. Check out this helpful developer forum on that matter:

> [@Extend breakout rooms assign feature](https://devforum.zoom.us/t/extend-breakout-rooms-assign-feature/62215/2):
>
> Greetings, @dumidu47, Thank you for posting in the Developer Forum. The setting object for [Create](https://marketplace.zoom.us/docs/api-reference/zoom-api/meetings/meetingcreate) and [Update](https://marketplace.zoom.us/docs/api-reference/zoom-api/meetings/meetingupdate) Meeting API has a breakout\_room object you can use to pre-assigned breakout rooms: [Screen Shot 2022-01-05 at 8.56.01 AM] Here is our help documentation for the pre-assigned breakout rooms settings for reference : I hope this helps. Best, Donte

Best,  
Donte

---

<div class="post-metadata">

**Author:** ![DaviidEb](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/daviideb/32/35473_2.png) [@DaviidEb](https://devforum.zoom.us/u/DaviidEb)\
**Post date:** [March 31, 2022, 8:31pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/8 "2022-03-31T20:31:05Z")

</div>

Hi @donte.zoom,

Following this guide :

> [@donte.zoom](#):
>
> [https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/positioning/](https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/positioning/)

I’m still unable to resize the component view. Positioning the component is okay but when i try to edit the size it doesn’t works.

Inside the guide , there is an API Reference : [https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/reference/](https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/reference/) which has an option called “CustomSize” . The problem here is that it shows me that i can change height and width properties but i dont know how and where ( I think this guide should detail these actions).

Regards,  
David.

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [March 31, 2022, 9:38pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/9 "2022-03-31T21:38:57Z")

</div>

Hi, @DaviidEb,

A resizing guide was recently published, have you checked it out already ?

# Resizing

[https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/resizing/](https://marketplace.zoom.us/docs/sdk/native-sdks/web/component-view/resizing/)

---

<div class="post-metadata">

**Author:** ![DaviidEb](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/daviideb/32/35473_2.png) [@DaviidEb](https://devforum.zoom.us/u/DaviidEb)\
**Post date:** [March 31, 2022, 9:47pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/10 "2022-03-31T21:47:17Z")

</div>

Just now I was going to reply this post with that guide.

I followed the steps but the component size stills being the same.

I attach an image of my code :

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/d/f/dfbea4fbc06637547bee45ed9e2372d0a2cc1400.png)

David.

---

<div class="post-metadata">

**Author:** ![donte.zoom](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/donte.zoom/32/24412_2.png) [@donte.zoom](https://devforum.zoom.us/u/donte.zoom)\
**Post date:** [April 5, 2022, 2:31am UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/11 "2022-04-05T02:31:28Z")

</div>

Hi,  
Tested this and it looks like the Customize property is working as expected. Here is a screenshot of me setting the Zoom-SDK-Video-Canvas size:

 ![Screen Shot 2022-04-04 at 10.21.33 PM](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/4/5/450c3010453458a38983c197e00b17bcc6525853.jpeg)

Can you test again with Web SDK 2.3.5, I’ve linked it [here](https://github.com/zoom/meetingsdk-sample-react).

My Init:

```auto

    client.init({
      debug: true,
      zoomAppRoot: meetingSDKElement,
      language: 'en-US',
      customize: {
        meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
        video: {
          isResizable: true,
          viewSizes: {
            default: {
              width: 1000,
              height: 600
            },
            ribbon: {
              width: 300,
              height: 700
            }
          }
        },
        toolbar: {
          buttons: [
            {
              text: 'Custom Button',
              className: 'CustomButton',
              onClick: () => {
                console.log('custom button');
              }
            }
          ]
        }
      }
    });

```

---

<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:** [May 5, 2022, 12:32pm UTC](https://devforum.zoom.us/t/error-when-following-meetingsdk-sample-react-guide/64788/12 "2022-05-05T12:32:28Z")

</div>

Closed on May 5, 2022, 12:32pm UTC

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