Lesson 15: React Moralis Error: "Right-hand side of 'instanceof' is not callable" #1786

silaslenihan · 2022-08-14T17:45:17Z

silaslenihan
Aug 14, 2022

I'm at 26:45:13 in the course and following along directly with Patrick, but I'm getting an error on my frontend saying "Right-hand side of 'instanceof' is not callable." I'm not sure exactly what this is referring to, it doesn't seem to be caused by the newest additions (adding a Moralis Query to find the active Items) because when I comment out that code the error doesn't go away.

Here is my index.js

import styles from "../styles/Home.module.css"
import { useMoralisQuery } from "react-moralis"

export default function Home() {
    const { data: listedNfts, isFetching: fetchingListedNfts } = useMoralisQuery(
        "ActiveItem",
        (query) => query.limit(10).descending("tokenId")
    )
    console.log(listedNfts)
    return <div className={styles.container}>Hi!</div>
}

My _app.js:

import { MoralisProvider } from "react-moralis"
import Header from "../components/Header"
import Head from "next/head"

const APP_ID = process.env.NEXT_PUBLIC_APP_ID
const SERVER_URL = process.env.NEXT_PUBLIC_SERVER_URL

function MyApp({ Component, pageProps }) {
    return (
        <div>
            <Head>
                <title>NFT Marketplace</title>
                <meta name="description" content="NFT Marketplace" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <MoralisProvider appId={APP_ID} serverUrl={SERVER_URL}>
                <Header />
                <Component {...pageProps} />
            </MoralisProvider>
        </div>
    )
}

export default MyApp

and my Header.js

import Link from "next/link"

export default function Header() {
    return (
        <nav className="p-5 border-b-2 flex flex-row justify-between items-center">
            <h1 className="py-4 px-4 font-bold text-3xl">NFT Marketplace</h1>
            <div className="flex flex-row items-center">
                <Link href="/">
                    <a className="mr-4 p-6">Home</a>
                </Link>
                <Link href="/sell-nft">
                    <a className="mr-4 p-6">Sell NFT</a>
                </Link>
                <ConnectButton moralisAuth={false} />
            </div>
        </nav>
    )
}

I'm pretty stumped as this code seems to match Patrick's directly... unless I'm missing something. Any ideas?

Answered by shoaibshebi

Aug 14, 2022

Hey @silaslenihan

use these version in your package.json


"dependencies": {
    "magic-sdk": "^9.0.0",
    "moralis": "1.11.0",
    "next": "^12.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-moralis": "1.3.5",
    "web3uikit": "^0.0.133"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.5",
    "dotenv": "^16.0.0",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.5",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.24"
  }

just delete the node_modules and after replacing your package.json lines with these can do the magic

👍

View full answer

WillyEth · 2022-08-14T18:05:55Z

WillyEth
Aug 14, 2022

I had the same issue you need to go and downgrade. copy over the JSON from the GITHUB and do a yarn install

5 replies

silaslenihan Aug 14, 2022
Author

Downgrade moralis? I have the same package.json that's in the nextjs-nft-marketplace-fcc repo already...

shoaibshebi Aug 14, 2022

@silaslenihan
Please show me here

WillyEth Aug 14, 2022

actually i just ran and having the same issue now

silaslenihan Aug 14, 2022
Author

@shoaibshebi Continued the discussion in your comment

silaslenihan Aug 15, 2022
Author

@WillyEth You ever figure it out? I'm still stuck

shoaibshebi · 2022-08-14T18:21:05Z

shoaibshebi
Aug 14, 2022

Hey @silaslenihan

use these version in your package.json


"dependencies": {
    "magic-sdk": "^9.0.0",
    "moralis": "1.11.0",
    "next": "^12.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-moralis": "1.3.5",
    "web3uikit": "^0.0.133"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.5",
    "dotenv": "^16.0.0",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.5",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.24"
  }

just delete the node_modules and after replacing your package.json lines with these can do the magic

👍

28 replies

0xBandito Aug 23, 2022

thanks.

I did and getting the ENOENT again

shoaibshebi Aug 23, 2022

What is the complete error is?

try this one


Keep the app running 
Remove the react-moralis using `yarn remove react-moralis`
Close the running app terminal
reinstall pkg using `yarn add react-moralis@1.3.5`
Run the app again

Actually it's the err from Moralis side, they are not fixing it

shoaibshebi Aug 23, 2022

@0xBandito great job

0xBandito Aug 23, 2022

@shoaibshebi thought I had it figured out but after refreshing I got the NoMoralisContextProviderError: Make sure to only call useMoralis within a <MoralisProvider> error

works fine after removing my connect button imported from the web3uikit but of couse ill lose that functionality

shoaibshebi Aug 23, 2022

You can use web3.js to connect with the metamask, or i think we can even use ethers for it as well

shoaibshebi · 2022-08-14T18:35:28Z

shoaibshebi
Aug 14, 2022

You people can also check this discussion on Moralis platform, the same things I dicussed here and then after solving the issue helping you people here
https://forum.moralis.io/t/moralisprovider/18577

0 replies

ss-stringblock · 2022-08-19T12:18:53Z

ss-stringblock
Aug 19, 2022

For anyone trying the typescript version of Lesson 15 developing on WSL:Ubuntu (Windows 10/11), I ran into a ton of issues getting react-moralis and web3uikit work.

I finally found a workaround detailed here:
https://forum.moralis.io/t/nextjs-react-moralisprovider-error/18605/11

In a nut shell, I had to use npm install as opposed to yarn to get the code working.

And here is the excerpt of my packages.json that finally worked:

  "dependencies": {
    "ethers": "^5.6.9",
    "magic-sdk": "^9.0.0",
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "moralis": "1.11.0",
    "react-moralis": "1.4.0",
    "web3uikit": "0.0.133"
  },
  "devDependencies": {
    "@types/node": "18.6.2",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "autoprefixer": "^10.4.8",
    "eslint": "^8.20.0",
    "eslint-config-next": "^12.2.3",
    "postcss": "^8.4.14",
    "prettier": "^2.7.1",
    "tailwindcss": "^3.1.6",
    "ts-node": "^10.9.1",
    "typescript": "4.7.4"
  }

Deleted yarn.lock and node_modules folder and tried a fresh install using “npm install”.

1 reply

nebelmeerwanderer1 Aug 30, 2022

@ss-stringblock : Appreciate it! this works

shoaibshebi · 2022-08-22T15:41:33Z

shoaibshebi
Aug 22, 2022

If this method doesn't work for someone, do this

Keep the app running 
Remove the react-moralis using `yarn remove react-moralis`
reinstall it using `yarn add react-moralis@1.3.5`

It works pretty fine than the previous method

2 replies

impy1477 Sep 1, 2022

I don't know how to thank u it worked. tnx a lot

shoaibshebi Sep 1, 2022

@impy1477 no worries :) cheers

shoaibshebi · 2022-08-23T04:15:00Z

shoaibshebi
Aug 23, 2022

These combinations are also running fine


"dependencies": {
    "magic-sdk": "^9.0.0",
    "moralis": "1.11.0",
    "next": "^12.2.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-moralis": "^1.3.5",
    "web3uikit": "^0.0.133"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.5",
    "dotenv": "^16.0.0",
    "eslint": "8.14.0",
    "eslint-config-next": "12.1.5",
    "postcss": "^8.4.12",
    "tailwindcss": "^3.0.24"
  }

0 replies

shoaibshebi · 2022-08-27T09:57:18Z

shoaibshebi
Aug 27, 2022

👉 👉 Those blockchain developers who are done with the Lesson#15 repo, they can go to this thread #2107 :

🔥🔥🔥🔥🔥🔥
📢 Big announcement: Lesson#15 feature enhancement as a portfolio project #2107

0 replies

nehal2210 · 2022-08-30T06:34:32Z

nehal2210
Aug 30, 2022

This Combination is works for me

"dependencies": {
    "magic-sdk": "^9.0.0",
    "moralis": "1.11.0",
    "moralis-admin-cli": "^2.1.16",
    "next": "12.1.5",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "react-moralis": "1.4.0",
    "web3uikit": "^0.0.133"
  }

and I installed it, while my app is running on the other terminal.

6 replies

nehal2210 Aug 30, 2022

when I use , UseNotification in my index.js , agains through error

shoaibshebi Aug 30, 2022

The finest solution for this will be to clone this project https://github.com/PatrickAlphaC/nextjs-nft-marketplace-moralis-fcc and then keep the project structure as it is and replace all the other dev files with yours like /pages /components and so on

nebelmeerwanderer1 Aug 30, 2022

@nehal2210

I encourage you to try out @ss-stringblock 's suggestion above. the magic trick is to use 'npm install' instead of 'yarn'

azharul-lincoln Sep 4, 2022

The finest solution for this will be to clone this project https://github.com/PatrickAlphaC/nextjs-nft-marketplace-moralis-fcc and then keep the project structure as it is and replace all the other dev files with yours like /pages /components and so on

Thank you. I just did this and looks like the connect button stopped throwing errors :)

shoaibshebi Sep 4, 2022

@azharul-lincoln Cheers :)

Lesson 15: React Moralis Error: "Right-hand side of 'instanceof' is not callable" #1786

Uh oh!

Uh oh!

Replies: 8 comments · 42 replies

Uh oh!

Uh oh!

silaslenihan Aug 14, 2022 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

silaslenihan Aug 14, 2022 Author

Uh oh!

silaslenihan Aug 15, 2022 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 8 comments 42 replies

silaslenihan Aug 14, 2022
Author

silaslenihan Aug 14, 2022
Author

silaslenihan Aug 15, 2022
Author