Error while trying to integrate ZoomVideo with React app

Video SDK Web
1

Dear Zoom magicians!
I’m trying to integrate zoom video sdk into the React app I’m working on, but I keep on getting "export 'default' (imported as 'ZoomVideo') was not found in '@zoom/videosdk'" error.

Steps:

  1. npm install @zoom/videosdk --save
  2. Add:
    import ZoomVideo from '@zoom/videosdk';
    const client = ZoomVideo.createClient();
  3. Try to access the path from the point above.

I’d guess that maybe I need to downgrade/upgrade something else in order for this sdk to work, but I’m running out of ideas. I’d appreciate some help.

Thank you in advance!
Maria Syczewska

2

My package.json:

{ "engines": { "node": "12.18.4" }, "resolutions": { "styled-components": "^5" }, "dependencies": { "@apollo/client": "^3.3.11", "@babel/preset-react": "^7.10.4", "@emotion/core": "^10.0.35", "@rails/actioncable": "^6.0.3-2", "@rails/actiontext": "^6.0.2-1", "@rails/webpacker": "5.1.1", "@stripe/react-stripe-js": "^1.1.2", "@stripe/stripe-js": "^1.11.0", "@svgr/webpack": "^5.4.0", "@zoom/videosdk": "^1.1.4", "add": "^2.0.6", "apollo-upload-client": "^14.1.3", "axios": "^0.19.2", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "blueimp-canvas-to-blob": "^3.28.0", "bootstrap": "^4.5.2", "canvas-txt": "^2.0.10", "clipboard": "^2.0.6", "clsx": "^1.1.1", "fast-sort": "^3.0.2", "feather-icons": "^4.28.0", "file-selector": "^0.2.4", "graphql": "^15.5.0", "graphql-ruby-client": "^1.9.4", "jsonapi-normalizer": "^2.0.1", "lottie-web-react": "^1.0.3", "moment": "^2.27.0", "moment-utl": "^2.13.1", "pdfjs-dist": "2.5.207", "pluralize": "^8.0.0", "prop-types": "^15.7.2", "quill-image-resize-module": "^3.0.0", "quill-image-uploader": "^1.2.2", "react": "^16.13.1", "react-autosize-textarea": "^7.1.0", "react-beautiful-dnd": "^13.0.0", "react-bootstrap": "^1.3.0", "react-cookie": "^4.0.3", "react-dates": "^21.8.0", "react-dom": "^16.13.1", "react-draggable": "^4.4.3", "react-dropzone": "^11.1.0", "react-dropzone-uploader": "^2.11.0", "react-highlight-words": "^0.16.0", "react-input-mask": "^3.0.0-alpha.2", "react-input-switch": "^2.2.2", "react-intersection-observer": "^8.31.1", "react-linkify": "^1.0.0-alpha", "react-loading-skeleton": "^2.1.1", "react-pdf": "5.2.0", "react-promise-tracker": "^2.1.0", "react-quill": "^1.3.5", "react-rails-form-helpers": "^0.1.0-beta.17", "react-rangeslider": "^2.2.0", "react-resize-detector": "^6.7.2", "react-scrollbars-custom": "^4.0.25", "react-select": "^3.1.0", "react-spinners": "^0.9.0", "react-svg": "^11.0.36", "react-tracked": "^1.4.2", "react-uid": "^2.3.0", "react-window": "^1.8.6", "react_ujs": "^2.6.1", "signature_pad": "^3.0.0-beta.3", "styled-components": "^5.3.0", "sweetalert2": "^9.13.0", "trix": "^1.0.0", "use-debounce": "^6.0.0", "yarn": "^1.22.10" }, "devDependencies": { "babel-eslint": "^10.1.0", "eslint": "^7.2.0", "eslint-config-prettier": "^8.3.0", "eslint-plugin-react": "^7.20.5", "jest-junit": "^10.0.0", "prettier": "^2.3.2", "webpack-dev-server": "^3.11.0" } }

3

Hey @symarys

Thanks for your feedback.

Video SDK supports umd/esm/cjs , could you please provide the webpack config?

Thanks
Vic

5

Hey @vic.yang !
Thank you so much for looking into this and your suggestion!

I looked into our configs and it looks like the issue was in our babel.config.js, we had modules: false in there, I changed it to modules: 'commonjs' and I’m not longer getting that exports error. I figure that’s some progress, I’ll see where I can go from here.

Maria

6

Happy to hear that @symarys ! :slight_smile:

Please let us know if we can help with anything else.

-Tommy

7

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