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

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

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

Which version?

To Reproduce(If applicable)

  1. Use this repo for code -
  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?


@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:


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

Hey @kannan,

Gotcha! I suggest adding the preload / prepare scripts to the top of your app so they load right away.

Here is an example:

Try that and let me know if it fixes the issue! :slight_smile:


I had exactly the same problem.
I found a solution with Javascript ( angular project )
You have to create a div with id “zoom-content” into where you want and then into your javascript or component:
const zoomMeetingDiv = document.getElementById(“zmmtg-root”);
const zoomContent = this.document.getElementById(‘zoom-content’);
When you appendChild an existing node, it will be moved without a creation.

Have a nice day.

1 Like

Thanks for sharing this @mehdi.rouis! :slight_smile:


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