Getting Uncaught TypeError: Cannot redefine property: uniquelize while integrating meeting SDK with existing react app

Description
I am working integrating zoom meeting web SDK with existing react app which uses webpack.

Browser Console Error
Getting Uncaught TypeError: Cannot redefine property: uniquelize

Uncaught TypeError: Cannot redefine property: uniquelize
    at Function.defineProperty (<anonymous>)
    at Object.eval (webpack:///./node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js?:2:1006735)
    at n (webpack:///./node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js?:2:791)
    at Object.eval (webpack:///./node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js?:2:4084743)
    at n (webpack:///./node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js?:2:791)
    at Module.eval (webpack:///./node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js?:2:4188709)
    at n (webpack:///./node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js?:2:791)
    at Object.eval (webpack:///./node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js?:2:4090694)
    at n (webpack:///./node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js?:2:791)
    at eval (webpack:///./node_modules/@zoomus/websdk/dist/zoomus-websdk.umd.min.js?:2:1592)

Which Web Meeting SDK version?
2.3.0

Meeting SDK Code Snippets
Package.json

{
  "name": "customer-service-web-client",
  "version": "0.1.0",
  "description": "",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "jest --watchAll",
    "testWithResults": "jest --json --outputFile=./testResults.json",
    "start": "webpack-dev-server --mode development --env.BABEL_ENV --env.NODE_ENV --port 9000",
    "build": "webpack --env.BABEL_ENV=development --env.NODE_ENV=development --mode production",
    "eslint": "eslint src/**/*js*"
  },
  "author": "",
  "devDependencies": {
    "@babel/core": "7.7.2",
    "babel-loader": "8.0.5",
    "babel-preset-react-app": "9.1.0",
    "babel-jest": "24.9.0",
    "css-loader": "1.0.0",
    "enzyme": "3.10.0",
    "enzyme-adapter-react-16": "1.15.1",
    "eslint": "6.7.2",
    "eslint-config-airbnb": "17.1.0",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.1",
    "eslint-plugin-react": "7.17.0",
    "eslint-plugin-react-hooks": "2.3.0",
    "html-webpack-plugin": "3.2.0",
    "jest": "24.9.0",
    "jest-sonar-reporter": "2.0.0",
    "style-loader": "0.21.0",
    "webpack": "4.29.6",
    "webpack-cli": "3.0.8",
    "webpack-dev-server": "3.1.4"
  },
  "dependencies": {
    "@zoomus/websdk": "^2.3.0",
    "axios": "0.18.1",
    "react": "16.12.0",
    "react-app-polyfill": "1.0.5",
    "react-dom": "16.12.0"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all",
      "ie 11"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version",
      "ie 11"
    ]
  },
  "jest": {
    "testPathIgnorePatterns": [
      "<rootDir>/scripts"
    ],
    "collectCoverage": true,
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!**/node_modules/**"
    ],
    "coverageDirectory": "./coverage/",
    "coveragePathIgnorePatterns": [
      "./coverage",
      "./dist/",
      "./node_modules",
      "./scripts"
    ],
    "coverageReporters": [
      "json",
      "lcov",
      "text"
    ],
    "testResultsProcessor": "jest-sonar-reporter",
    "setupFilesAfterEnv": [
      "./setupTests.js"
    ]
  },
  "babel": {
    "presets": [
      "react-app"
    ]
  }
}

webpack.config.js

process.env.BABEL_ENV = 'development';
process.env.NODE_ENV = 'development';

const HtmlWebPackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const { resolve } = require('path');

module.exports = webpackEnv => ({
    entry: {
        root: './src/index',
        app: './src/App'
    },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name]/[id].js',
        path: resolve(__dirname, 'dist')
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    performance: {
        maxEntrypointSize: 400000,
        maxAssetSize: 400000
    },
    resolve: {
        extensions: ['.js', '.json', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            'babel-preset-react-app'
                        ]
                    }
                }
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName: '[name]_[local]_[hash:base64]',
                            sourceMap: true,
                            minimize: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: './src/index.html',
            filename: './index.html'
        }),
        new webpack.EnvironmentPlugin({
            NODE_ENV: webpackEnv.NODE_ENV,
            BABEL_ENV: webpackEnv.BABEL_ENV
        })
    ]
});

Device (please complete the following information):

  • Browser: Chrome
  • Browser Version: Version 99.0.4844.83 (Official Build) (x86_64)

I have the same problem, the bug reported here before, I was hoping this will be fixed in this version but still exist! even on v.2.3.5
actually, I don’t know it maybe is the bad loading of SDK or maybe a conflict between packages, but in the previous version of my project with SDK v(1.9.6), this error was not thrown.
Problem is on zoomus-websdk.umd.min.js file Putting Array.prototype. uniquelize || before Object.defineProperty(Array.prototype, "uniquelize" will fix this but I had to do this change every time I install any package on my project.

It was importing the zoom script with both CDN and npm way, I manage to remove importing CDN way and the error is not throwing anymore.

Thank you so much for your response @MLAD!! Interested in knowing how you manage to remove it.

I resolved the errors using old version of Zoom web SDK and using the exact version of React as mentioned in dependency. However, the app doesn’t load.

It will very helpful if you could share on how to make this work.

Your welcome @jxs , actually I have a lot of struggles with zoom SDK in react :sweat_smile: but now it works just fine, in my case the error was Uncaught TypeError: Cannot redefine property: uniquelize .
As you can see I said the problem was a duplicate of importing the SDK and I eliminate the CDN way and it work.
here is two kinds of import :point_down:

npm way (typescript):
import { ZoomMtg } from '@zoomus/websdk';

CDN way (in index):

    <script src="https://source.zoom.us/2.3.5/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/2.3.5/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/2.3.5/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/2.3.5/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/2.3.5/lib/vendor/lodash.min.js"></script>
    <script src="https://source.zoom.us/2.3.5/zoom-meeting-embedded-2.3.5.min.js"></script>
    <script src="https://source.zoom.us/zoom-meeting-2.3.5.min.js"></script>

in my react app in version 1.9.6 I import in two ways and it perfectly works!
but when I update my SDK to 2.3.5 the app just throws Uncaught TypeError: Cannot redefine property: uniquelize
finally, I commented the CDN import and it bak to work fine, but still, have some warnings!
recently I just do the reverse way and add the CDN way and remove the npm way!
like this:

// import { ZoomMtg } from '@zoomus/websdk';
declare const ZoomMtg: any;

anyway, the important thing in this kind of error is to prevent importing the SDK more than once.

Thanks @MLAD !! I was able to get it working via CDN.

Thank you for sharing your soultion @MLAD!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.