In this setup, we are handling social login through @web3auth/modal and implementing MPC login using @web3auth/mpc-core-kit.
Due to the React 17 limitation, we are currently using @web3auth/modal v8.12.7. However, according to the official documentation, PnP v8 will soon be shut down, so we are evaluating a migration to PnP v10.
The issue is that React 18 or higher is listed as a peerDependency, and we are not sure whether it is officially compatible with React 17.
Here’s what we tested:
Tried the official “Vanilla JavaScript” example in our React 17 project with vite@7.
Encountered the error: Could not resolve “react-dom/client”.
We worked around it by shimming react-dom/client, which made it run, but we are concerned about long-term stability.
We would like to clarify the following:
Is there an officially supported or recommended way to use Web3Auth PnP v10 with React 17(with vite)?
If not supported, is upgrading to React 18 the only recommended path? Or are there other alternatives (e.g., sticking with certain SDK versions, preferring the Vanilla integration, etc.)?
Would relying on the react-dom/client shim workaround cause problems in the long run?
Thank you for your detailed question and for outlining your current setup and migration concerns. Here’s a summary of your situation and some guidance:
Summary of Your Setup & Issue
Platform: React 17.0.2 (with Vite 7)
Current SDKs:
@web3auth/modal v8.12.7 (for social login)
@web3auth/mpc-core-kit (for MPC login)
Reason for Migration: PnP v8 is being deprecated; considering migration to PnP v10.
Problem:
PnP v10 lists React 18+ as a peer dependency.
When attempting to use the Vanilla JS example in React 17, you encountered a Could not resolve "react-dom/client" error.
You applied a shim workaround, but are concerned about long-term stability.
Questions:
Is there an officially supported way to use PnP v10 with React 17 (with Vite)?
If not, is upgrading to React 18 the only recommended path? Are there alternatives?
Is it safe to rely on the react-dom/client shim workaround?
Analysis & Recommendations
1. Official Support for React 17 + PnP v10
Web3Auth PnP v10 React SDK (@web3auth/modal/react) requires React 18+ as a peer dependency. This is because it uses APIs (like ReactDOM.createRoot) that are only available in React 18+.
There is no official support or recommended way to use the React SDK v10 with React 17.
Vanilla JS SDK: You can use the Vanilla JS integration with React 17, but you lose out on React-specific hooks and context providers.
Shim Workaround: While your shim for react-dom/client may allow things to run, this is not a recommended or stable solution for production. It may break with future updates or introduce subtle bugs.
Stick with v8 temporarily: This is not recommended as v8 will soon be deprecated and unsupported.
3. Long-Term Stability of the Shim
Using a shim for react-dom/client is not recommended for production. It’s a hack and may lead to maintenance issues, incompatibilities, or unexpected errors as the SDK or your dependencies evolve.
Recommended Path Forward
Upgrade to React 18+: This is the only fully supported and future-proof path if you want to use Web3Auth PnP v10 with all its features and official support.
If you are unable to upgrade React immediately, you can:
Use the Vanilla JS SDK as a temporary workaround, but be aware of the limitations.
Plan your migration to React 18 as soon as feasible.
If you need help with the migration to React 18 or integrating the Vanilla JS SDK in your React 17 project, let us know!
Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.
Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours