NoMoralisContextProviderError: Make sure to only call useMoralis within a <MoralisProvider> #2091

Moralis General
#1

Hello,

I know that this error is common now, but none of the methods mentioned in other discussions worked for me.

Package.json

{
  "name": "nextjs-nft-marketplace-fcc",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "moralis:sync": "moralis-admin-cli connect-local-devchain --chain hardhat --moralisSubdomain lkei3yi1kglb.usemoralis.com --frpcPath ./frp/frpc",
    "moralis:cloud": "moralis-admin-cli watch-cloud-folder --moralisSubdomain lkei3yi1kglb.usemoralis.com --autoSave 1 --moralisCloudfolder ./cloudFunctions"
  },
  "dependencies": {
    "@web3uikit/core": "^0.1.5",
    "@web3uikit/icons": "^0.1.5",
    "@web3uikit/web3": "^0.1.5",
    "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"
  }
}

Error:

Server Error
NoMoralisContextProviderError: Make sure to only call useMoralis within a  <MoralisProvider>
#2

What have you tried?

Can you try [email protected] and [email protected] in a new Next.js project, all installed with npm.

Just to clarify, you have set up your MoralisProvider at your app/entry component?

#3

Thanks @alex

here is my app.js

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

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

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;

will do this as you said, Iā€™m using the yarn package.
I will run it in the same command of:
yarn add [email protected] [email protected]

#4

try yarn add -E [email protected] [email protected] to get the exact version

NoMoralisContextProviderError Nextjs
#5

Yes but instead you would use npm install e.g. npm install [email protected].