Difficulties importing Webex sdk into create-react-app

[tomBarkerSwitchTelecom]

Describe the bug
I've followed the instructions on the "for browser consumption" page to import the webex sdk into a basic create react app (built from generic webpack config).

I'm getting a Module not found: Error: Can't resolve 'fs' in ".../node_modules/strtok3/lib" error.

I've looked into how to allow webpack/CRA to access fs and the documentation is stating that fs should not be included in browser code. (see here)

Is it expected that the SDK should load inside a react app?
Is there an expectation that webex has access to the fs library?
Should I be adding that library to the browser? (which is difficult as CRA explicitly prevents that)
Is there a work around to not require fs? (eg: not importing the entire webex module, but subsets)

Thanks for your assistance.

To Reproduce
Steps to reproduce the behavior:
I've pushed a stripped down version of a new app for your testing if desired, otherwise see below instructions,
https://github.com/tomBarkerSwitchTelecom/webex-test.

NB: webpack 5 causes a lot of "standard" packages to need to be manually installed which I haven't set out the instructions for below (but have done in the test app). I'll be opening another ticket for that and will link below once I've done that.

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
Expect application to be able to load following the installation instructions.

Screenshots

Platform (please complete the following information):

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

Additional context

[tomBarkerSwitchTelecom]

bug ticket for dependencies see here: #3842

[sreenara]

Thanks for raising this issue @tomBarkerSwitchTelecom . We'll take a look at this and get back shortly.

[Shreyas281299]

Replied at #3842

[tomBarkerSwitchTelecom]

Thanks for your reply in 3842 (and here)

This issue is slightly different as the temporary workaround in the other ticket doesn't work for the fs library as it is explicitly not allowed in the browser which is why I raised this one separately.

The other ticket is a "this would be nice to have so that others can easily use this library" whereas this ticket is actually blocking being able to use the sdk in the browser.

[Shreyas281299]

For fs, you can try putting false as the resolution. Below is the fallback object that I am using

resolve: {
fallback: {
os: require.resolve("os-browserify/browser"),
http: require.resolve("stream-http"),
https: require.resolve("https-browserify"),
crypto: require.resolve("crypto-browserify"),
stream: require.resolve("stream-browserify"),
url: require.resolve("url"),
assert: require.resolve("assert"),
fs: false,
querystring: require.resolve("querystring-es3"),
},
},

[tomBarkerSwitchTelecom]

adding that fallback option requires the application to be ejected from create web app.
Is this expected that it cannot be loaded within a general application, as not being able to use CRA for this library seems extreme.

[Shreyas281299]

Hi @tomBarkerSwitchTelecom ,
As of now, yes, it is expected that developers will need to eject from CRA and manage the configuration themselves. There are packages like craco and react-app-rewind that can help here.

We have also created an internal ticket to track this and the team will pick this up in the coming month