React 19 not supported with embedded SDK

How To Reproduce

  1. Sync down sample React app: github DOT com/zoom/meetingsdk-react-sample
  2. Upgrade react and react-dom to 19.1.0
  3. Change line to import from App-new (line 3 of main.tsx, per the docs)
  4. Observe error in console

Error:
@zoom_meetingsdk_embedded.js?v=6b8a5767:18776 Uncaught TypeError: Cannot read properties of undefined (reading ‘ReactCurrentOwner’)

Is there a roadmap for this?

Hi @Sam14 I’m following up from our meeting yesterday. I’m pinging our PM Tommy, for more information on your questions and will get back to you shortly.

Hey @Sam14,

I followed the repro steps you shared and can use the sample with React 19.1.0. Can you try again?

You might see a warning like You are importing createRoot from "react-dom" which is not supported or Each child in a list should have a unique "key" prop but those wouldn’t impact the SDKs functionality.

Hi @ekaansh.zoom, I’m still seeing the issue.

Are you sure in your repro steps you chaned line 3 in main.tsx to import App from "./App-New";? This is the component that uses the Component View, not the Client View.

Thanks.

@ekaansh.zoom I’m noticing one difference. I used pnpm to install dependencies (as we do in our app, out of habit), and that’s causing an error. With npm install, the error doesn’t appear. Something is different in the way the package managers are installing dependencies.

I’m going to dig further…

@ekaansh.zoom I tried a few various tweaks to pnpm settings to see if I could get it to behave like npm but to no avail. I suspect if you bump @zoom/meetingsdk’s dependencies:

  "peerDependencies": {
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "redux": "4.2.1",
    "react-redux": "8.1.2",
    "lodash": "^4.17.21",
    "redux-thunk": "2.4.2"
  },

to version 19.1.0, then an installation via npm would also give you the same error. I don’t have more time to dig into how pnpm/npm module resolution differences work, but that is hopefully enough repro information. Let me know if I can do more.

Hi @Sam14,

I believe it depends on the module resolution strategy that your package manager uses. I used bun for example in the bun repro and it works as expected. I also tried the same with npm and it works as expected. I’d suggest you use npm or bun for now.

If using pnpm is a must you can try the following .npmrc file to potentially have the same behaviour:

# Force single version of React to avoid version conflicts
shamefully-hoist=true

# Auto install peer dependencies
auto-install-peers=true

# Use legacy peer deps behavior similar to npm
strict-peer-dependencies=false 
1 Like

Hi @ekaansh.zoom,

Thanks for the reply. A few things:

  • pnpm is the non-negotiably the package manager we must use. It is the de facto package manager that is recommended on all new projects by various popular tooling frameworks, authors, and libraries
  • .pnpmrc is not the valid settings file. The proper pnpm settings file is .npmrc.
  • The main.tsx is not pointing at the Component View. If you change the import to be from App-New.tsx, you will still observe the same error
  • Even with the proper .npmrc and import fix, the same error is present

Taking a step back, I believe the core issue is that @zoom/meetingsdk is not compatible with React 19. We can perhaps coerce package managers to sidecar install React 18 for one package, but that is not fixing the underlying issue as users will almost definitely not want two versions of React bundled and shipped to the client.

Can we instead try updating the dependencies of @zoom/meetingsdk itself to React 19 and then trying?

Hi @Sam14,

I understand the requirement for having support for your preferred toolchain but pnpm is far from the de facto package manager. We still use and recommend npm to be the default package manager, making sure it works with the package manager that ships with node. You can see this discussion about node pmwg sticking with npm (and removing corepack).

I believe the core issue is that @zoom/meetingsdk is not compatible with React 19

That’s a somewhat fair callout, we’re working on updating the source to use React 19 but this effort needs time. I’ve shared the feedback with engineering. In the meantime you can still use it in React 19 projects given you manage the deps yourself. Please look at the bun example here: meetingsdk-react-sample/src/main.tsx at 4a0dbc3d181866a3b6fd1fb230b6209fb0fbb77a · EkaanshArora/meetingsdk-react-sample · GitHub

1 Like

That’s a somewhat fair callout, we’re working on updating the source to use React 19 but this effort needs time. I’ve shared the feedback with engineering.

No worries, as long as we’re on the same page on this bit! Thanks for the quick communication, appreciated.

2 Likes

Hey @ekaansh.zoom - I understand the team is working hard to update to React 19, but I wanted to see if there was any update? We are using pnpm and have tried a ton of workarounds to no avail. We are worried we’ll have to rollback our entire deployment to React 18 or create a separate web app entirely, so this is a major blocker for us. Do you have a time estimate for supporting React 19 properly?

@tommypomelo The only way I have gotten this to work is to use the CDN approach. It is not ideal but it has worked for me.