How To Reproduce
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
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.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.npmrc and import fix, the same error is presentTaking 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/meetingsdkis 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
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.
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.
Hi, how do you implemented the CDN approach? I’m, facing the same issue & I’m trying to implement CDN
@zoom/meetingsdk declares the same packages as both their dependencies and peer dependencies. In this case, it seems like pnpm would resolve peer deps from the parent package, and ignore the duplicate dependencies. If you can’t change global npmrc settings, you can patch the package to remove the duplicate peer dependencies
.pnpmfile.cjs:
function readPackage(pkg, context) {
// @zoom/meetingsdk declares react, react-dom, react-redux, redux, and redux-thunk
// as BOTH dependencies (at version 18.2.0) AND peerDependencies (at 18.2.0).
// This causes pnpm to resolve peer deps from the parent,
// instead of using the bundled React 18 from the package's own dependencies.
//
// Solution: Remove the peerDependencies so pnpm uses the bundled versions.
if (pkg.name === "@zoom/meetingsdk") {
context.log(
`Removing peerDependencies from ${pkg.name} to use bundled React`,
);
delete pkg.peerDependencies;
}
return pkg;
}
module.exports = {
hooks: {
readPackage,
},
};
Or if you want something more bulletproof:
/**
* pnpmfile hook to customize package resolution during installation.
*
* @see https://pnpm.io/pnpmfile
*/
/**
* Removes peerDependencies that are also declared in dependencies.
* This forces pnpm to use the package's bundled versions instead of
* resolving peers from the parent context.
*
* @param {object} pkg - The package.json content of the package being processed
* @param {object} context - Context object with log method
* @returns {object} - Modified package.json content
*/
function readPackage(pkg, context) {
// @zoom/meetingsdk@4.1.0 declares react, react-dom, react-redux, redux, and redux-thunk
// as BOTH dependencies (at version 18.2.0) AND peerDependencies (at 18.2.0).
// This causes pnpm to resolve peer deps from the parent,
// instead of using the bundled React 18 from the package's own dependencies.
//
// Solution: Remove peerDependencies that overlap with dependencies so pnpm uses the bundled versions.
if (pkg.name === "@zoom/meetingsdk" && pkg.peerDependencies && pkg.dependencies) {
const overlapping = Object.keys(pkg.peerDependencies).filter(
(dep) => dep in pkg.dependencies
);
if (overlapping.length > 0) {
context.log(
`${pkg.name}: Removing overlapping peerDependencies to use bundled versions: ${overlapping.join(", ")}`
);
for (const dep of overlapping) {
delete pkg.peerDependencies[dep];
}
}
}
return pkg;
}
module.exports = {
hooks: {
readPackage,
},
};
Hi there, is there any update or timeline on when this can be supported for real? For us, none of the workarounds have worked.