ZOOM WebSDK/React Clash

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:

  1. You might have mismatching versions of React and the renderer (such as React DOM)
  2. You might be breaking the Rules of Hooks
  3. 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-

Which version?
Zoom WebSDK 1.7.5

Hey @salil,

First time I am seeing this error. Are you including the ZoomMtg.setZoomJSLib() function before the pre init functions?

Thanks,
Tommy

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.

Thanks for the help Tommy and stay safe!

I am also having the same issue with react hooks. Anyone have fix on this? please?

Hey @salil, @klinton,

@michael.harrington (our react expert), will help with this! :slight_smile:

Thanks,
Tommy

Hey @salil, @klinton,

Can you create a simple react app in a GitHub repo that we can clone and see the issue and debug from there?

Thanks,
Tommy

Ok ill give the link today :smiley: . Thank you very much for the reply. :smiley:. 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.

Thanks @klinton! :slight_smile:

-Tommy