Sample App React 2.18.0 crashing

Meeting SDK
1

Format Your New Topic as Follows:

Meeting SDK 2.18.0 Client View

Description
Hello. Very strange problem, 2-3 days ago I tested Meeting SDK on react-sample app, but I was strugling to implement it in my code, yesterday Sample App was working too (same version, same backend), so I was going to ask about my ipmplementation, BUT today, when I tried sample, it’s crashing too.
My story (just in case it can help): Yesterday I was trying to connect sample app and my app to one meeting, sample app connected fine, my app was crashing with same errors as will be below, but from sample app i could see both users connected to meeting.

On first load after launch in window with micro/camera check camera is not available, it’s in the list of devices, but it shows “unknown error”.
image

Error?
First of all, after loading page there are 3 warnings

Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?

Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

After pressing Join meeting crashes and error list is a bit big:
First error is about camera too, it appears only first time, after I reload page it’s just trying to join meeting without preview (probably should work like that, just saying):

Uncaught (in promise)
{
    "type": "VIDEO",
    "evt": "ERROR",
    "errorCode": "NOT_CONNECTED"
}

And after that everything crashes:

Uncaught ReferenceError: React is not defined
    B zoomus-websdk.umd.min.js:2
    node_modules bundle.js:67580
    React 4
    i whiteboard-sdk.js:45
    React 7
    unstable_runWithPriority scheduler.development.js:653
    React 4
    notify zoomus-websdk.umd.min.js:2
    notifyNestedSubs zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    Redux 3
    $t zoomus-websdk.umd.min.js:2
    node_modules bundle.js:46859
    middleware Redux
    Yt zoomus-websdk.umd.min.js:2
    handleOnMessage zoomus-websdk.umd.min.js:2
    node_modules bundle.js:183217
    node_modules bundle.js:183216
    React 3
    i whiteboard-sdk.js:45
    React 3
    unstable_runWithPriority scheduler.development.js:653
    React 4
    unstable_runWithPriority scheduler.development.js:653
    React 4
    notify zoomus-websdk.umd.min.js:2
    notifyNestedSubs zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    Redux 3
    node_modules bundle.js:44003
    promise callback*./node_modules/ bundle.js:43987
    Redux 2
    value zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    node_modules bundle.js:196561
    f zoomus-websdk.umd.min.js:2
    node_modules bundle.js:195962
    node_modules bundle.js:195903
    C zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    promise callback*C zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    node_modules bundle.js:196240
    node_modules bundle.js:196232
    q zoomus-websdk.umd.min.js:2
    node_modules bundle.js:196778
    node_modules bundle.js:196779
    promise callback*A zoomus-websdk.umd.min.js:2
    $ zoomus-websdk.umd.min.js:2
    B zoomus-websdk.umd.min.js:2
    node_modules bundle.js:196923
    setInterval handler*join zoomus-websdk.umd.min.js:2
    success App.js:56
    U zoomus-websdk.umd.min.js:2
    value zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    init zoomus-websdk.umd.min.js:2
    startMeeting App.js:51
    getSignature App.js:41
    promise callback*getSignature App.js:38
    React 23
    js index.js:8
    factory react refresh:6
    Webpack 3
zoomus-websdk.umd.min.js:2
    B zoomus-websdk.umd.min.js:2
    Z zoomus-websdk.umd.min.js:2
    React 4
    i whiteboard-sdk.js:45
    React 7
    unstable_runWithPriority scheduler.development.js:653
    React 4
    notify zoomus-websdk.umd.min.js:2
    notifyNestedSubs zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    Redux 3
    $t zoomus-websdk.umd.min.js:2
    An zoomus-websdk.umd.min.js:2
    middleware Redux
    Yt zoomus-websdk.umd.min.js:2
    handleOnMessage zoomus-websdk.umd.min.js:2
    onmessage zoomus-websdk.umd.min.js:2
    (Асинхронний: EventHandlerNonNull)
    Z zoomus-websdk.umd.min.js:2
    React 3
    i whiteboard-sdk.js:45
    React 3
    unstable_runWithPriority scheduler.development.js:653
    React 4
    unstable_runWithPriority scheduler.development.js:653
    React 4
    notify zoomus-websdk.umd.min.js:2
    notifyNestedSubs zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    Redux 3
    n zoomus-websdk.umd.min.js:2
    (Асинхронний: promise callback)
    n zoomus-websdk.umd.min.js:2
    Redux 2
    value zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    t zoomus-websdk.umd.min.js:2
    f zoomus-websdk.umd.min.js:2
    E zoomus-websdk.umd.min.js:2
    O zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    (Асинхронний: promise callback)
    C zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    E zoomus-websdk.umd.min.js:2
    E zoomus-websdk.umd.min.js:2
    q zoomus-websdk.umd.min.js:2
    A zoomus-websdk.umd.min.js:2
    A zoomus-websdk.umd.min.js:2
    (Асинхронний: promise callback)
    A zoomus-websdk.umd.min.js:2
    $ zoomus-websdk.umd.min.js:2
    B zoomus-websdk.umd.min.js:2
    u zoomus-websdk.umd.min.js:2
    (Асинхронний: setInterval handler)
    join zoomus-websdk.umd.min.js:2
    success App.js:56
    U zoomus-websdk.umd.min.js:2
    value zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    init zoomus-websdk.umd.min.js:2
    startMeeting App.js:51
    getSignature App.js:41
    (Асинхронний: promise callback)
    getSignature App.js:38
    React 19
    forEach self-hosted:4384
    React 4
    js index.js:8
    factory react refresh:6
    Webpack 3

The above error occurred in one of your React components:
    in Unknown (created by Connect(Component))
    in Connect(Component) (created by rn)
    in div (created by rn)
    in div (created by rn)
    in footer (created by rn)
    in rn (created by Connect(rn))
    in Connect(rn)
    in div
    in div
    in Unknown (created by Connect(Component))
    in Connect(Component) (created by u)
    in div (created by u)
    in div (created by u)
    in u (created by i)
    in i
    in Unknown (created by Connect(Component))
    in Connect(Component) (created by d)
    in div (created by d)
    in d (created by Connect(d))
    in Connect(d) (created by a)
    in div (created by a)
    in a (created by Connect(a))
    in Connect(a) (created by s)
    in div (created by s)
    in Unknown (created by s)
    in s

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:19527

Uncaught TypeError: m.AK.connectSocket is not a function
    tn zoomus-websdk.umd.min.js:2
    rn zoomus-websdk.umd.min.js:2
    node_modules bundle.js:46876
    middleware Redux
    Yt zoomus-websdk.umd.min.js:2
    handleOnMessage zoomus-websdk.umd.min.js:2
    node_modules bundle.js:183217
    node_modules bundle.js:183216
    React 3
    i whiteboard-sdk.js:45
    React 3
    unstable_runWithPriority scheduler.development.js:653
    React 4
    unstable_runWithPriority scheduler.development.js:653
    React 4
    notify zoomus-websdk.umd.min.js:2
    notifyNestedSubs zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    Redux 3
    node_modules bundle.js:44003
    promise callback*./node_modules/ bundle.js:43987
    Redux 2
    value zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    node_modules bundle.js:196561
    f zoomus-websdk.umd.min.js:2
    node_modules bundle.js:195962
    node_modules bundle.js:195903
    C zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    promise callback*C zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    node_modules bundle.js:196240
    node_modules bundle.js:196232
    q zoomus-websdk.umd.min.js:2
    node_modules bundle.js:196778
    node_modules bundle.js:196779
    promise callback*A zoomus-websdk.umd.min.js:2
    $ zoomus-websdk.umd.min.js:2
    B zoomus-websdk.umd.min.js:2
    node_modules bundle.js:196923
    setInterval handler*join zoomus-websdk.umd.min.js:2
    success App.js:56
    U zoomus-websdk.umd.min.js:2
    value zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    init zoomus-websdk.umd.min.js:2
    startMeeting App.js:51
    getSignature App.js:41
    promise callback*getSignature App.js:38
    React 23
    js index.js:8
    factory react refresh:6
    Webpack 3
2 zoomus-websdk.umd.min.js:2
    tn zoomus-websdk.umd.min.js:2
    rn zoomus-websdk.umd.min.js:2
    An zoomus-websdk.umd.min.js:2
    middleware Redux
    Yt zoomus-websdk.umd.min.js:2
    handleOnMessage zoomus-websdk.umd.min.js:2
    onmessage zoomus-websdk.umd.min.js:2
    (Асинхронний: EventHandlerNonNull)
    Z zoomus-websdk.umd.min.js:2
    React 3
    i whiteboard-sdk.js:45
    React 3
    unstable_runWithPriority scheduler.development.js:653
    React 4
    unstable_runWithPriority scheduler.development.js:653
    React 4
    notify zoomus-websdk.umd.min.js:2
    notifyNestedSubs zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    Redux 3
    n zoomus-websdk.umd.min.js:2
    (Асинхронний: promise callback)
    n zoomus-websdk.umd.min.js:2
    Redux 2
    value zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    t zoomus-websdk.umd.min.js:2
    f zoomus-websdk.umd.min.js:2
    E zoomus-websdk.umd.min.js:2
    O zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    (Асинхронний: promise callback)
    C zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    E zoomus-websdk.umd.min.js:2
    E zoomus-websdk.umd.min.js:2
    q zoomus-websdk.umd.min.js:2
    A zoomus-websdk.umd.min.js:2
    A zoomus-websdk.umd.min.js:2
    (Асинхронний: promise callback)
    A zoomus-websdk.umd.min.js:2
    $ zoomus-websdk.umd.min.js:2
    B zoomus-websdk.umd.min.js:2
    u zoomus-websdk.umd.min.js:2
    (Асинхронний: setInterval handler)
    join zoomus-websdk.umd.min.js:2
    success App.js:56
    U zoomus-websdk.umd.min.js:2
    value zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    init zoomus-websdk.umd.min.js:2
    startMeeting App.js:51
    getSignature App.js:41
    (Асинхронний: promise callback)
    getSignature App.js:38
    React 19
    forEach self-hosted:4384
    React 4
    js index.js:8
    factory react refresh:6
    Webpack 3

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    in Unknown (created by Connect(Component))
    in Connect(Component) (created by a) react-dom.development.js:88
    React 5
    qt zoomus-websdk.umd.min.js:2
    Lodash 3
    (Асинхронний: EventListener.handleEvent)
    Z zoomus-websdk.umd.min.js:2
    React 6
    unstable_runWithPriority scheduler.development.js:653
    React 4
    unstable_runWithPriority scheduler.development.js:653
    React 4
    notify zoomus-websdk.umd.min.js:2
    notifyNestedSubs zoomus-websdk.umd.min.js:2
    a zoomus-websdk.umd.min.js:2
    Redux 3
    value zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    join zoomus-websdk.umd.min.js:2
    success App.js:56
    U zoomus-websdk.umd.min.js:2
    value zoomus-websdk.umd.min.js:2
    C zoomus-websdk.umd.min.js:2
    init zoomus-websdk.umd.min.js:2
    startMeeting App.js:51
    getSignature App.js:41
    (Асинхронний: promise callback)
    getSignature App.js:38
    React 23
    js index.js:8
    factory react refresh:6
    Webpack 3

That’s only errors, there are 6 more warnings there.

Troubleshooting Routes
Since I had error about camera, thought it could be something about permissions, so I cleared cache, cookies, permissions, gave permission to camera and mic by default.
Also reinstalled node_modules in app.
Also, thought it might be about browser cache, so I installed completely clean browser (Mozilla) that I haven’t used.
And of course, I checked my camera, it’s working in another app.
Strangest thing is app was working two or three days ago, I’m changing only meeting number and password.

How To Reproduce
Steps to reproduce the behavior including:

import React from 'react';

import './App.css';
import { ZoomMtg } from '@zoomus/websdk';

ZoomMtg.setZoomJSLib('https://source.zoom.us/2.18.0/lib', '/av');

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
// loads language files, also passes any error messages to the ui
ZoomMtg.i18n.load('en-US');
ZoomMtg.i18n.reload('en-US');

function App() {
  // var authEndpoint = 'http://localhost:4000';
  var authEndpoint = 'http://localhost:3333/video/generate-signature';

  // var sdkKey = '';
  var meetingNumber = '89664389436';
  var passWord = 'AQWPe7';
  var role = 0;
  var userName = 'Tomat';
  var userEmail = 'hello@gmail.com';
  // var registrantToken = ''
  // var zakToken = ''
  var leaveUrl = 'http://localhost:3000';

  function getSignature(e) {
    e.preventDefault();

    fetch(authEndpoint, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        meetingNumber: meetingNumber,
        role: role,
      }),
    })
      .then(res => res.json())
      .then(response => {
        startMeeting(response.signature);
      })
      .catch(error => {
        console.error(error);
      });
  }

  function startMeeting(signature) {
    document.getElementById('zmmtg-root').style.display = 'block';

    ZoomMtg.init({
      leaveUrl: leaveUrl,
      success: success => {
        console.log(success);

        ZoomMtg.join({
          signature,
          sdkKey: 'key-was-here',
          meetingNumber: meetingNumber,
          passWord: passWord,
          userName: userName,
          userEmail: userEmail,
          success: success => {
            console.log('success', success);
          },
          error: error => {
            console.log(error);
          },
        });
      },
      error: error => {
        console.log(error);
      },
    });
  }

  return (
    <div className="App">
      <main>
        <h1>Zoom Meeting SDK Sample React</h1>

        <button onClick={getSignature}>Join Meeting</button>
      </main>
    </div>
  );
}

export default App;

also, console.log on success init is there and shows

Object { method: "init", status: true, errorCode: 0, errorMessage: null, result: null }
App.js:54
2

Hi @dkononov.zp
Thanks for reaching out to us!
I am happy to help here!
I noticed this behavior too with our sample app found here:
GitHub - zoom/meetingsdk-react-sample: Use the Zoom Meeting SDK in React

It looks like we do not support React 18 with our Web Meeting Sdk 2.18, and we are currently working on this issue.

In the meantime, what I did to fix this was:

  1. Pull these dependencies via CDN
 <!-- React library -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

    <!-- React DOM library -->
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <script src="https://source.zoom.us/2.18.0/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/2.18.0/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/2.18.0/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/2.18.0/lib/vendor/lodash.min.js"></script>

And got rid of my dependencies in the package.json but left these:

    "@zoomus/websdk": "^2.18.0",
    "web-vitals": "^3.5.0",
    "react-scripts": "^5.0.1"

After doing this, I deleted my package.json and node_modules and ran the app again and that solved my issue.
Could you please try something like this and let me know if this helps
Cheers,
Elisa

3

Thank you, @elisa.zoom !
Well, that’s very strange, because today, after two hours of work, integration just started to work (not sample, my react app with integration). I’ve chagned nothing, so probably it was something about preloaded scripts here (?)

ZoomMtg.setZoomJSLib('https://source.zoom.us/2.18.0/lib', '/av');

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();

in other case, I have no ideas how’s that possible.
Another argument in that way, is that sample app was working 2 days ago, 2.18.0 with react 18.2.0, I showed it to my colleague, so it was not hallucinations, and I changed nothing in it.

Anyway, I hope someone who’s working on issue would not break it again, please :sweat_smile:

But I’m still facing error with camera. On meeting preload microphone is turning on automatically, but video isn’t and I’m receiving an error

image
image547×787 121 KB

Also, on first load app is asking permission for audio, but not for video.
But when I connected to meeting, I can turn camera on and it’s working.
Maybe you have some ideas about it?

Other logs after join, just in case:

image
image538×836 71.1 KB

4

Thanks @dkononov.zp
We are currently looking into this and working on a resolution
This last issue you are facing, can you replicate with the sample app?
Have not seen this before