Lesson 10: NoMoralisContextProviderError: Make sure to only call useMoralis within a <MoralisProvider> #3478

Lob12 · 2022-10-25T04:05:24Z

Lob12
Oct 25, 2022

Keep getting above error when reloading my front end

Package.json

{
  "name": "nextjs-smartcontract-lottery",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@walletconnect/web3-provider": "^1.8.0",
    "@web3auth/web3auth": "^2.1.3",
    "magic-sdk": "^10.0.0",
    "moralis-v1": "^1.11.0",
    "next": "12.3.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-moralis": "1.4.0",
    "web3uikit": "^1.0.4"
  },
  "devDependencies": {
    "eslint": "8.26.0",
    "eslint-config-next": "12.3.1",
    "prettier": "^2.7.1",
    "v1": "^1.0.0"
  }
}

app js

import "../styles/globals.css"
import { MoralisProvider } from "react-moralis"

function MyApp({ Component, pageProps }) {
    return (
        <MoralisProvider initializeOnMount={false}>
            <Component {...pageProps} />
        </MoralisProvider>
    )
}

export default MyApp

header.js

import { ConnectButton } from "web3uikit"

export default function Header() {
    return (
        <div>
            <ConnectButton moralisAuth={false} />
        </div>
    )
}

index.js

import Head from "next/head"
import Image from "next/image"
import styles from "../styles/Home.module.css"
// import ManualHeader from "../components/ManualHeader"
import Header from "../components/Header"

export default function Home() {
    return (
        <div className={styles.container}>
            <Head>
                <title>Smart Contract Lottery</title>
                <meta name="description" content="Our Smart Contract Lottery" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            {/* <ManualHeader /> */}
            <Header />
            Hello!
        </div>
    )
}

taofeekalao · 2022-11-06T12:42:21Z

taofeekalao
Nov 6, 2022

@Lob12
I had the same issue for a much longer time. Below are the steps that worked for me:

I deleted my node_modules folder.
Then, I copied the contents of package.json from the repo to replace my own.
After that, I ran the command "yarn install".

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Lesson 10: NoMoralisContextProviderError: Make sure to only call useMoralis within a <MoralisProvider> #3478

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Lesson 10: NoMoralisContextProviderError: Make sure to only call useMoralis within a <MoralisProvider> #3478

Uh oh!

Uh oh!

Lob12 Oct 25, 2022

Replies: 1 comment

Uh oh!

taofeekalao Nov 6, 2022

Lob12
Oct 25, 2022

taofeekalao
Nov 6, 2022