zoomsdk react and node integration always ends up with an error

Question

I have been trying to integrate zoomsdk in my react app and also followed every step metioned here. Backend part is working fine and I am getting back the signature response. But when I try to run the frontend part, it throws this error:

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:140:10)
at module.exports (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/react-scripts/scripts/start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:140:10)
    at module.exports (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:417:16)
    at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:452:10
    at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/webpack/lib/NormalModule.js:323:13
    at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /Users/vickpro/React projects/expert-buddy-demo/Frontend/node_modules/babel-loader/lib/index.js:59:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

The methods I have tried,

updating the current project webpack(v4.44.2) to latest one which is v5.75.0.
Tried updating my node js version to latest.

Neither of them worked in my case, I am still getting the same error.

Here is my app.js file code:

    import React from "react";

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

ZoomMtg.setZoomJSLib("https://source.zoom.us/2.9.7/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() {
  // setup your signature endpoint here: https://github.com/zoom/meetingsdk-sample-signature-node.js
  var signatureEndpoint = "http://localhost:4000";
  // This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
  var sdkKey = "nMYXtjORjReaes6NpngNPakcKP3CiFdIfN7D";
  var meetingNumber = "85433353829";
  var role = 0;
  var leaveUrl = "http://localhost:3000";
  var userName = "React";
  var userEmail = "vickbishnoi@gmail.com";
  var passWord = "000000";
  // pass in the registrant's token if your meeting or webinar requires registration. More info here:
  // Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/meetings#join-registered
  // Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/webinars#join-registered
  var registrantToken = "";

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

    fetch(signatureEndpoint, {
      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: signature,
          meetingNumber: meetingNumber,
          userName: userName,
          sdkKey: sdkKey,
          userEmail: userEmail,
          passWord: passWord,
          tk: registrantToken,
          success: (success) => {
            console.log(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;

On the screen, I get this error:

It has been 3-4 days since I have trying different approaches to integrate zoom in my react app but none of them are working.

It is very important to me as it is part of an assignment given to me by one of the companies I interviewed in. In this part, I am required to build a screen where there is a create meeting button which should be able to create a zoom meeting and after that, we should be able to share the meeting link to other people and when any individual clicks on the link, they should first be brought to that page and then there should be a join meeting button which takes them to the meeting. After the meeting ends, we should be able to take the meeting attendees to a feedback screen where they should be able to share their experience.

If I am able to pull this thing off, they are going to offer me a position and being a self taught developer without a cs degree, it really is a golden opportunity for me, so any help from you guys would be incredibly helpful for me.

score 0 · Answer 1 · answered Mar 16 '23 at 09:22

0

Which version of node are you using? I've got the same issue when I tried with node v18, and downgraded to v16 worked actually.

I hope this helps you!

answered Mar 16 '23 at 09:22

Koki Hayashi

9
1

I am also using v18. I'll try to downgrade and see if it works. – Vikas Jyani Mar 16 '23 at 16:59

score 0 · Answer 2 · answered Jul 24 '23 at 03:38

I fixed this issue with Zooms meetingSDK by upgrading my version of react-scripts to 5+, i.e:

npm install --save --save-exact react-scripts@5.0.0

Try run it again, if you still have issues clear your cache:

npm cache clean --force

then reinstall dependencies with npm install.

zoomsdk react and node integration always ends up with an error

2 Answers2