Getting TypeError while integrating @zoomus/websdk in production

Description
I’m trying to integrate zoom in my create-react-app project. I’m using @zoomus/websdk. When I run my project on localhost, no error comes but the same code produces TypeError in production.

Error
80.d4a113db.chunk.js:1 Uncaught (in promise) TypeError: Super expression must either be null or a function, not undefined
at 80.d4a113db.chunk.js:1
at 80.d4a113db.chunk.js:1
at Object.e.exports (80.d4a113db.chunk.js:1)
at t (80.d4a113db.chunk.js:1)
at e.exports (80.d4a113db.chunk.js:1)
at Object.e.exports (80.d4a113db.chunk.js:1)
at n (80.d4a113db.chunk.js:1)
at Object.e.exports (80.d4a113db.chunk.js:1)
at n (80.d4a113db.chunk.js:1)
at Object.e.exports (80.d4a113db.chunk.js:1)

Error Screenshot

My Code
import {ZoomMtg} from ‘@zoomus/websdk’;
export function signature(meetConfig){
ZoomMtg.setZoomJSLib(‘node_modules/@zoomus/websdk/dist/lib’, ‘/av’);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

let signature = ''
axios.post('http://localhost:8000/generate_signature/', {
    meetConfig
  })
  .then(result => {
    signature = result.data.text;
    if (result.data.text != ''){
      ZoomMtg.init({
        leaveUrl: meetConfig.leaveUrl,
        isSupportAV: true,
        success: function() {
          ZoomMtg.join({
            signature: signature,
            apiKey: 'xxx-xxx-xxx',
            meetingNumber: meetConfig.meetingNumber,
            userName: meetConfig.userName,
            userEmail: meetConfig.userEmail,
            success() {
              console.log("Success!!")
            },
            error(res) {
              console.log(res, 'in')
            }
          })
        },
        error(res) {
          console.log(res, 'out')
        }
      })
    }
})

}

Which Version?
@zoomus/websdk”: “^1.7.2”,
“react”: “^16.6.3”,
“react-dom”: “^16.6.3”,
“redux”: “^4.0.1”,
“redux-thunk”: “^2.3.0”,

Additional Context
If anyone is having any suggestion, please let me know.

Hey @abhishekkr1993, thanks for posting and using Zoom!

Can you see if this stack overflow helps as I think this could be an issue with a react version?

Here are also related posts with solutions:

https://devforum.zoom.us/search?q=Super%20expression%20must%20either%20be%20null

Thanks,
Tommy

Hey @tommy, thanks for the response. I was able to resolve my issue with the help of the above solutions.

Thanks,
Abhishek

1 Like

Great! Happy to hear you got it working! :slight_smile:

Thanks,
Tommy

@abhishekkr1993 can you please share your solution?

Hi @andrej, I installed jquery and lodash via npm. It was not installed in my project. I got the idea of installing cloning zoom sample app. I hope this helps.

Thanks for sharing @abhishekkr1993!

Yes @andrej, please let us know if that helps.

Thanks,
Tommy

I have both installed and still have an issue.

My packages from package.json

"dependencies": {
    "@agm/core": "1.0.0-beta.7",
    "@angular/animations": "8.1.2",
    "@angular/cdk": "8.1.1",
    "@angular/common": "8.1.2",
    "@angular/compiler": "8.1.2",
    "@angular/core": "8.1.2",
    "@angular/flex-layout": "8.0.0-beta.26",
    "@angular/forms": "8.1.2",
    "@angular/material": "8.1.1",
    "@angular/material-moment-adapter": "8.1.1",
    "@angular/platform-browser": "8.1.2",
    "@angular/platform-browser-dynamic": "8.1.2",
    "@angular/router": "8.1.2",
    "@fullcalendar/angular": "4.3.1",
    "@fullcalendar/core": "4.3.1",
    "@fullcalendar/daygrid": "4.3.0",
    "@fullcalendar/interaction": "4.3.0",
    "@fullcalendar/timegrid": "4.3.0",
    "@ngx-translate/core": "11.0.1",
    "@ngx-translate/http-loader": "4.0.0",
    "@ngxs/devtools-plugin": "3.4.1",
    "@ngxs/logger-plugin": "3.4.1",
    "@ngxs/router-plugin": "3.4.1",
    "@ngxs/store": "3.4.1",
    "@swimlane/dragula": "3.8.0",
    "@swimlane/ngx-charts": "12.0.1",
    "@swimlane/ngx-datatable": "15.0.2",
    "@swimlane/ngx-dnd": "8.0.0",
    "@tinymce/tinymce-angular": "2.5.0",
    "@types/auth0-js": "8.11.11",
    "@types/dragula": "2.1.34",
    "@types/prismjs": "1.16.0",
    "@zoomus/websdk": "1.7.5",
    "acorn": "6.1.1",
    "ajv": "6.10.0",
    "angular-in-memory-web-api": "0.8.0",
    "auth0-js": "9.11.3",
    "chai": "3.5.0",
    "chai-as-promised": "6.0.0",
    "chai-url": "1.0.4",
    "chart.js": "2.8.0",
    "classlist.js": "1.1.20150312",
    "cleave.js": "1.5.0",
    "core-js": "3.1.3",
    "cucumber": "4.2.1",
    "cucumber-pretty": "0.0.5",
    "d3": "5.9.7",
    "eslint": "3.19.0",
    "hammerjs": "2.0.8",
    "jquery": "3.4.1",
    "lodash": "4.17.15",
    "mat-video": "2.6.0",
    "messageformat": "2.1.0",
    "moment": "2.24.0",
    "ng2-charts": "2.3.0",
    "ngx-cleave-directive": "1.0.6",
    "ngx-color-picker": "6.8.0",
    "ngx-cookie-service": "1.0.10",
    "ngx-daterangepicker-material": "2.1.3",
    "ngx-device-detector": "1.3.20",
    "ngx-file-drop": "5.0.6",
    "ngx-translate-messageformat-compiler": "4.4.0",
    "node-testing-server": "1.2.3",
    "paho-mqtt": "1.1.0",
    "perfect-scrollbar": "1.4.0",
    "prismjs": "1.16.0",
    "protractor-cucumber-framework": "4.2.0",
    "pspdfkit": "https://customers.pspdfkit.com/npm/BqNN8jgT6es4ehC8gDYuWiqqPoGPbM/2019.5.3.tar.gz",
    "rxjs": "6.2.2",
    "rxjs-compat": "6.2.2",
    "smoothscroll-polyfill": "0.4.4",
    "talkjs": "0.14.1",
    "tinymce": "4.9.3",
    "tus-js-client": "1.8.0",
    "web-animations-js": "2.3.2",
    "webdriver-manager": "12.1.1",
    "zone.js": "0.9.1"
},
"devDependencies": {
    "@angular-devkit/build-angular": "0.803.8",
    "@angular-devkit/build-ng-packagr": "0.801.2",
    "@angular/cli": "8.1.2",
    "@angular/compiler-cli": "8.1.2",
    "@angular/language-service": "8.1.2",
    "@angularclass/hmr": "2.1.3",
    "@types/jasmine": "3.3.14",
    "@types/jasminewd2": "2.0.6",
    "@types/lodash": "4.14.136",
    "@types/node": "8.9.5",
    "codelyzer": "5.1.0",
    "cz-conventional-changelog": "3.1.0",
    "jasmine-core": "3.4.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.4.1",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "2.0.5",
    "karma-jasmine": "2.0.1",
    "karma-jasmine-html-reporter": "1.4.2",
    "ng-packagr": "4.7.1",
    "npm-install-peers": "1.2.1",
    "prettier": "1.16.4",
    "protractor": "5.4.2",
    "protractor-cucumber-steps": "1.3.2",
    "rxjs-tslint": "0.1.7",
    "ts-node": "7.0.1",
    "tsickle": "0.37.1",
    "tslib": "1.10.0",
    "tslint": "5.15.0",
    "tslint-config-prettier": "1.18.0",
    "typescript": "3.4.5",
    "webpack": "4.39.2",
    "webpack-bundle-analyzer": "3.3.2"
}

And here is my implementation:

ZoomMtg.setZoomJSLib(`https://source.zoom.us/1.7.5/lib`, '/av');
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

ngOnInit(): void {
    this.meetConfig = {
        apiKey: this.API_KEY,
        apiSecret: this.API_SECRET,
        meetingNumber: parseInt(this.meeting.zoomId),
        userName: this.profile.fullName,
        passWord: this.meeting.password || '',
        leaveUrl: window.document.location.href,
        role: 0
    };

    this.signature = ZoomMtg.generateSignature({
        meetingNumber: this.meetConfig.meetingNumber,
        apiKey: this.meetConfig.apiKey,
        apiSecret: this.meetConfig.apiSecret,
        role: this.meetConfig.role,
        success(res) {}
    });

    ZoomMtg.init({
        leaveUrl: this.meetConfig.leaveUrl,
        success: success => {
            ZoomMtg.join({
                signature: this.signature,
                meetingNumber: this.meetConfig.meetingNumber,
                userName: this.meetConfig.userName,
                apiKey: this.meetConfig.apiKey,
                userEmail: this.profile.email,
                passWord: this.meetConfig.passWord,
                success: success => {
                    console.log('join meeting success');
                },
                error: error => {
                    console.log(error);
                }
            });
        },
        error: error => {
            console.log(error);
        }
    });
}

I load jquery in my index.html file like this:
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

Hey @andrej,

Can you see our Angular Sample App which works in a production env?

Thanks,
Tommy