Getting error while migrating to v10 (REACT-NO-MODAL)

Help - Plug n Play PnP Web SDKs
1

Hi while migrating to v10, got the following error,

# Server Error
ReferenceError: Cannot access ‘setProvider’ before initialization
This error happened while generating the page. Any console logs will be displayed in the terminal window.

Client Side integration:

“@web3auth/no-modal”: “^10.0.3”,

{...}

Usage
import {
AUTH_CONNECTION,
AUTH_CONNECTION_TYPE,
WALLET_CONNECTORS,
} from “@web3auth/no-modal”;
import {
useSwitchChain,
useWeb3Auth,
useWeb3AuthConnect,
useWeb3AuthDisconnect,
useWeb3AuthUser,
} from “@web3auth/no-modal/react”;

const {
connect,
isConnected: isWeb3authConnected,
loading: isWeb3AuthConnecting,
error: connectError,
} = useWeb3AuthConnect();
const {
web3Auth,
isInitializing: isWeb3AuthInitializing,
provider: web3AuthProvider,
status: web3authStatus,
} = useWeb3Auth();
const { disconnect: logout } = useWeb3AuthDisconnect();
const { userInfo } = useWeb3AuthUser();

2

Here’s a summary of your issue for the support team:

User Issue Summary

  • SDK: Web3Auth Plug and Play (PnP) No Modal SDK

  • SDK Version: @web3auth/no-modal@^10.0.3

  • Platform: React (using React hooks-based integration)

  • Migration Context: Upgrading from v9 to v10 as per Migration Guide

  • Issue:
    Upon migrating to v10, the following error occurs during page generation:

    ReferenceError: Cannot access 'setProvider' before initialization

    This is a server error, and logs appear in the terminal window.

  • Integration Details:

    • Using <Web3AuthProvider config={web3AuthOptions}> inside <QueryClientProvider>.
    • Imports and usage follow v10 hooks-based API:
      • useWeb3AuthConnect, useWeb3Auth, useWeb3AuthDisconnect, useWeb3AuthUser from @web3auth/no-modal/react
    • Example usage:
      const { connect, isConnected, loading, error } = useWeb3AuthConnect();
const { web3Auth, isInitializing, provider, status } = useWeb3Auth();
const { disconnect } = useWeb3AuthDisconnect();
const { userInfo } = useWeb3AuthUser();

  • Migration Steps Already Taken:

    • Installed latest v10 SDK
    • Removed deprecated packages
    • Updated to hooks-based usage
    • Moved configuration to Web3Auth Developer Dashboard

Next Steps & Suggestions:

  1. Check SSR/CSR Context:
    The error “Cannot access ‘setProvider’ before initialization” often appears if a hook or context value is accessed before the provider is initialized—especially in server-side rendering (SSR) environments like Next.js.

    • If using SSR, ensure all Web3Auth hooks/components are only used client-side (e.g., inside useEffect or after checking typeof window !== "undefined").
    • See React SSR Note in Docs for best practices.

  2. Provider Initialization:
    Double-check that your <Web3AuthProvider> is wrapping all components that use the Web3Auth hooks, and that web3AuthOptions is correctly set up per the v10 docs.

  3. Code Snippet Request:
    To help debug further, could you please share:

    • The full initialization of web3AuthOptions
    • The structure of your main App/component tree (where <Web3AuthProvider> is placed)
    • (Optional) A screenshot of the error stack trace from your terminal or browser console

References:

Let us know if you can provide the above code snippets or if you have any additional context (e.g., using Next.js, CRA, Vite, etc.). This will help the support team to quickly identify the root cause and suggest a fix!

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