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

ianpogi5 · 2022-04-04T03:14:15Z

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 · 2022-04-07T11:55:48Z

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

Xavier-Charles · 2022-04-11T09:39:53Z

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 · 2022-04-12T01:17:02Z

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

Xavier-Charles · 2022-04-12T05:45:43Z

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 · 2022-04-13T01:02:20Z

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 · 2022-04-14T04:28:05Z

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

fahmidme · 2022-04-14T06:31:44Z

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 · 2022-04-14T07:42:30Z

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 · 2022-04-14T07:56:16Z

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 · 2022-04-18T20:00:05Z

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 · 2022-04-18T20:25:09Z

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 · 2022-05-23T12:36:12Z

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 · 2022-06-29T16:23:29Z

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 · 2022-07-08T20:04:49Z

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 · 2022-08-11T02:12:00Z

is there anyone get over it yet?

ludowkm · 2022-08-11T02:33:06Z

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 · 2022-08-11T04:02:10Z

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 · 2022-08-11T14:39:24Z

Facing a similar issue in React-ts app

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

talhaa99 · 2022-08-12T13:22:34Z

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 · 2022-08-18T14:47:58Z

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

#271

kien-ngo · 2022-08-31T04:50:38Z

Still have this issue :/

mdrahiem · 2022-09-12T04:25:34Z

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 · 2023-05-30T05:16:44Z

Try add this to your vite config:

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

ErnoW added the help wanted Extra attention is needed label Apr 13, 2022

alexnguyennz mentioned this issue Jun 30, 2022

Wallet Connect Modal Not Working?! [Vite / Replit / TSX] web3ui/web3uikit#673

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ianpogi5 commented Apr 4, 2022 •

edited

weeliem commented Apr 7, 2022 •

edited

Xavier-Charles commented Apr 11, 2022

weeliem commented Apr 12, 2022 •

edited

Xavier-Charles commented Apr 12, 2022 •

edited

ErnoW commented Apr 13, 2022 •

edited

fahmidme commented Apr 14, 2022

fahmidme commented Apr 14, 2022

Xavier-Charles commented Apr 14, 2022

Xavier-Charles commented Apr 14, 2022

georgeportillo commented Apr 18, 2022 •

edited

Xavier-Charles commented Apr 18, 2022

weeliem commented May 23, 2022

mawmawmaw commented Jun 29, 2022

luxumbra commented Jul 8, 2022

ludowkm commented Aug 11, 2022

ludowkm commented Aug 11, 2022

k0m1maybe commented Aug 11, 2022 •

edited

sarmadfaheem95 commented Aug 11, 2022 •

edited

talhaa99 commented Aug 12, 2022

amanmehra262001 commented Aug 18, 2022

kien-ngo commented Aug 31, 2022

mdrahiem commented Sep 12, 2022

dblythy commented May 30, 2023 •

edited

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

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

Comments

ianpogi5 commented Apr 4, 2022 • edited

weeliem commented Apr 7, 2022 • edited

Xavier-Charles commented Apr 11, 2022

weeliem commented Apr 12, 2022 • edited

Xavier-Charles commented Apr 12, 2022 • edited

ErnoW commented Apr 13, 2022 • edited

fahmidme commented Apr 14, 2022

fahmidme commented Apr 14, 2022

Xavier-Charles commented Apr 14, 2022

Xavier-Charles commented Apr 14, 2022

georgeportillo commented Apr 18, 2022 • edited

Xavier-Charles commented Apr 18, 2022

weeliem commented May 23, 2022

mawmawmaw commented Jun 29, 2022

luxumbra commented Jul 8, 2022

ludowkm commented Aug 11, 2022

ludowkm commented Aug 11, 2022

k0m1maybe commented Aug 11, 2022 • edited

sarmadfaheem95 commented Aug 11, 2022 • edited

talhaa99 commented Aug 12, 2022

amanmehra262001 commented Aug 18, 2022

kien-ngo commented Aug 31, 2022

mdrahiem commented Sep 12, 2022

dblythy commented May 30, 2023 • edited

ianpogi5 commented Apr 4, 2022 •

edited

weeliem commented Apr 7, 2022 •

edited

weeliem commented Apr 12, 2022 •

edited

Xavier-Charles commented Apr 12, 2022 •

edited

ErnoW commented Apr 13, 2022 •

edited

georgeportillo commented Apr 18, 2022 •

edited

k0m1maybe commented Aug 11, 2022 •

edited

sarmadfaheem95 commented Aug 11, 2022 •

edited

dblythy commented May 30, 2023 •

edited