Web Meeting SDK 3.5.2 throwing console warnings

tcobb · March 26, 2024, 5:31pm

The version 3.5.2 of the web meeting SDK is throwing console warnings when calling the join method.

Namely,
Warning: You are importing createRoot from “react-dom” which is not supported. You should instead import it from “react-dom/client”.

and
console.js:213 Warning: Each child in a list should have a unique “key” prop. See Rendering Lists – React for more information.

Full console log:

11:23:08.124 ZoomClient.tsx:59 Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
overrideMethod @ console.js:213
printWarning @ chunk-YIW3PXNK.js?v=5efec4d8:62
error @ chunk-YIW3PXNK.js?v=5efec4d8:46
createRoot$1 @ chunk-YIW3PXNK.js?v=5efec4d8:21045
(anonymous) @ @zoom_meetingsdk_embedded.js?v=5efec4d8:47703
(anonymous) @ @zoom_meetingsdk_embedded.js?v=5efec4d8:47680
d2 @ @zoom_meetingsdk_embedded.js?v=5efec4d8:126
(anonymous) @ @zoom_meetingsdk_embedded.js?v=5efec4d8:209
(anonymous) @ @zoom_meetingsdk_embedded.js?v=5efec4d8:149
W @ @zoom_meetingsdk_embedded.js?v=5efec4d8:369
a2 @ @zoom_meetingsdk_embedded.js?v=5efec4d8:381
(anonymous) @ @zoom_meetingsdk_embedded.js?v=5efec4d8:386
(anonymous) @ @zoom_meetingsdk_embedded.js?v=5efec4d8:378
(anonymous) @ @zoom_meetingsdk_embedded.js?v=5efec4d8:47712
(anonymous) @ ZoomClient.tsx:59
Promise.then (async)
(anonymous) @ ZoomClient.tsx:57
commitHookEffectListMount @ chunk-YIW3PXNK.js?v=5efec4d8:16445
commitPassiveMountOnFiber @ chunk-YIW3PXNK.js?v=5efec4d8:17693
commitPassiveMountEffects_complete @ chunk-YIW3PXNK.js?v=5efec4d8:17666
commitPassiveMountEffects_begin @ chunk-YIW3PXNK.js?v=5efec4d8:17656
commitPassiveMountEffects @ chunk-YIW3PXNK.js?v=5efec4d8:17646
flushPassiveEffectsImpl @ chunk-YIW3PXNK.js?v=5efec4d8:19027
flushPassiveEffects @ chunk-YIW3PXNK.js?v=5efec4d8:18984
(anonymous) @ chunk-YIW3PXNK.js?v=5efec4d8:18865
workLoop @ chunk-4QYIQTDY.js?v=5efec4d8:194
flushWork @ chunk-4QYIQTDY.js?v=5efec4d8:173
performWorkUntilDeadline @ chunk-4QYIQTDY.js?v=5efec4d8:381
Show 25 more frames
Show less
11:23:12.422 console.js:213 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:27331:120
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:39647:29
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:23626:30
    at div
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:23626:30
    at div
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:23626:30
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:27499:25
    at Fde (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:39653:29)
    at div
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:23626:30
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:24793:25
    at Ipe (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:40429:29)
    at Ope (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:40463:16)
    at div
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:23626:30
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:24793:25
    at div
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:23626:30
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:26024:27
    at r10 (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:47031:40)
    at sve (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:47208:29)
    at div
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:23626:30
    at http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:26024:27
    at t10 (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:28042:24)
    at n11 (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:28192:26)
    at wve (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:47486:29)
    at DH (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:24310:29)
    at VH (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:24333:29)
    at xF (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:24493:29)
    at t10 (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:28693:35)
    at Bte (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:35304:29)
    at yve (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:47558:56)
    at div
    at S10 (http://localhost:8094/node_modules/.vite/deps/@zoom_meetingsdk_embedded.js?v=5efec4d8:47580:31)
overrideMethod @ console.js:213
printWarning @ chunk-YIW3PXNK.js?v=5efec4d8:62
error @ chunk-YIW3PXNK.js?v=5efec4d8:46
warnForMissingKey @ chunk-YIW3PXNK.js?v=5efec4d8:10696
warnOnInvalidKey @ chunk-YIW3PXNK.js?v=5efec4d8:11034
reconcileChildrenArray @ chunk-YIW3PXNK.js?v=5efec4d8:11064
reconcileChildFibers2 @ chunk-YIW3PXNK.js?v=5efec4d8:11388
reconcileChildren @ chunk-YIW3PXNK.js?v=5efec4d8:13833
updateForwardRef @ chunk-YIW3PXNK.js?v=5efec4d8:13892
beginWork @ chunk-YIW3PXNK.js?v=5efec4d8:15475
beginWork$1 @ chunk-YIW3PXNK.js?v=5efec4d8:19290
performUnitOfWork @ chunk-YIW3PXNK.js?v=5efec4d8:18735
workLoopSync @ chunk-YIW3PXNK.js?v=5efec4d8:18674
renderRootSync @ chunk-YIW3PXNK.js?v=5efec4d8:18653
performConcurrentWorkOnRoot @ chunk-YIW3PXNK.js?v=5efec4d8:18215
workLoop @ chunk-4QYIQTDY.js?v=5efec4d8:194
flushWork @ chunk-4QYIQTDY.js?v=5efec4d8:173
performWorkUntilDeadline @ chunk-4QYIQTDY.js?v=5efec4d8:381
Show 18 more frames
Show less

donte.zoom · March 26, 2024, 9:32pm

@tcobb,

Hey there! Thanks for reaching out here in the Zoom Developer Forum. So, which SDK have you been playing around with? Mind giving a bit more detail about your integration, like the tech stack you’re using? I noticed ‘vite’ in the logs - have you been testing this workflow with the sample? If so, can you reproduce this issue with the sample as well ?

tcobb · March 26, 2024, 9:34pm

We are using react 18.
Yes, the console warnings are generated by the react sample app as well.

This is version 3.5.2.

rfinelli · May 14, 2024, 8:17pm

I’m getting the same browser console errors using Web MeetingSDK 3.6.1. When I downgrade the version to prior to 3.5.1 I no longer receive the console errors. In 3.5.1 the zoom change log mentions that the minimum versions of React was updated. I confirmed that after I do an npm install, the necessary react dependencies were also installed. However, I am using Angular as my javascript framework.

Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

rfinelli · May 14, 2024, 9:03pm

I’m also getting a second browser console error that seems to be related to the upgraded react dependency:

react-dom.development.js:86: Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.

donte.zoom · May 16, 2024, 10:54pm

Thank you for posting in the Zoom Developer Forum! Are you seeing these errors when testing with the Sample Angular app as well, or is it only happening with your integration? Here’s a link to the Angular Sample app. If you have not tested it already, could you test it and share the results with us?

rfinelli · May 20, 2024, 1:43pm

Hey Donte, I’m a little lost/stuck trying to run the sample app. However, in this thread Troy Cobb mentions he ran the sample app and received the errors there as well.

wouterwisselink · May 23, 2024, 7:37pm

+1 I’m experiencing the same issue. Trying to use Zoom SDK inside a Vue 3 app.

rfinelli · May 28, 2024, 2:24pm

As a follow up, I didn’t change anything in my app. I re-installed the 3.6.1 version using npm install and my app no longer receives the react errors. Perhaps they fixed it without adding it to their release notes?

osama.ehsan7867 · June 26, 2024, 6:14am

Is there any update on this? I am using Zoom Meeting SDK in my NextJS app (app router) and receiving the same warning as above i.e “import createRoot from react-dom/client”. My zoom SDK package and versions are “@zoom/meetingsdk”: “^3.7.0”,

yerisaguilar · October 17, 2024, 7:08pm

Is there any news regarding this issue? I’m also encountering these warnings. I was using version 2.18 and tried updating to version 3.5.2, but the warnings appeared, so I downgraded to version 3.1.6, and the warnings went away. My app is using Nuxt 3. I really appreciate any help.

PhasedConnect_dev · October 18, 2024, 8:16am

Same Issue here. Running @zoom/meetingsdk on my React app.
react: v18.2.0
react-dom: v18.2.0

Getting console errors:

You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".  react-dom.development.js:86

Warning: Each child in a list should have a unique "key" prop. See reactjs.org/link/warning-keys for more information. react-dom.development.js:86

I have tested @zoom/meetingsdk versions:

All of these versions until 3.1.6 give errors.

I need to run the latest @zoom/meetingsdk version (3.9.0) without those console errors. Please help @donte.zoom @gianni.zoom @chunsiong.zoom @elisa.zoom

chunsiong.zoom · October 18, 2024, 1:29pm

@PhasedConnect_dev starting from 3.5.1, the SDK requires React 18+.

This is an error message which is specific to React 18.
You might want to refer to the newer samples on how to import the SDK

PhasedConnect_dev · October 18, 2024, 3:30pm

But my project is using React 18.2.0.

I don’t understand?

yerisaguilar · October 18, 2024, 3:56pm

@chunsiong.zoom My project is using Vue, not React, but the SDK includes React 18.2.0 as a dependency. I don’t understand why React is involved or required in this case.

PhasedConnect_dev · October 21, 2024, 8:16am

@donte.zoom @gianni.zoom @chunsiong.zoom @elisa.zoom Please check into this.

Is it maybe because I’m using react-scripts to run and build my app that uses @zoom/meetingsdk?

That’s literally the only thing that differs to your Zoom Sample App. You’re running it with: node script.js && vite and building it with: tsc && vite build.
I have all the versions of packages EXACTLY the same.

donte.zoom · October 21, 2024, 4:08pm

@PhasedConnect_dev ,

Echoing @chunsiong.zoom , that error is related to React 18. You will want to upgrade the SDK to prevent that notification.

PhasedConnect_dev · October 22, 2024, 6:18am

As I’ve already said in my previous comment on this post, I’m using React 18+ and I upgraded the SDK to the latest version 3.9.0.

I’m using THE SAME versions for packages as in your sample app on GitHub.
Problem is still here.

donte.zoom · October 23, 2024, 2:15am

@PhasedConnect_dev ,

Take a look at our React sample app, it runs without errors:

github.com

zoom/meetingsdk-react-sample/blob/080693fb8e022e5526a25ff36aeeddd7b91d23ce/src/main.tsx#L6


      
          import { StrictMode } from "react";
          import { createRoot } from "react-dom/client";
          import App from "./App";
          import "./index.css";
          
          createRoot(document.getElementById("root")!).render(
            <StrictMode>
              <App />
            </StrictMode>
          );

You can also find a solution to the error you’re facing on Stack Overflow:

PhasedConnect_dev · October 27, 2024, 7:16pm

Already checked everything and done everything exactly like it’s done in the Sample App. And console logs still persist.

The issue and logs that I get are originate from your @zoom/meetingsdk package, and not from my app. So this isn’t fixing anything. It’s related to your @zoom/meetingsdk package.

And please, if that’s okay with you, don’t mark this as a solution, since multiple people have commented on this post claiming that they’ve got the same issue. And linking sample app didn’t help them solve that issue.

Topic		Replies	Views
SDK meeting - React is not defined Meeting SDK	5	420	February 7, 2024
None loading Zoom meeting Web	30	4300	August 1, 2021
Web SDK Version 1.7.6 is now live! New Releases	20	3763	May 5, 2020
Meeting SDK Invalid Sdk Key in React js Meeting SDK	1	242	December 23, 2022
Import { ZoomMtg } from ‘@zoomus/websdk’; causing React app to crash and dev tools failed to load Meeting SDK	1	701	January 6, 2023

Web Meeting SDK 3.5.2 throwing console warnings

Related topics