Please init meeting first! Error when adding div id="zmmtg-root" inside a React component

Description
Getting the error Please init meeting first when adding a div id=“zmmtg-root”# inside a component

Error
{
“method”: “init”,
“status”: false,
“errorCode”: 3008,
“errorMessage”: “Please init meeting first!”,
“result”: null
}

Which version?
1.8.0

To Reproduce(If applicable)

  1. Use this repo for code - https://github.com/shkhalid/zoom-web-sdk-react-example
  2. Inside App.js add div id=“zmmtg-root”
  3. npm i && npm start to start the app
  • OS:Mac os Catalina
  • Version: 83
  • Browser:Chrome

Additional context
This repo works without adding the custom div inside. I am trying to embed the websdk into a component. That’s when I run into this error.

  1. Token are generated
  2. Meeting gets initialized Successfully
  3. when the Join meeting is called I get this error

Thanks for the help.

Angular has the same issue. If you add div id=“zmmtg-root” then the “Please init meeting first!” error occurs.

Sample Project

I have attached a sample project based on the standard angular sample that demonstrates the issue. The attached sample works in 1.7.9 but fails in 1.8.0

Hey @sgahaghan, @kannan,

Currently setting the div id="zmmtg-root" is not supported. The Web SDK appends it to the DOM itself.

What is your use case for adding the zmmtg-root id in a custom way?

Thanks,
Tommy

@tommy I would like to keep it inside the component, resize the view (which right now takes up the full page) and add some event handlers are something. I want to destroy WebClient when my component moves out of view.

Hey @kannan,

Gotcha, you can see a similar approach in the Angular Sample App:

Thanks,
Tommy

@Tommy but if you see my error description I get that error while doing something similar to this