Zoomus-jssdk for React 16

Hi @trainmoo,

Please accept my apologies for the delayed response.

Can you please let us know why you would not be able to use React version 15 in your app?

Thanks,
Ojus

I have the same problem.
Our application was built on react.js v16, and we enjoyed the new features from v16 such as react hooks.
Therefore, it seems there is no reason to downgrade react version.
Does Zoom web SDK have the plan to support react v16?

Hi magus52941,
Thanks for using Zoom SDK. We understand the benefits of supporting React 16 and I will take it as a feature request and pass it to our engineers. We will investigate and look into this. Please follow our Github repo for any updates.

Thanks!

1 Like

I have the same problem with React 16

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)

Duplicate post:

I was faced the same problem. I have applied same as @nezto suggest. my project in angular so i have create my own custom-webpack.config.js and applied the code in side other code

minimizer: [
new UglifyJsPlugin({
uglifyOptions: { keep_fnames: true }
})

Now I am facing other problems due to custom-webpack.config.js

My custom-webpack.config.js is below

const { resolve } = require('path');
const rxPaths = require('rxjs/_esm5/path-mapping');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const { CleanCssWebpackPlugin } = require('@angular-devkit/build-angular/src/angular-cli-files/plugins/cleancss-webpack-plugin');
const { HashedModuleIdsPlugin } = require('webpack');

module.exports = {

  mode: 'production',

  entry: {
    main: './src/main.ts',
    polyfills: './src/polyfills.ts',
    styles: './src/styles.css'
  },

  output: {
    path: resolve('./dist'),
    filename: '[name].js',
  },

  resolve: {
    extensions: ['.ts', '.js'],
    alias: rxPaths()
  },

  node: false,

  performance: {
    hints: false,
  },

  optimization: {
    noEmitOnErrors: true,
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        default: {
          chunks: 'async',
          minChunks: 2,
          priority: 10
        },
        common: {
          name: 'common',
          chunks: 'async',
          minChunks: 2,
          enforce: true,
          priority: 5
        },
        vendors: false,
        vendor: false
      }
    },
    minimizer: [
      new HashedModuleIdsPlugin(),
      new UglifyJSPlugin({
        cache: true,
        parallel: true,
        uglifyOptions: {
          keep_fnames: true,
          safari10: true,
          output: {
            ascii_only: true,
            comments: false,
            webkit: true,
          },
          compress: {
            pure_getters: true,
            passes: 3,
            inline: 3,
          }
        }
      }),
      new CleanCssWebpackPlugin({
        test: (file) => /\.(?:css)$/.test(file),
      })
    ]
  }
};

Is their any simple solution in your side (I mean to zoom developer).

My product need to launch by December so please help me to solve this issue.

Hey @mahabub, thanks for posting and using Zoom!

What errors or specific problem are you experiencing?

Thanks,
Tommy

Can you please share how to integrate zoomsdk inside react component and how to modify webpack script ?

Hey @digivalsolutions,

Please see the duplicate thread:

Thanks,
Tommy

Thanks Tommy.
I will check it.
Meanwhile it will be helpful if you share sample github react repo like you did for angular?

Hey @digivalsolutions,

Happy to help!

We will work on creating a React sample app.

Thanks,
Tommy

Hey Tommy,
Eagerly awaiting for your react sample app.
Thanks

Hey @digivalsolutions,

Here is an example of using the Web SDK in React:

Due note that the signature is being developer on the backend in this example.

Thanks,
Tommy

Hey @tommy,

 Signature expired error occuring when run in localhost:

{ method: “join”
status: false
errorCode: 1
errorMessage: “The signature has expired.”
result: null
}

pls help

Hey @digivalsolutions,

Please share the code you are using to generate the signature.

Thanks,
Tommy

Hello

I got the error when pushing on production in angular zoomus-websdk.umd.min.js.pre-build-optimizer.js:2 Uncaught TypeError: Super expression must either be null or a function, not undefined

but it is working in dev

Hey @carloskekwa, thanks for posting and using Zoom!

Can you please checkout our Angular Web SDK sample app:

Thanks,
Tommy

The way it is integrated here resolved the issue!
replace this:

import { ZoomMtg } from ‘@zoomus/websdk’;
ZoomMtg.setZoomJSLib(‘https://source.zoom.us/1.7.2/lib’, ‘/av’);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

by this:

declare var ZoomMtg;

ZoomMtg.setZoomJSLib(‘https://source.zoom.us/1.7.2/lib’, ‘/av’);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

Happy to hear your issue was resolved! :slight_smile:

-Tommy