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

Meeting SDK Web
17

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:

amplify_1
amplify_11682×526 55.6 KB

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

amplify 2
amplify 21677×675 58.6 KB

Here are some threads talking about it:

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!

2 Likes