webex-js-sdk icon indicating copy to clipboard operation
webex-js-sdk copied to clipboard

Importing SDK into webpack 5 app requires extra library configuration

Open tomBarkerSwitchTelecom opened this issue 1 year ago • 4 comments

Describe the bug When importing the SDK into a webpack 5 application there are underlying libraries that are no longer included as standard (for browser) which need require modifying the links to the libraries.

Is this expected?

libraries affected:

  • crypto
  • os
  • querystring
  • stream
  • vm

To Reproduce Steps to reproduce the behavior:

  1. npx create-react-app webex-test --template typescript
  2. cd webex-test
  3. npm install --save webex
  4. Add <script crossorigin src="https://unpkg.com/webex/umd/webex.min.js"></script> to index.html
  5. Add const Webex = require("webex"); to App.tsx
  6. npm start

Expected behavior SDK to import the underlying libraries it requires.

Workaround Installing a browser version of the library and then "linking" it in the package.json seems to solve these issues. see this example app https://github.com/tomBarkerSwitchTelecom/webex-test.

Screenshots image

Platform (please complete the following information):

  • OS: [iOS]
  • Browser [chrome]
  • Version [3.4.0]
  • Device Type [Desktop]

Additional context

tomBarkerSwitchTelecom avatar Sep 18 '24 01:09 tomBarkerSwitchTelecom

Thanks for raising this bug @tomBarkerSwitchTelecom. We'll take a look at this shortly. I see both the issues #3841 and this one are related.

sreenara avatar Sep 19 '24 06:09 sreenara

@tomBarkerSwitchTelecom, webpack > 5 removed the ability to automatically polyfill node APIs, because of this we have to install each polyfill and add them as resolve.fallback in webpack.config.js.

So if we have to use os,

Changes in package.json "os-browserify": "0.3.0" //devDependency

Changes in webpack.config

resolve:{
      fallback:{
             os: require.resolve('os-browserify'),

This might be a helpful article - https://gist.github.com/ef4/d2cf5672a93cf241fd47c020b9b3066a

Shreyas281299 avatar Sep 20 '24 05:09 Shreyas281299

Thanks for the reply. I originally went through that article and that was how i found the work around I suggested in the ticket. The problem with the solution in the ticket is that it requires "ejecting" the create react app which is a pretty nuclear solution, (but admittedly, ejecting isn't required for the solution I found).

Given that webe-js-sdk is designed for use in the browser is there an appetite to move to consuming the browser based versions of these dependencies and explicitly auto add them to the package lock so that this work around (and ejecting) isn't required?

tomBarkerSwitchTelecom avatar Sep 23 '24 22:09 tomBarkerSwitchTelecom

@tomBarkerSwitchTelecom - we have created an internal ticket and the team will pick it up in the coming month.

Shreyas281299 avatar Oct 22 '24 08:10 Shreyas281299