react-moralis: Vite + React production build error: TypeError: Right-hand side of 'instanceof' is not callable

I’ve got a basic Vite + React-TS template. Then added the codes found from Connect with React.

Initially it didn’t work throwing some error on local dev. After a quick google I added @walletconnect/web3-provider which fixes the issue. Metamask login works on local dev.

I then proceeded to build it and deploy. When loading the deployed website, console shows the error:

Uncaught (in promise) TypeError: Right-hand side of 'instanceof' is not callable
    at b (index.9aaefe7d.js:42:14910)
    at P (index.9aaefe7d.js:42:16021)
    at Object.run (index.9aaefe7d.js:56:186525)
    at p (index.9aaefe7d.js:56:186094)
    at Function.<anonymous> (index.9aaefe7d.js:59:9853)
    at m (index.9aaefe7d.js:41:41888)
    at Generator._invoke (index.9aaefe7d.js:41:43870)
    at Generator.next (index.9aaefe7d.js:41:42401)
    at r (index.9aaefe7d.js:41:48132)
    at f (index.9aaefe7d.js:41:48317)

main.tsx

import React from "react";
import ReactDOM from "react-dom";
import { MoralisProvider } from "react-moralis";
import "./index.css";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider
      serverUrl={import.meta.env.VITE_MORALIS_SERVER_URL}
      appId={import.meta.env.VITE_MORALIS_APP_ID}
    >
      <App />
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

App.tsx

import React from "react";
import "./App.css";
import { useMoralis } from "react-moralis";

function App() {
  const {
    authenticate,
    isAuthenticated,
    isAuthenticating,
    user,
    account,
    logout,
  } = useMoralis();

  const login = async () => {
    if (!isAuthenticated) {
      await authenticate({ signingMessage: "Log in using Moralis" })
        .then(function (user) {
          console.log("logged in user:", user);
          console.log(user!.get("ethAddress"));
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  };

  const logOut = async () => {
    await logout();
    console.log("logged out");
  };

  return (
    <div>
      <h1>Moralis Hello World!</h1>
      <button onClick={login}>Moralis Metamask Login</button>
      <button onClick={logOut} disabled={isAuthenticating}>
        Logout
      </button>
    </div>
  );
}

export default App;