Issues using browser sandbox React components

[mjftw]

I'm trying to use the Whereby Browser SDK react components, but having issues.

I've created a little sample project here to show the issues I'm seeing.

I made a create-t3-app and create-react-app to check if it was a NextJS specific issue. On both I am seeing the typings import error mentioned on https://github.com/whereby/browser-sdk/issues/99, but also I cannot import and use the Whereby components at all.

This might be some issue with my local environment if you are not able to reproduce the issue. If you have any ideas how to fix this would be a big help. I really do want to try out the Browser SDK to see if it could solve our issues at Multiverse, but currently I can't get it working!

Dev Environment

$ node --version
v20.8.1

$ npm --version
10.1.0

Installed whereby browser SDK with:

npm i @whereby.com/browser-sdk@2.0.0-alpha26

Create T3 App

Here's a version that uses a NextJS app, created with Create T3 App, like we use at Multiverse. https://github.com/mjftw/whereby-errors-sandbox/tree/create-t3-app

To use

1. Checkout branch
2. npm install
3. npm run dev
4. Go to http://localhost:3000
5. Click the 2 buttons to try out client side and server side rendering versions (they behave the same, but wanted to check)

My output

Terminal output:

$ npm run dev
> whereby-browser-sandbox@0.1.0 dev
> next dev

  ▲ Next.js 13.5.6
  - Local:        http://localhost:3000
  - Environments: .env

 ✓ Ready in 2.1s
 ✓ Compiled / in 1167ms (238 modules)
 ✓ Compiled /clientside in 183ms (280 modules)
 ✓ Compiled /serverside in 115ms (284 modules)
 ⨯ ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/home/merlin/learning/whereby-browser-sandbox/node_modules/@whereby.com/browser-sdk/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at file:///home/merlin/learning/whereby-browser-sandbox/node_modules/@whereby.com/browser-sdk/dist/lib.cjs.js:3:14
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15) {
  page: '/serverside'
}
 ✓ Compiled /_error in 59ms (286 modules)

Clientside screenshot

Serverside rendering screenshot

Create React App

And here's one where I used Create React App, just to see if it was a NextJS specific issue. https://github.com/mjftw/whereby-errors-sandbox/tree/create-react-app

To use

1. Checkout branch
2. npm install
3. npm start
4. Go to http://localhost:3000

My output

Terminal output

$ npm start
> whereby-browser-sandbox@0.1.0 start
> react-scripts start

(node:3789123) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:3789123) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...

Failed to compile.

Attempted import error: 'useLocalMedia' is not exported from '@whereby.com/browser-sdk' (imported as 'useLocalMedia').
ERROR in ./src/components/MyPreCallUX.tsx 9:21-34
export 'useLocalMedia' (imported as 'useLocalMedia') was not found in '@whereby.com/browser-sdk' (possible exports: default)

ERROR in ./src/components/MyPreCallUX.tsx 35:36-45
export 'VideoView' (imported as 'VideoView') was not found in '@whereby.com/browser-sdk' (possible exports: default)

ERROR in ./src/components/MyPreCallUX.tsx 50:10-23
export 'useLocalMedia' (imported as 'useLocalMedia') was not found in '@whereby.com/browser-sdk' (possible exports: default)

webpack compiled with 3 errors
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
ERROR in src/components/MyPreCallUX.tsx:1:42
TS7016: Could not find a declaration file for module '@whereby.com/browser-sdk'. '/home/merlin/learning/whereby-browser-sandbox/node_modules/@whereby.com/browser-sdk/dist/lib.cjs.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/whereby.com__browser-sdk` if it exists or add a new declaration (.d.ts) file containing `declare module '@whereby.com/browser-sdk';`
  > 1 | import { useLocalMedia, VideoView } from "@whereby.com/browser-sdk";
      |                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 |
    3 | function MyPreCallUX() {
    4 |   const localMedia = useLocalMedia({ audio: false, video: true });

ERROR in src/components/MyPreCallUX.tsx:13:27
TS7006: Parameter 'd' implicitly has an 'any' type.
    11 |     <div className="preCallView">
    12 |       {/* Render any UI, making use of state */}
  > 13 |       {cameraDevices.map((d) => (
       |                           ^
    14 |         <p
    15 |           key={d.deviceId}
    16 |           onClick={() => {

Screenshot:

[havardholvik]

Thanks for the detailed report 🙏 Will look into this straight away. Tbh, I havent tested with Create T3 App at all. Prior to release we have tested with:

• create-react-app
• create vite
• create-next-app

[mjftw]

Hi, I've got an update for you!

Turns out this is my local env failing to work properly - certain I installed with npm i @whereby.com/browser-sdk@2.0.0-alpha26 (copied from install section of npm package), but looking at my package.json I was on 1.11.0 🤦🏽‍♂️

Nevermind! It seems to work now I've manually changed the version in package.json

Sorry for wasting both our time!

[mjftw]

Well at least now you have a detailed report on what to look for if you see any other foolish developers raising issues like this!

[havardholvik]

Sorry for wasting both our time!

No worries, these reports are really valuable to us, and will help us iron out as much friction as possible for users to get going 🙏 Keep the feedback coming 💪

[mjftw]

Aaaah okay I've worked out what happened!

I wasn't being (as much of) an idiot after all, although I should have checked package.json.

Looks like if you run npm audit fix --force it sends you back to 1.11.0!

See output below:

 ~/l/whereby-browser-sandbox (create-t3-app)$ npm i @whereby.com/browser-sdk@2.0.0-beta1
npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3

added 75 packages, changed 1 package, and audited 443 packages in 9s

130 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (1 moderate, 6 high, 1 critical)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
 ~/l/whereby-browser-sandbox (create-t3-app)$ grep '@whereby.com/browser-sdk' package.json 
    "@whereby.com/browser-sdk": "^2.0.0-beta1",
 ~/l/whereby-browser-sandbox (create-t3-app)$   npm audit fix --force
npm WARN using --force Recommended protections disabled.
npm WARN audit Updating @whereby.com/browser-sdk to 1.11.0, which is a SemVer major change.

removed 75 packages, changed 1 package, and audited 368 packages in 1s

121 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 ~/l/whereby-browser-sandbox (create-t3-app)$ grep '@whereby.com/browser-sdk' package.json 
    "@whereby.com/browser-sdk": "^1.11.0",

[havardholvik]

Thanks again. Seems like this is the expected behaviour of npm fix --force actually. I have created an issue to fix these vulnerability warnings, which will hopefully prevent others falling into this trap.

[mjftw]

Thank you 🙏🏽