Description
I’m trying to integrate the Zoom Web SDK into my existing React app and the moment I call the ZoomMtg pre-init functions (preLoadWasm and prepareJssdk), I get an error. I’m guessing this has to do with the WebSDK needing a different version of React. We are using 16.10.2 in the project. I would think that npm should not have installed React inside the Zoom WebSDK npm given the root project already depends on React but maybe the version requirements are different? Any help would be appreciated.
Error
Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
at invariant (webpack-internal:///./node_modules/@zoomus/websdk/node_modules/react/cjs/react.development.js:88:15)
at resolveDispatcher (webpack-internal:///./node_modules/@zoomus/websdk/node_modules/react/cjs/react.development.js:1436:28)
at useMemo (webpack-
So I’ve definitely done that but I’m still seeing the error. Is there a reason why react and its ilk are declared as dependencies in addition to peerDependencies in Zoom WebSDK’s package.json? I’m far from a Node expert but my understanding is that since the Zoom WebSDK functions as a “plugin” (in npm parlance) that its dependencies should only be listed as peerDependencies to avoid library version clashes.
Also, as to your original point about the setZoomJSLib call, for local development, I’ve got a static http server running to serve up the requisite files. However, this approach seems to run contrary to how node+webpack would prefer things to be done. I’d love for the dependencies to be included at build time rather than included at runtime. What’s the preferred way of making that happen? I’m guessing it has to do with the line “The following directory (already in node_modules) must be accessible in your url path” but I’m not sure I follow what that means.
Ok ill give the link today . Thank you very much for the reply. . I’m currently on Laravel vue project on this one, installed react and react-dom also. However I’m having that error with black screen.
I had the same problem as @salil
I solved it using the same version of react that @zoomus/websdk uses.
In my case. @zoomus/websdk version 1.9.0 which uses react 16.8.6.
Is the expectation here to change the React version of the application invoking Zoom sdk to what Zoom uses? Is there a more plausible solution? Could some aliasing solution be done within the library?
Thank you for reaching out to the Zoom Developer Forum. For the most part, you’ll want to align the versions of react used by your project and the Zoom SDK to avoid any conflicts.
If you would like to see this dependency removed or aliased, I recommend posting in the #feature-requests category.
. Thank you very much for the reply.