AWS Amplify: "Cannot read property 'error' of undefined" when React application is deployed

[mau.hdz.da (Mauricio)]

Description
The application works fine on local host, however it crashes on production. It seems as if the zoom websdk is not being minified properly. A very similar issue is discussed in React 16 error on after build - #8 by vincent.engelmann1

On that post they give the solution of creating a config-overrides.js file to change the way it is minified by Uglyfy plugin.

React 16 error on after build

Hi bro, I solved this problem with a configuration in config-overrides.js config.optimization = { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { keep_fnames: true } //this line is }) ] }; Thanks

However another user says that React may be using Terser plugin.

Is it official that only React 15 is supported by zoom-web-sdk? I am currently using React 17.0.1 and deploying on AWS Amplify Console.

I would like some guidance on how to proceed with this. I believe it is an important topic as many React developers might experience this.

Thanks!

Errors

zoomus-websdk.umd.min.js:2 Uncaught TypeError: Cannot read property ‘error’ of undefined
at B (zoomus-websdk.umd.min.js:2)
at Object.generateSignature (zoomus-websdk.umd.min.js:2)
at Zoom.jsx:44
at Ns (react-dom.production.min.js:262)
at t.unstable_runWithPriority (scheduler.production.min.js:18)
at Wo (react-dom.production.min.js:122)
at Rs (react-dom.production.min.js:261)
at react-dom.production.min.js:261
at L (scheduler.production.min.js:16)
at MessagePort.w.port1.onmessage (scheduler.production.min.js:12)

react-dom.production.min.js:216 TypeError: Cannot read property ‘error’ of undefined
at B (zoomus-websdk.umd.min.js:2)
at Object.generateSignature (zoomus-websdk.umd.min.js:2)
at Zoom.jsx:44
at Ns (react-dom.production.min.js:262)
at t.unstable_runWithPriority (scheduler.production.min.js:18)
at Wo (react-dom.production.min.js:122)
at Rs (react-dom.production.min.js:261)
at react-dom.production.min.js:261
at L (scheduler.production.min.js:16)
at MessagePort.w.port1.onmessage (scheduler.production.min.js:12)

---

Which version?
“@zoomus/websdk”: “^1.8.3”
“react”: “^17.0.1”,

To Reproduce(If applicable)
Steps to reproduce the behavior:

1. Create react app npx create-react-app zoom-app
2. Follow the instructions to create your zoom/websdk application
3. Make sure everything works fine on localhost
4. Deploy into production (I´m using AWS Amplify)
5. Run the application

Device (please complete the following information):

• Device: PC
• OS: Windows 10
• Version: 2004 OS build 19041.630
• Browser: Chrome

[MaxM]

Hey @mau.hdz.da,

Thank you for reaching out to Zoom Developer Support. Are you able to share a public Git repo where this issue can be reproduced? That will help us to troubleshoot the issue. I would also confirm that in production the requisite library files are being loaded in the same way they are when running the application locally.

Thanks,
Max

[mau.hdz.da (Mauricio)]

Hi, thanks for your reply.
Here is the public repo

mauhdz/alcon-web

Use dev branch to do the build. I am using AWS Amplify for deployment
Here is the deployed app https://www.alconvirtual.com/auditorium
Thanks heaps!

[mau.hdz.da (Mauricio)]

I have tried to import the zoom web sdk through CDN, but also with no success. I think the documentation https://marketplace.zoom.us/docs/sdk/native-sdks/web/build#integrate
is very vague in how to import the dependencies.

Also by using the npm @zoomus/websdk there is a really important step which is omitted on the docs. On https://www.npmjs.com/package/@zoomus/websdk#usage it says:

“NOTE: The following files (already in node_modules) must be globally accessible (equivalent of link and script tag in index.html)”

• node_modules/@zoomus/websdk/dist/css/bootstrap.css
• node_modules/@zoomus/websdk/dist/css/react-select.css
• node_modules/jquery/dist/jquery.min.js

This is a confusing and primordial step, without it the app never runs. To solve it people need to import the libraries on index.html using the CDN

<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.8.3/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="https://source.zoom.us/1.8.3/css/react-select.css" />
<script src="https://source.zoom.us/1.8.3/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.8.3/lib/vendor/lodash.min.js"></script>

---

The next problem that people will face is that their screen will be black because of #zmmtg-root element which needs to have a hide CSS style.

---

I believe that if you clarify those issues on the main docs people wouldn´t have a hard time integrating zoom. I’ve seen most people struggling with these issues.

Please let us know what is the best practice to import the zoom web sdk, as currenlty the app crashes.

Thanks!

[mau.hdz.da (Mauricio)]

Hi,
Are there any updates?
Thank you!

[tommy (Tommy Gaessler)]

Hey @mau.hdz.da,

Thanks for your feedback regarding using the Web SDK in a React app.

Regarding the error you are experiencing, I would make sure that in your production environment on AWS that all the required Web SDK files are present and accessible.

Happy to jump on a Zoom meeting to help resolve.

-Tommy

[mau.hdz.da (Mauricio)]

That would be great!

Can we do it ASAP?

Thank you!

[mau.hdz.da (Mauricio)]

Can we schedule the meeting? Please let me know, thanks

[tommy (Tommy Gaessler)]

Hey @mau.hdz.da,

I will private message you to schedule a meeting. CC @MaxM

-Tommy

[mau.hdz.da (Mauricio)]

Hi guys, here are some updates…

Importing through NPM and copying @zoomwebsdk under the public folder:

---

When the sdk loads I get the following two new errors:

Uncaught SyntaxError: Unexpected token ‘<’ [/zoomsdk/@zoomus/websdk/dist/lib/av/5793_js_media.min.js:1]

*Uncaught SyntaxError: Unexpected token ‘<’ *
[/zoomsdk/@zoomus/websdk/dist/lib/webim.min.js:1]

Then when actually launching the meeting I keep getting the same known two errors:

*TypeError: Cannot read property ‘error’ of undefined

I also tried changing the way the zoom web sdk gets minified using both UglifyJS and Terser with no success.

Importing through CDN :

---

The sdk seems to load successfully, however when trying to launch the meeting the same two known errors occur.

Note that in order to have access to ZoomMtg object I had to access it as window.ZoomMtg, otherwise React app wouldn´t build.

---

Conclusion:

Both ways of importing the SDK bring the same errors.
It looks like for some reason the production build is not liking the minified version of zoomwebsdk, maybe loading another zoom web sdk version or a none minified one could make the trick, but anyway it is very strange.

Looking forward to debug this and get a working React sample app. Would be great if we can have another meeting early next week. Please let me know.

Thanks heaps!

[tommy (Tommy Gaessler)]

Hey @mau.hdz.da,

Appreciate you sharing an update and sorry to hear you are still having trouble. We will be building a Web SDK React sample app this week, and will share it with you.

Thanks,
Tommy

[mau.hdz.da (Mauricio)]

Hi @tommy

Thanks for your reply!

Yep a sample app will be great! Anyway if you find a fix earlier please let me know as I am in kind of a hurry to make it work.

Have a great day, cheers!

[nitin1 (Nitin)]

A recommended sample app will be good for me as well @tommy

[MaxM]

Hey @nitin1 and @mau.hdz.da,

Thank you for the feedback. @tommy has done a great job writing up the sample application and we are currently working to verify it follows best practices before making it public. Once we have it finished, we’ll be sure to send it your way.

Thanks,
Max

[mau.hdz.da (Mauricio)]

Hi guys,

I finally found my error.

Basically my AWS Amplify build didn’t have access to my .env file where the Zoom API KEYS are stored.

Here is how to configure them.

On the React app:

const API_KEYS = {
  apiKey: process.env.REACT_APP_ZOOM_API_KEY,
  apiSecret: process.env.REACT_APP_ZOOM_API_SECRET_KEY,
};

Then use them as usual to generate signature, etc.

On AWS Amplify Console:

Configure the environment variables:

Environment variables - AWS Amplify

Then you need to configure your build settings by editing your amplify.yml with the following code.

backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
        - npm run build
        - REACT_APP_ZOOM_API_KEY=$REACT_APP_ZOOM_API_KEY
        - REACT_APP_ZOOM_API_SECRET_KEY=$REACT_APP_ZOOM_API_SECRET_KEY

Here are some threads talking about it:

r/aws - How do you access Amplify environment variables from a React app?

Creating process.env variables using AWS Amplify?

How to add environment variables to AWS amplify?

That should do the trick!

FYI finally I imported the zoom web sdk through CDN, probably the easiest way to do this atm. @tommy should soon publish a React sample app showing how to do this. Note that on the CDN I had to access the *ZoomMtg* object as follows:

window.ZoomMtg.setZoomJSLib("https://source.zoom.us/1.8.3/lib", "/av");
window.ZoomMtg.preLoadWasm();
window.ZoomMtg.prepareJssdk();

Good luck everyone!

[mau.hdz.da (Mauricio)]

BTW I cannot find how to modify the title of this thread or adding more labels to it it should include AWS Amplify keywords as it is actually an AWS Amplify issue, cheers!

[MaxM]

Hey @mau.hdz.da,

I’m so glad to hear that you resolved your issues! I went ahead and updated the title so that it reflects the issue. If you encounter any further issues or questions, please don’t hesitate to reach out.

Thanks,
Max