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

[ianpogi5]

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;

[weeliem]

Im encountered ther similar issue. Have you solved this issue?

[Xavier-Charles]

I was able to get get around the issue by loading Moralis via CDN Add <script src="https://unpkg.com/moralis@<VERSION>/dist/moralis.js"></script> to your index.html

Yeah it works in prod.

Check the docs for more info

[weeliem]

Which means you are no-longer using MoralisProvider with react-moralis?

[Xavier-Charles]

Which means you are no-longer using MoralisProvider with react-moralis?

Yeah. You will have to initialize with Moralis.start({ serverUrl, appId }); instead, then you can just call the methods throughout your app like Moralis.authenticate(). No imports needed.

[ErnoW]

If it worked on local dev, but not in production, then I assume it might have something to do with the build process..

We did have several issues with Vite apps in the past, and some custom configuration might be needed. Better out-of-the-box support for Vite apps is on the roadmap.

Do you have an error log with non-minimized code, to see where it is coming from?

[fahmidme]

I like your suggestion. But there's a Moralis is not defined error that I'm getting.

[fahmidme]

I like your suggestion. But there's a Moralis is not defined error that I'm getting.

Got it working. Had to do

import Moralis from 'moralis/node'

[Xavier-Charles]

I like your suggestion. But there's a Moralis is not defined error that I'm getting.

Got it working. Had to do

import Moralis from 'moralis/node'

Glad it's working now @fahmidme

[Xavier-Charles]

If it worked on local dev, but not in production, then I assume it might have something to do with the build process..

We did have several issues with Vite apps in the past, and some custom configuration might be needed. Better out-of-the-box support for Vite apps is on the roadmap.

Do you have an error log with non-minimized code, to see where it is coming from?

@ErnoW This issue only comes up after build and the build process doesn't error out.

[georgeportillo]

Hi all, any updates on this?

I'm trying to use the workaround, and I'm importing using import Moralis from 'moralis';

Currently getting this error AFTER the build:

Using the app pre-build works just fine, the build is the problem. I'm on a vite app.

Any way you can suggest a fix for the react-moralis side of things @Xavier-Charles?

Any help would be appreciated. I'm happy to provide more insight.

[Xavier-Charles]

Hi all, any updates on this?

I'm trying to use the workaround, and I'm importing using import Moralis from 'moralis';

Currently getting this error AFTER the build:

Using the app pre-build works just fine, the build is the problem. I'm on a vite app.

Any way you can suggest a fix for the react-moralis side of things @Xavier-Charles?

Any help would be appreciated. I'm happy to provide more insight.

Hi @georgeportillo, I think this error comes up because you are still importing react-moralis somewhere in your code base. remove react-moralis with yarn remove react-moralis or npm install react-moralis

[weeliem]

If it worked on local dev, but not in production, then I assume it might have something to do with the build process..

We did have several issues with Vite apps in the past, and some custom configuration might be needed. Better out-of-the-box support for Vite apps is on the roadmap.

Do you have an error log with non-minimized code, to see where it is coming from?

Hi, any fixes update for the vite yet?

[mawmawmaw]

Hi. Looks like there hasn't been any updates on this topic for more than a month since it was opened almost 3 months ago. Are there any fixes planned for this in the future? Or will we have to use the workaround proposed or go back to CRA?

[luxumbra]

I just hit this tonight after two weeks happily going about my business in dev with Vite & React. 🤦🏻 Comforted to see others in the same boat - I thought it was my shonky code. 😄 Would be sweet to see a fix released.

[ludowkm]

is there anyone get over it yet?

[ludowkm]

If it worked on local dev, but not in production, then I assume it might have something to do with the build process..

We did have several issues with Vite apps in the past, and some custom configuration might be needed. Better out-of-the-box support for Vite apps is on the roadmap.

Do you have an error log with non-minimized code, to see where it is coming from?

TypeError: Right-hand side of 'instanceof' is not callable at encode(../node_modules/react-moralis/lib/index.esm.js:13958:7) at default(../node_modules/react-moralis/lib/index.esm.js:14042:10) at run(../node_modules/react-moralis/lib/index.esm.js:92033:31) at run(../node_modules/react-moralis/lib/index.esm.js:91960:52) at call(../node_modules/react-moralis/lib/index.esm.js:98460:35) at tryCatch(../node_modules/react-moralis/lib/index.esm.js:8138:40) at _invoke(../node_modules/react-moralis/lib/index.esm.js:8369:22) at key(../node_modules/react-moralis/lib/index.esm.js:8194:21) at asyncGeneratorStep(../node_modules/react-moralis/lib/index.esm.js:8871:20) at _next(../node_modules/react-moralis/lib/index.esm.js:8893:9) at ? (../node_modules/react-moralis/lib/index.esm.js:8900:7) at new Promise(<anonymous>) at new e(../node_modules/react-moralis/lib/index.esm.js:4549:24) at apply(../node_modules/react-moralis/lib/index.esm.js:8889:12) at initPlugins(../node_modules/react-moralis/lib/index.esm.js:98554:29) at call(../node_modules/react-moralis/lib/index.esm.js:116501:29) at tryCatch(../node_modules/react-moralis/lib/index.esm.js:8138:40) at _invoke(../node_modules/react-moralis/lib/index.esm.js:8369:22) at key(../node_modules/react-moralis/lib/index.esm.js:8194:21) at asyncGeneratorStep(../node_modules/react-moralis/lib/index.esm.js:8871:20) at _next(../node_modules/react-moralis/lib/index.esm.js:8893:9) at ? (../node_modules/react-moralis/lib/index.esm.js:8900:7) at new Promise(<anonymous>) at new e(../node_modules/react-moralis/lib/index.esm.js:4549:24) at apply(../node_modules/react-moralis/lib/index.esm.js:8889:12) at start(../node_modules/react-moralis/lib/index.esm.js:116529:23) at call(../node_modules/react-moralis/lib/index.esm.js:116963:62) at step(../node_modules/react-moralis/lib/index.esm.js:97:23) at next(../node_modules/react-moralis/lib/index.esm.js:78:53) at ? (../node_modules/react-moralis/lib/index.esm.js:71:71) at new Promise(<anonymous>) at __awaiter$k(../node_modules/react-moralis/lib/index.esm.js:67:12) at _initialize(../node_modules/react-moralis/lib/index.esm.js:116949:16) at h(../node_modules/react-moralis/lib/index.esm.js:116986:9) at fk(../node_modules/react-dom/cjs/react-dom.production.min.js:262:359) at Nf(../node_modules/scheduler/cjs/scheduler.production.min.js:18:343) at gg(../node_modules/react-dom/cjs/react-dom.production.min.js:122:325) at Oj(../node_modules/react-dom/cjs/react-dom.production.min.js:261:308) at d(../node_modules/react-dom/cjs/react-dom.production.min.js:261:215) at V(../node_modules/scheduler/cjs/scheduler.production.min.js:16:224) at _.port1.onmessage(../node_modules/scheduler/cjs/scheduler.production.min.js:12:346)

This is the non-minimized code, is there any idea on it? @ErnoW

[k0m1maybe]

Ummmm that's strange I just have the same issue after updating to the newest moralis library(with the v1) today.

I think it's the problem of uninstalling moralis? cuz it seems like these's some import xx from "moralis" remained in the modules for example MoralisContext.d.ts

[sarmadfaheem95]

Facing a similar issue in React-ts app

Has anyone found a better solution instead of removing react-moralis @ErnoW ?

[talhaa99]

This issue still persists in the latest version as of now @1.4.x . The workaround was to fall back to a previous version @1.3.5 to make it work. Please fix the issue in the upcoming release so everyone can be at ease.

[amanmehra262001]

I had the same issue and following this resolved it for me.

https://github.com/MoralisWeb3/react-moralis/issues/271

[kien-ngo]

Still have this issue :/

[mdrahiem]

Which means you are no-longer using MoralisProvider with react-moralis?

Yeah. You will have to initialize with Moralis.start({ serverUrl, appId }); instead, then you can just call the methods throughout your app like Moralis.authenticate(). No imports needed.

Then we can't even use hooks and stuff. So there's no point in using react-moralis, instead we can do just native js implementation in React app and that's what is working for me too..

[dblythy]

Try add this to your vite config:

 resolve: {
    alias: {
      '@': path.resolve(__dirname, '/src'),
       parse: path.resolve(__dirname, '/node_modules/parse/dist/parse.min.js')
    },
},