React 16 error on after build

I have a create-react-app, in development it’s working fine, but on production trigger this error

backend.js:1 TypeError: Super expression must either be null or a function, not undefined
at zoomus-jssdk.umd.min.js:38208
at zoomus-jssdk.umd.min.js:38207
at Object.e.exports (zoomus-jssdk.umd.min.js:38193)
at t (zoomus-jssdk.umd.min.js:38146)
at e.exports (zoomus-jssdk.umd.min.js:38150)
at Object.e.exports (zoomus-jssdk.umd.min.js:38138)
at n (zoomus-jssdk.umd.min.js:15)
at Object.e.exports (zoomus-jssdk.umd.min.js:10826)
at n (zoomus-jssdk.umd.min.js:15)
at Object.e.exports (zoomus-jssdk.umd.min.js:34240)

Hey @nezto,

Can you post your code here so we can debug?

Thanks,
Tommy

Hi, this is my code:

import React from "react";
import { connect } from "react-redux";
import { ZoomMtg } from "zoomus-jssdk";
import Cliente from "../../api/cliente";
import token from "../../helpers/token";

const API_KEY = "";

const meetConfig = {
  apiKey: API_KEY,
  meetingNumber:,
  userName: "",
  passWord: "",
  leaveUrl: window.origin,
  role: 0
};

class Page extends React.Component {
  componentDidMount() {
    window.$.i18n.reload("es-ES");

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

    Cliente.setBearerToken(token())
      .getCliente()
      .post("zoom/signature", {
        meetConfig
      })
      .then(res => {
        ZoomMtg.init({
          debug: false,
          leaveUrl: window.origin,
          screenShare: false,
          disableInvite: true,
          disableCallOut: true,
          showPureSharingContent: false,
          success() {
            ZoomMtg.join({
              meetingNumber: meetConfig.meetingNumber,
              userName: meetConfig.userName,
              signature: res.data.signature,
              apiKey: meetConfig.apiKey,
              //     userEmail: "email@gmail.com",
              passWord: meetConfig.passWord,
              success() {
                console.log("join meeting success");
              },
              error(res) {
                console.log(res);
              }
            });
          },
          error(res) {}
        });
      })
      .catch(err => {});
  }

  componentWillUnmount() {
    ZoomMtg.leaveMeeting({});
  }

  render() {
    return <>Zoom</>;
  }
}

const mapStateToProps = state => {
  return {
    user: state.userInfo,
    cc_user: state.cc_user,
    cc_chat: state.cc_chat,
    cc_message: state.cc_message,
    cc_call: state.cc_call
  };
};

export default connect(mapStateToProps)(Page);

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 :muscle:
})
]
};

Thanks

1 Like

Hey @nezto,

Thanks for posting your solution! I am glad you figured it out!

-Tommy

2 Likes

Two confusing bits to this

  1. newer create-react-app webpack configs might be using TerserPlugin instead of UglifyJsPlugin
  2. using keep_fnames: true (which also applies to TerserPlugin) might not be enough to prevent mangling zoom sdk’s code. In my case I had to remove TerserPlugin alltogether and will need to look for an alternative or look into config options more deeply.

Hey @vincent.engelmann1, thanks for posting and using Zoom!

Were you able to resolve the issue? :slight_smile:

Thanks,
Tommy