Uncaught TypeError: ethereum.on is not a function

Moralis General
#1

Opera Browser - DevTools -

Console && Sources Tab:

Screenshot (35)
Screenshot (35)1920×923 156 KB

Sources Tab:

  /**
     * Assign web3 Listener to handle change of accounts
     *
     * Important!: these eventListeners cannot be cleaned up, so don't reassign it
     * See https://github.com/MetaMask/metamask-extension/issues/10873
     *
     * The drawback of this is that we cannot update these function via a React state
     * // TODO: find a way to work around this
     */
    useEffect(function () {
        if (hasOnAccountChangeListener) {
            return;
        }
        if (!window) {
            console.warn("No window object found");
            return;
        }
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        var ethereum = window.ethereum;
        if (!ethereum) {
            console.warn("No window.ethereum found");
            return;
        }
        ethereum.on("accountsChanged", function (accounts) { return __awaiter(void 0, void 0, void 0, function () {
            var account;
            return __generator(this, function (_a) {
                account = accounts[0];
                if (onAccountChanged) {
                    onAccountChanged(account);
                }
                return [2 /*return*/];
            });
        }); });
        setHasOnAccountChangeListener(true);
    }, [hasOnAccountChangeListener]);
    var isAuthenticated = auth.state === AuthenticationState.AUTHENTICATED;
    var isUnauthenticated = auth.state === AuthenticationState.UNAUTHENTICATED;
    var isAuthenticating = auth.state === AuthenticationState.AUTHENTICATING;
    var hasAuthError = auth.state === AuthenticationState.ERROR;
    var isLoggingOut = auth.state === AuthenticationState.LOGGING_OUT;
    var isAuthUndefined = auth.state === AuthenticationState.UNDEFINED;
    return {
        auth: auth,
        authenticate: authenticate,
        signup: signup,
        login: login,
        logout: logout,
        authError: auth.error,
        isAuthenticated: isAuthenticated,
        isUnauthenticated: isUnauthenticated,
        isAuthenticating: isAuthenticating,
        hasAuthError: hasAuthError,
        isLoggingOut: isLoggingOut,
        isAuthUndefined: isAuthUndefined,
    };
};

_app.tsx:


<MoralisProvider appId={APP_ID} serverUrl={SERVER_URL}>

        <MoralisDappProvider>

          <ThemeProvider enableSystem={false} attribute="class">

            <Provider store={store}>

                {/* <MenuRoute><Component {...pageProps} /></MenuRoute> */}

            </Provider>

          </ThemeProvider>

        </MoralisDappProvider>

      </MoralisProvider>

I can’t debug this. Even when i comment out my nested
<Component {...pageProps} />
or individual components in the app, this doesn’t go away.

Note: Works completely fine on Chrome/ Brave and Firefox

#2

Hi @TokenSoft. It’s easier to use Moralis events for this. Take a look at Events

Example:

const { Moralis } = useMoralis();
useEffect(() => 
  Moralis.onAccountsChanged(async function (accounts) {
    console.log(accounts);
  });
 )
1 Like