TypeError: Class extends value undefined is not a constructor or null at torusEvmAdapter.esm.f28111a1.js:32:2329

[qqqllppp]

When I run:

await web3auth_.initModal()

I am getting this error:

TypeError: Class extends value undefined is not a constructor or null
at torusEvmAdapter.esm.f28111a1.js:32:2329

This only occurs in production. In dev everthing is ok.

Printing out the web3auth_ object returns a "kTe" object with status = "not_ready". Whereas running in my localhost, the web3auth object is called "Web3Auth" with status = "ready".

I am using a vite + react setup

Code snippet:

useEffect(() => {
        const init = async () => {
            setIsLoggingIn(true)
            try {

                const web3auth_ = new Web3Auth({
                    clientId: 'BCra18FhoqHZBjima6njP0JKotW1lSDCyjdhcyuHpj8WO_0AbQ04_psVRM-5XV9DpUFYGRbct78l5JVN4qvskh0',
                    chainConfig: {
                        chainNamespace: 'eip155',
                        chainId: '0x89',
                        rpcTarget: "https://polygon-rpc.com", // This is just a placeholder, I am actually using my own private RPC target (both results same)
                        displayName: "Polygon Mainnet",
                        blockExplorer: "https://polygonscan.com/",
                        ticker: "MATIC",
                        tickerName: "Matic",
                    },
                    uiConfig: { appLogo: "https://raw.githubusercontent.com/junhuang-ho/miscellaneous/64fc258aefb53d20b6e520aa44c7e5be2bf10b06/l3-t1-crop.svg" },
                    authMode: 'DAPP',
                    storageKey: 'session'//'local'
                });

                await web3auth_.initModal()     // <----------- FAILS HERE

                setWeb3Auth(web3auth_)
                setIsLoggingIn(false)

                const provider = await web3auth_.connect()

       
            } catch (error) {
                console.error(error);
            } 
        };
            init()
    }, [selectedChain]);

[qqqllppp]

Solution: https://stackoverflow.com/a/73362233/19776131

I think it has to do with vite.
I dont want to close this yet as I am hoping there will be a more permanent solution that comes with the next update?

[yashovardhan]

Hey @junhuang-ho

I tried to replicate this issue. For me dev and preview after build work fine enough. However there were errors from web3.js - which is an open issue from their end: web3/web3.js#4992

You can check my sample app here. Let me know how else I can replicate your error.

[qqqllppp]

@yashovardhan
repo to reproduce: https://github.com/junhuang-ho/test-vite-react-web3auth

1. After yarn run build & yarn run preview ---> the error should occur
2. exit preview, go to vite.config.js and uncomment this part:

// resolve: {
// alias: {
// "@web3auth/web3auth": '@web3auth/web3auth/dist/web3auth.umd.min.js',
// }
// },

3. Once again, yarn run build & yarn run preview --> no more error, web3auth login modal should auto appear

Notice in package.json that I did not install web3.js or ethers.js for the error to occur. But I am not sure if any other repos uses it as a dependency or not.