# Best approach for Web3Auth PnP v10 migration on React 17?

**URL:** <https://builder.metamask.io/t/best-approach-for-web3auth-pnp-v10-migration-on-react-17/958>\
**Category:** Embedded Wallets (Web3Auth)\
**Created:** [September 2, 2025, 2:42am UTC](https://builder.metamask.io/t/best-approach-for-web3auth-pnp-v10-migration-on-react-17/958 "2025-09-02T02:42:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sung](https://avatars.discourse-cdn.com/v4/letter/s/ce73a5/32.png) [@sung](https://builder.metamask.io/u/sung)\
**Post date:** [September 2, 2025, 2:42am UTC](https://builder.metamask.io/t/best-approach-for-web3auth-pnp-v10-migration-on-react-17/958/1 "2025-09-02T02:42:20Z")

</div>

> **🏛 Content from Web3Auth Community**
> 
> This topic was originally posted by **sung** on 9/2/2025.  
> This content has been migrated from our previous community forum to preserve valuable discussions.

* * *

Hi,

Our project is currently based on **React 17.0.2**.

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:

1. Is there an **officially supported or recommended way** to use Web3Auth PnP v10 with React 17(with vite)?
2. 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.)?
3. Would relying on the **react-dom/client shim workaround** cause problems in the long run?

Thank you for your guidance!

---

<div class="post-metadata">

**Author:** ![w3abot](https://avatars.discourse-cdn.com/v4/letter/w/4da419/32.png) [@w3abot](https://builder.metamask.io/u/w3abot)\
**Post date:** [September 2, 2025, 2:43am UTC](https://builder.metamask.io/t/best-approach-for-web3auth-pnp-v10-migration-on-react-17/958/2 "2025-09-02T02:43:26Z")

</div>

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:**
  1. Is there an officially supported way to use PnP v10 with React 17 (with Vite)?
  2. If not, is upgrading to React 18 the only recommended path? Are there alternatives?
  3. 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.
- The [Web3Auth React Quick Start Guide](https://web3auth.io/docs/sdk/web/react/quick-start) also specifies React 18+ as a requirement.

#### 2. **Alternatives to Upgrading React**

- **Vanilla JS SDK:** You can use the [Vanilla JS integration](https://web3auth.io/docs/sdk/web/js/quick-start) 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](https://web3auth.io/docs/sdk/web/js/quick-start) as a temporary workaround, but be aware of the limitations.
  - Plan your migration to React 18 as soon as feasible.

* * *

### **References**

- [Web3Auth React SDK Quick Start](https://web3auth.io/docs/sdk/web/react/quick-start)
- [Web3Auth Vanilla JS SDK Quick Start](https://web3auth.io/docs/sdk/web/js/quick-start)
- [Vite Troubleshooting Guide](https://web3auth.io/docs/troubleshooting/vite)

* * *

**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](https://web3auth.io/community/t/web3auth-developer-office-hours/8777)

---

<div class="post-metadata">

**Author:** ![florian.bergmann](https://avatars.discourse-cdn.com/v4/letter/f/90db22/32.png) [@florian.bergmann](https://builder.metamask.io/u/florian.bergmann)\
**Post date:** [September 8, 2025, 8:14pm UTC](https://builder.metamask.io/t/best-approach-for-web3auth-pnp-v10-migration-on-react-17/958/3 "2025-09-08T20:14:46Z")

</div>

Hey,

we actually made it work using several shims. However, as v10 functionality is way different if you were using no-modal as we did and it basically broke the entire product for us. Not sure how this will be resolved but that being said: shims is your way to go 🙂
