NEXTJS deploy in Vercel return 500 error in Login Modal and Web3Auth.initModal

[zxcvb1088]

When asking for help in this category, please make sure to provide the following details:

• SDK Version(package.json):

    "@web3auth/base": "^8.0.0",
    "@web3auth/ethereum-provider": "^8.0.1",
    "@web3auth/modal": "^8.0.1",
    "@web3auth/openlogin-adapter": "^8.0.1",
    "@web3auth/torus-evm-adapter": "^8.0.1",
    "@web3auth/web3auth-wagmi-connector": "^6.0.0",
    "@rainbow-me/rainbowkit": "2.0.0",
    "@safe-global/auth-kit": "^1.2.1",
    "@tanstack/react-query": "^5.29.0",
    "viem": "^2.9.9",
    "wagmi": "^2.5.19"

• Platform:
  “next”: “^13.4.19” in Vercel
• Browser Console Screenshots:
  It will return this error in Vercel, but work fine in local
  
  

Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.

const config = getDefaultConfig({
  appName: "ICHICHAIN",
  projectId: "04309ed1007e77d1f119b85205bb779d",
  chains: [polygon, polygonMumbai],
  transports: {
    [polygon.id]: http(),
    [polygonMumbai.id]: http(),
  },
  wallets: [
    {
      groupName: "Recommended",
      wallets: [rainbowWallet, rainbowWeb3AuthConnector, metaMaskWallet],
    },
  ],
});
const clientId = process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID || ""; // get from https://dashboard.web3auth.io

const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: "0x13881", // hex of 80001, polygon testnet
  rpcTarget: "https://rpc.ankr.com/polygon_mumbai",
  displayName: "Polygon MATIC Testnet",
  blockExplorerUrl: "https://mumbai.polygonscan.com/",
  ticker: "MATIC",
  tickerName: "MATIC",
  logo: "https://cryptologos.cc/logos/polygon-matic-logo.png",
};

const privateKeyProvider = new EthereumPrivateKeyProvider({
  config: { chainConfig },
});

const web3AuthInstance = new Web3Auth({
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.TESTNET,
  privateKeyProvider,
  uiConfig: {
    mode: "dark",
    useLogoLoader: true,
    logoLight: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
    logoDark: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
    defaultLanguage: "en",
    theme: {
      primary: "#768729",
    },
    uxMode: UX_MODE.REDIRECT,
  },
});

export const rainbowWeb3AuthConnector = (): Wallet => ({
  id: "web3auth",
  name: "web3auth",
  rdns: "web3auth",
  iconUrl: "https://web3auth.io/images/web3authlog.png",
  iconBackground: "#fff",
  installed: true,
  downloadUrls: {},
  createConnector: (walletDetails: WalletDetailsParams) =>
    createWagmiConnector((config) => ({
      ...Web3AuthConnector({
        web3AuthInstance,
      })(config),
      ...walletDetails,
    })),
});

[TomTom]

Hi @zxcvb1088,

I just wanted to let you know that I’m looking into your issue and will provide you with an answer as soon as possible. Thank you for your patience and understanding as we work to resolve this for you.

[zxcvb1088]

I trying to reproduce this error on a minimal project.
https://github.com/Chen-Hsien/test
It use the w3a nextjs example combine rainbow kit example.
and will return error too.

Hope this update will help your team.

Thanks!

[TomTom]

Hi @zxcvb1088 ,

As I can see in your example … you are not using ConnectButton for the ranbowkit

import {  ConnectButton } from "@rainbow-me/rainbowkit";

... 


<ConnectButton />

check this code:

function BlockchainProvider({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <ConnectButton />
          {children}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

and try to delete the example login.

Please contact me if the problem persist

[zxcvb1088]

I’m still alert this error. After add the connect wallet button.

[TomTom]

hi @zxcvb1088

I hope you are doing well

t’s working for me ok

Check the site: https://test-vercel-rainbow.vercel.app/

please try to use this configuration (check SAPPHIRE_DEVNET and the zindex)

const web3AuthInstance = new Web3Auth({
  clientId,
  web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET,
  privateKeyProvider,
  uiConfig: {
    mode: "dark",
    useLogoLoader: true,
    logoLight: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
    logoDark: "https://cryptologos.cc/logos/ethereum-eth-logo.png",
    defaultLanguage: "en",
    theme: {
      primary: "#768729",
    },
    uxMode: UX_MODE.REDIRECT,
    modalZIndex: "2147483647"
  },
});

Please contact me if the problems are still there.