NextJS React MoralisProvider Error

Moralis General
#1

Iā€™m working on a project and Iā€™m getting an error NoMoralisContextProviderError: Make sure to only call useMoralis within a <MoralisProvider>

Iā€™m working on FreeCodeCampā€™s Solidity course and following the code of that course exactly, so I know the code should work, but it isnā€™t even with the same versions. Someone posted a similar issue here where they changed there react-moralis verison from ā€œ^1.3.5ā€ to ā€œ1.3.5ā€ and back, but that didnā€™t work for me (AKA I tried everything in this thread). It has something to do with the MoralisProvider server connection because when I turn initializeOnMount={false} in the MoralisProvider it removed the error. Here is my code:

_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 initializeOnMount={false} serverUrl={SERVER_URL} appId={APP_ID}>
                <Header />
                <Component {...pageProps} />
            </MoralisProvider>
        </div>
    )
}

export default MyApp

Header.js (component)

import { ConnectButton } from "web3uikit"
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={true} />
            </div>
        </nav>
    )
}

index.js

import Image from "next/image"
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>
}

package.json dependencies:

"dependencies": {
    "moralis": "1.5.11",
    "next": "12.1.5",
    "react": "18.1.0",
    "react-dom": "18.1.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"
  }
[SOLVED] TypeError: Right-hand side of 'instanceof' is not callable
#2

That seems ok, ConnectButton which uses useMoralis is inside the MoralisProvider.

Can you try using [email protected].

#3

@glad Just tried that, didnā€™t work :confused:

#4

In a new Next.js (create-next-app) project, this works with the ConnectButton from that older web3uikit version, I have these:

"moralis": "^1.11.0",
"next": "12.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-moralis": "^1.4.0",
"web3uikit": "^0.0.133"

This worked when installed with npm, if I used yarn, I encountered your error.

#5

@alex tried to do that, but it didnā€™t work. To be clear, these are the steps I took. removed yarn.lock then ran npm install. Should I be doing it some other way? This is so frustrating thank you for helping :frowning:

#6

I noticed that if I put an incorrect string as the App id and URL for my MoralisProvider I get the same error, possibly indicating that it is something going wrong in the auth like so:

<MoralisProvider appId="sa" serverUrl="da">
        <Header />
        <Component {...pageProps} />
</MoralisProvider>

Could it be that perhaps my environment variables are set incorrectly or not being read in correctly? I checked this earlier but does this look right (from my .env)

NEXT_PUBLIC_APP_ID="hMnhti7weeoLYOOJBxMyPqaM8xLLARy55IKgh53F"
NEXT_PUBLIC_SERVER_URL="https://dgfiqwjx4zct.usemoralis.com:2053/server"

Also, removing the quotes has no effect

#7

Ok, I actually was able to fix it using what was mentioned in the previous thread, I mustā€™ve been doing it wrong before. The clear steps are:

  1. Run the frontend yarn run dev
  2. With [email protected] installed run yarn add react-moralis@^1.3.5 in another terminal (DONā€™T SHUT DOWN FRONTEND)
  3. Then run yarn add [email protected]

I couldā€™ve sworn I did it exactly like that earlier and it didnā€™t work, but oh well, Iā€™m just relieved itā€™s finally fixed

3 Likes
#8

I have the same issue, but it did not work for me :frowning:

#9

Which SDK and framework versions are you using and what have you tried?

@slenn22 That was tested in a new project, and typically you would remove the node_modules folder as well. Changing to/from npm or yarn can be problematic. Great that you got past it.

#10

I am facing the same issue - "[NoMoralisContextProviderError]: Make sure to only call useMoralis within a "- with the same versions of react-moralis (1.3.5) and moralis (1.11.0).

I am not able to get past this even after trying the work around steps:

  1. Run the frontend yarn run dev
  2. With [email protected] installed run yarn add react-moralis@^1.3.5 in another terminal (DONā€™T SHUT DOWN FRONTEND)
  3. Then run yarn add [email protected]

@Dav17d: Were you able to get past this issue?

#11

Are you using Next.js and web3uikit? Which versions? What component or use of useMoralis are you doing to get that error?

Can you try in a new project create-next-app and install [email protected] and [email protected] (and web3uikit if youā€™re using), all with npm.

#12

@alex: Thank you for the inputs.

Yes I am using web3uikit (^0.0.133) with react-moralis
Note (if helpful): I am running this project from VS Code connected to WSL:Ubuntu on a Windows 11 machine.
The project was created using
create next-app --typescript .

Here is an excerpt of my packages.json.

,
  "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ā€.
Ended up getting this error on starting the frontend:

# Unhandled Runtime Error

TypeError: _ParseObject.default is not a function
##### Call Stack

###### encode
node_modules/react-moralis/lib/index.esm.js (13958:0)

###### _default
node_modules/react-moralis/lib/index.esm.js (14042:0)

###### run
node_modules/react-moralis/lib/index.esm.js (92033:0)
...

Finally, I re-ran the above steps with the following versions locked in the packages.json and did a clean npm install

"moralis": "1.11.0",
"react-moralis": "1.4.0",
"web3uikit": "0.0.133"

My issue was resolved following the steps.

In a nutshell, something seems to be wrong installing web3uikit, react-moralis and moralis using yarn add (irrespective of locking it to a specific version). However npm install seems to work.

@alex: Does Moralis team recommend using npx/ npm as opposed to yarn?

2 Likes
#13

Using npm instead of yarn on my end got past the Make sure to only call useMoralis within a <MoralisProvider> error.

I donā€™t believe this was a problem in the past; usually yarn has been fine with Moralis projects.