NextJS React MoralisProvider Error

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"
  }

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

Can you try using [email protected].

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

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.

@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:

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

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

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

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.

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?

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.

@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

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.