# Zoom Web SDK Firefox Crash on clicking "Join" button

**URL:** <https://devforum.zoom.us/t/zoom-web-sdk-firefox-crash-on-clicking-join-button/73798>\
**Category:** Web\
**Created:** [August 7, 2022, 12:56pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-firefox-crash-on-clicking-join-button/73798 "2022-08-07T12:56:54Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![aktasalper99](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/aktasalper99/32/40243_2.png) [@aktasalper99](https://devforum.zoom.us/u/aktasalper99)\
**Post date:** [August 7, 2022, 12:56pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-firefox-crash-on-clicking-join-button/73798/1 "2022-08-07T12:56:54Z")

</div>

# Description

Hello,  
I would like to integrate Zoom Web SDK into my website, and I was trying to figure out how it works by using the sample [React](https://github.com/zoom/meetingsdk-react-sample) and [Node.js](https://github.com/zoom/meetingsdk-sample-signature-node.js) projects provided at GitHub.

Since the sample projects are built to be working right out of the box after filling the necessary information like **SDK KEY** , **SDK SECRET** , **meeting number** etc. I was able to create a Meeting on Zoom and join this meeting from **Chrome** and other **Chromium browsers** (Edge, Brave) without a problem.

However, when trying to join with Firefox, there are uncaught TypeErrors that crash the page and make it uninteractable (cannot click on anything, completely unresponsive).

There is also an unresolved/closed [topic created in July 22, 2021 with the same problem](https://devforum.zoom.us/t/zoom-firefox-89-0-2-64-bit-crash/54553)

# Browser Console Error

```auto
Uncaught (in promise) TypeError: 'camera' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.
Uncaught (in promise) TypeError: 'microphone' (value of 'name' member of PermissionDescriptor) is not a valid value for enumeration PermissionName.

```

## Which Web Meeting SDK version?

^2.6.0

## Meeting SDK Code Snippets

**NOTE** : I added the try/catch blocks to see if that would prevent the page from crashing, but it does not. The result does not change with the presence of try/catch blocks.

```javascript
function startMeeting(signature) {
	document.getElementById("zmmtg-root").style.display = "block";

	try {
		ZoomMtg.init({
			leaveUrl: leaveUrl,
			success: (success) => {
				console.log("init success - ", success);
				try {
					ZoomMtg.join({
						signature: signature,
						meetingNumber: meetingNumber,
						userName: userName,
						sdkKey: sdkKey,
						userEmail: userEmail,
						passWord: passWord,
						tk: registrantToken,
						success: (success) => {
							console.log("join success - ", success);
					},
						error: (error) => {
							console.log("join error - ", error);
						}
					});
				} catch (err) {
					console.log("join try/catch error - ", err);
				}
			},
			error: (error) => {
				console.log("Meeting init error - ", error);
			}
		});
	} catch (err) {
		console.log("init try/catch Error - ", err);
	}
}

```

# To Reproduce

Steps to reproduce the behavior:

1. Go to [Meeting SDK React Sample Repo](https://github.com/zoom/meetingsdk-react-sample) and download it
2. Go to [Meeting SDK Node.js Sample Repo](https://github.com/zoom/meetingsdk-sample-signature-node.js) and download it
3. Run React front-end and Node.js back-end as described
4. Go to [localhost](http://localhost:3000/) with **Firefox (103.0.1, 64bit)**
5. Click join meeting button:  
 ![Screenshot_126](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/9/c97d921c5d6a315691ea033f44844fd58d13b972.png)

## Screenshots

The errors visible on console after clicking “Join Meeting” button:

 ![Screenshot_127](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/7/e/7e4d05f3c5448e9d892860b21ff81794c34e28c5.png)

### Videos

Firefox:  
 ![firefox(2)](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/a/7/a79058024fcfecfb90de49c45fc1fa140c8a581e.gif)

–

Edge (interactive/responsive):  
 ![edge](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/7/9/79d9121f507be614db3f73b0ada56d59adfa8f50.gif)

## Troubleshooting Routes

- I have added `<ErrorBoundary>` around `<App />`
- I have added `try/catch` blocks, as can be seen, around function calls.
- I have added **coi-serviceworker.js** to see if it could solve the problem

* * *

Up until this point nothing worked. However, I have found a way to make the app _interactable_ after it crashes.

- I have added `"preinstall": "pnpm dlx npm-force-resolutions",` to **package.json** , then installed `"react-error-overlay": "6.0.9"` as dev dependency.

```json
"scripts": {
	"preinstall": "pnpm dlx npm-force-resolutions",
	"start": "react-scripts start",
	"build": "react-scripts build",
	"test": "react-scripts test",
	"eject": "react-scripts eject"
},
"devDependencies": {
	"react-error-overlay": "6.0.9"
},
"resolutions": {
	"react-error-overlay": "6.0.9"
},

```

  - After installing the `react-error-overlay`, and running the app again, I receive this error modal after it crashes:  

  - Now, after clicking the **X** button to close the modal, the _page actually becomes interactable again_, and I can click **Join** button to join the meeting.

However, I would like to _catch_ or prevent the error from crashing the app at all, instead of closing the React Error Overlay to be able to interact with the page again.

# Device:

- Device: Desktop
- OS: Windows 10 Home, 21H2, 19044.1826, 64-bit operating system, x64-based processor
- Browser: Firefox
- Browser Version: 103.0.1 (64bit)

## Additional context

Full code of **App.js** :

> **Show code**
>
> ```javascript
> /** @format */
> 
> import React from "react";
> 
> import "./App.css";
> import { ZoomMtg } from "@zoomus/websdk";
> 
> ZoomMtg.setZoomJSLib("https://source.zoom.us/2.6.0/lib", "/av");
> 
> ZoomMtg.preLoadWasm();
> ZoomMtg.prepareWebSDK();
> // loads language files, also passes any error messages to the ui
> ZoomMtg.i18n.load("en-US");
> ZoomMtg.i18n.reload("en-US");
> 
> function App() {
> // setup your signature endpoint here: https://github.com/zoom/meetingsdk-sample-signature-node.js
> var signatureEndpoint = "http://localhost:4000/";
> // This Sample App has been updated to use SDK App type credentials https://marketplace.zoom.us/docs/guides/build/sdk-app
> var sdkKey = "my_sdk_key";
> var meetingNumber = ""; // meeting number I get from creating a Zoom meeting
> var role = 0;
> var leaveUrl = "http://localhost:3000";
> var userName = "React";
> var userEmail = "a@a.com";
> var passWord = "password"; // meeting pwd provided after creating a Zoom meeting
> // pass in the registrant's token if your meeting or webinar requires registration. More info here:
> // Meetings: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/meetings#join-registered
> // Webinars: https://marketplace.zoom.us/docs/sdk/native-sdks/web/client-view/webinars#join-registered
> var registrantToken = "";
> 
> async function getSignature(e) {
> e.preventDefault();
> 
> try {
> const res = await fetch(signatureEndpoint, {
> method: "POST",
> headers: { "Content-Type": "application/json" },
> body: JSON.stringify({
> meetingNumber: meetingNumber,
> role: role
> })
> });
> const data = await res.json();
> startMeeting(data.signature);
> } catch (err) {
> console.log(err);
> }
> }
> 
> function startMeeting(signature) {
> document.getElementById("zmmtg-root").style.display = "block";
> 
> try {
> ZoomMtg.init({
> leaveUrl: leaveUrl,
> success: (success) => {
> console.log("init success - ", success);
> try {
> ZoomMtg.join({
> signature: signature,
> meetingNumber: meetingNumber,
> userName: userName,
> sdkKey: sdkKey,
> userEmail: userEmail,
> passWord: passWord,
> tk: registrantToken,
> success: (success) => {
> console.log("join success - ", success);
> },
> error: (error) => {
> console.log("join error - ", error);
> }
> });
> } catch (err) {
> console.log("join try/catch error - ", err);
> }
> },
> error: (error) => {
> console.log("Meeting init error - ", error);
> }
> });
> } catch (err) {
> console.log("init try/catch Error - ", err);
> }
> }
> 
> return (
> <div className='App'>
> <main>
> <h1>Zoom Meeting SDK Sample React</h1>
> 
> <button onClick={getSignature}>Join Meeting</button>
> </main>
> </div>
> );
> }
> 
> export default App;
> 
> ```

Full **package.json** files of React app

> **Show**
>
> ```json
> {
> "name": "meetingsdk-sample-react",
> "version": "2.6.0",
> "author": "Tommy Gaessler",
> "homepage": "",
> "private": true,
> "dependencies": {
> "@testing-library/jest-dom": "^5.11.4",
> "@testing-library/react": "^11.1.0",
> "@testing-library/user-event": "^12.1.10",
> "@zoomus/websdk": "^2.6.0",
> "react": "^17.0.1",
> "react-dev-utils": "^11.0.4",
> "react-dom": "^17.0.1",
> "react-scripts": "4.0.3",
> "web-vitals": "^0.2.4"
> },
> "devDependencies": {
> "react-error-overlay": "6.0.9"
> },
> "scripts": {
> "preinstall": "pnpm dlx npm-force-resolutions",
> "start": "react-scripts start",
> "build": "react-scripts build",
> "test": "react-scripts test",
> "eject": "react-scripts eject"
> },
> "resolutions": {
> "react-error-overlay": "6.0.9"
> },
> "eslintConfig": {
> "extends": [
> "react-app",
> "react-app/jest"
> ]
> },
> "browserslist": {
> "production": [
> ">0.2%",
> "not dead",
> "not op_mini all"
> ],
> "development": [
> "last 1 chrome version",
> "last 1 firefox version",
> "last 1 safari version"
> ]
> }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![j.schoenemeyer](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@j.schoenemeyer](https://devforum.zoom.us/u/j.schoenemeyer)\
**Post date:** [August 7, 2022, 6:57pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-firefox-crash-on-clicking-join-button/73798/2 "2022-08-07T18:57:27Z")

</div>

the 2 red error messages are normal - if you don’t have a camera and a microphone connected - and have at least in plain javascript version no influence on the further process

firefox and chrome behave exactly the same at this point

go back to a version as close as possible to the github example and activate the debug-mode

```auto
ZoomMtg.init({
    debug: true,

```

can you upload the **complete console log** as **readable** screenshots

- of a successful login with chrome
- and then the same process with firefox

**Notice** : create a test meeting with setting “ **Allow participants to join anytime** ” and “ **no waiting room** ” (there are the least problems with login)

Jürgen

---

<div class="post-metadata">

**Author:** ![aktasalper99](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/aktasalper99/32/40243_2.png) [@aktasalper99](https://devforum.zoom.us/u/aktasalper99)\
**Post date:** [August 8, 2022, 6:36pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-firefox-crash-on-clicking-join-button/73798/3 "2022-08-08T18:36:52Z")

</div>

Hi,  
Thank you for your response!

> the 2 red error messages are normal - if you don’t have a camera and a microphone connected

Both the current and the previous tests were done with a plugged in cam/mic. Though I don’t know why it shows OBS Studio’s image initially, it loads the actual camera feed after joining successfully on Chrome and Chromium browsers.

> go back to a version as close as possible to the github example and activate the debug-mode

As you have instructed, I tried the same process on a clean repository clone of both React and Node.js sample (only changing necessary parts and adding debug mode)

Here are the logs from Chrome and Firefox, going through the same process:

**Chrome** (succesful and smooth experience):

[Readable logs on Gist (Chrome)](https://gist.github.com/yethranayeh/236e946a7c2700543ab81dc69f69541a#file-chrome-console_logs-txt)

Here is the screenshot of the Chrome logs:

 ![chromeLogs](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/1/c/1c55e198bc838dd0d316b495e236112fdc51a0ab.png)

* * *

**Firefox** (unsuccessful and unresponsive experience after crash):  
[Readable logs on Gist (Firefox)](https://gist.github.com/yethranayeh/26d61c6ed0623ac06f4850119d7b6749#file-firefox-console_logs-txt)

Here is the screenshot of the Firefox logs:

 ![FirefoxLogs](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/c/4/c4f5bb8fc1883b76bd452d0620c0c0cbc7d215d7.png)

---

<div class="post-metadata">

**Author:** ![j.schoenemeyer](https://avatars.discourse-cdn.com/v4/letter/j/f9ae1b/32.png) [@j.schoenemeyer](https://devforum.zoom.us/u/j.schoenemeyer)\
**Post date:** [August 8, 2022, 7:14pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-firefox-crash-on-clicking-join-button/73798/4 "2022-08-08T19:14:59Z")

</div>

Firefox crashes in index.js (not direct in the zoom javascript) - Firefox needs the function/object “process”

> Uncaught ReferenceError: process is not defined

that seems to be a special react problem (injectedScript)

with google search “react process is not defined” there are some hits

perhaps → [https://www.gimtec.io/articles/process-is-not-defined/](https://www.gimtec.io/articles/process-is-not-defined/)

so now a react profi must help, which unfortunately I am not

Jürgen

---

<div class="post-metadata">

**Author:** ![aktasalper99](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/aktasalper99/32/40243_2.png) [@aktasalper99](https://devforum.zoom.us/u/aktasalper99)\
**Post date:** [August 8, 2022, 8:21pm UTC](https://devforum.zoom.us/t/zoom-web-sdk-firefox-crash-on-clicking-join-button/73798/5 "2022-08-08T20:21:22Z")

</div>

Limiting my search to React related problems about this actually seems to have solved the problem.  
Thank you for the response!

For anyone else that might face this problem:

```auto
npm install react-scripts@latest

```

solved it for me, as mentioned in [this guide](https://bobbyhadz.com/blog/react-referenceerror-process-not-defined). I guess the **package.json** file in the template was not up to date since it was using `react-scripts` v4 since Jan 8, 2021:

```json
"react-scripts": "4.0.3",

```

The guide mentions that

> The error is caused by the `react-error-overlay` package which has dependencies that were updated to support `webpack` v5 and are not compatible with `react-scripts` v4.

Now I only wonder why Chrome worked and Firefox crashed if `react-scripts` v4 was broken in both environments 🤔

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [September 8, 2022, 6:22am UTC](https://devforum.zoom.us/t/zoom-web-sdk-firefox-crash-on-clicking-join-button/73798/6 "2022-09-08T06:22:18Z")

</div>

Closed on September 8, 2022, 6:22am UTC

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