Web Meeting SDK 3.5.2 throwing console warnings

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

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

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

This is version 3.5.2.

1 Like

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".

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.

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?

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.

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

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?

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”,

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.

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

@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

But my project is using React 18.2.0.

I don’t understand?

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

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

@PhasedConnect_dev ,

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

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.

@PhasedConnect_dev ,

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

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

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.