Error in production in vue, TypeError: Right-hand side of ‘instanceof’ is not callable

Moralis General
#12

Also having this issue, has anyone been able to resolve it? I’m deploying from a vite app

2 Likes
#13

I’m also having the same issue guys. Any workaround?

#14

Have you seen this topic?

1 Like
#15

Yes, we did already and the error persists.

#16

Ok. What solutions have you tried from that topic?

I will spend some time today with a Vite/React/Moralis project to have a look.

1 Like
#17

We’ve tried all solutions so far such as replacing react-moralis for moralis sdk, configuring commonjs vite plugin and more. Right now we are working on the moralis sdk package itself to see if we can do something. I will keep you guys updated.

#18

I have not been able to find a solution. For me the error only happens when using MoralisProvider; seems to be related to bundling. Unfortunately not using MoralisProvider is not really a solution as that negates the purpose of react-moralis entirely.

1 Like
#19

Hi everyone, I actually found a solution for my problem, and maybe you guys are coming across the same problem.

I got rid of this error and I was able to build successfully my project:

Parsing error: Invalid right-hand side in an assignment expression

The problem I found is in 3 files (The image attached has the fixes already):

image
image1018×523 75.6 KB

Basically, you will have to remove the function interopRequireDefault() from imports in three files:
node_modules/moralis/lib/browser/encode.js
node_modules/moralis/lib/browser/decode.js

  • ParseFile
  • ParseGeoPoint
  • ParsePolygon
  • ParseObject
  • ParseACL
  • ParseOp
  • ParseRelation

and in the file node_modules/moralis/lib/browser/Cloud.js

  • ./decode
  • _encode
  • ParseError
  • ParseQuery

Unfortunately, this is inside the moralis package so maybe someone will see this post and will improve it, the Parse files are actually coming with a default object duplicated because of this function, and maybe the way vite is building the project. (I’m not sure)

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : {
    "default": obj
  };
}

module.exports = _interopRequireDefault, module.exports.__esModule = true, module.exports["default"] = module.exports;

as the example below:

{
   default: {
    _esModule: true,
    default: {}
 }
}

Hopefully, it can be helpful for anyone around here who was struggling to build the react project with Vite because of Moralis SDK.

2 Likes
#20

Wonderful, can you please post this on the Moralis GitHub SDK page?

1 Like
#21

Sure @alex, I’ll try to do this as soon as possible.

#22

Hi @degueba are you able to post it in Moralis Github SDK? I would like to track the issue.

#23

Hi guys, I was going to post it in Moralis Github SDK, however I found a better way to solve the issue.

1 - You will remove react-moralis from your repository
2 - Add this line of code in your index.html

<!-- Moralis -->
    <script src="https://unpkg.com/[email protected]/dist/moralis.js"></script>
    <script>
      window.Moralis = Moralis;
    </script>
<!---->

3 - Now everything that you want to use from Moralis you should use this way:
window.Moralis.FUNCTION()

Such as the following to start the connection.

window.Moralis.start({
    serverUrl: SERVER_URL,
    appId: APP_ID,
  });
#24

Thank you for this suggestion. I was able to get Moralis to play nice with SvelteKit in production following a similar approach in my app.html file.

I’ll also make a note that if anyone also wants window.Moralis to be fully typed, they still install the Moralis SDK from NPM, and then declare a global interface. In Sveltekit this is done in app.d.ts but I’m sure Vue and React follow a similar approach.

import type Moralis from 'moralis/types';

declare global {
  interface Window {
    Moralis: Moralis;
  }
}

I know the Moralis SDK is undergoing a revamp, so I do hope the team will consider fully supporting frameworks that are built around Vite so we don’t have to use these hacky workarounds.

1 Like
#25

Hi!

Has there been any updates/fixes to this issue?
I’m getting the same “TypeError: Right-hand side of ‘instanceof’ is not callable” error when building a Vite+React App.
I would love to avoid going back to CRA, please.

Thanks!

#26

There’s an issue opened regarding that https://github.com/MoralisWeb3/react-moralis/issues/228

#27

Thanks. Just commented on the issue but it seems there are no proposed solutions yet besides the CDN workaround.

#28

is there anyone get over it yet?

#29

Can you make a new thread with more details please.

#30

it relates to the current as well asl the current was not resolved so why do we need to create new thread?
Here is full log i got:

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>)
#31

Are you using Vue/Vite like the original issue? We need more info e.g. your project’s dependencies.