[SOLVED] MoralisProvider

Hey @cryptokid sir

Can you please check it with me, I’m getting this error on providing these two props in the MoralisProvider
<MoralisProvider appId={APP_ID} serverUrl={SERVER_URL}>

Thanks

What version of Moralis sdk are you using?

“moralis”: “^1.5.11”,
“react-moralis”: “^1.3.5”,

Here is the code

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

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}>
        <NotificationProvider>
          <Header />
          <Component {...pageProps} />
        </NotificationProvider>
      </MoralisProvider>
    </div>
  );
}

export default MyApp;

these are the installed dependencies? I would not expect to see issues with those dependencies

you could try this combination:

I tried but still getting err

here is the package.json deps

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

maybe you can pin this one too to a specific version

Wooow

It worked. Thanks a lot @cryptokid

1 Like

Hey

Can you please also have a look at this

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

I am wrapping my all components in MoralisProvider but its giving the error;
here is code;

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}>
        {/* <NotificationProvider> */}
        <Header />
        <Component {...pageProps} />
        {/* </NotificationProvider> */}
      </MoralisProvider>
    </div>
  );
}

I have commented all the usage of useMoralis() hook , but its still giving this error

Thanks :blush:

Where reform you are getting that error? From what line?

its not showing the line , just throwing

Here in index.js file i commented this line of useMoralis, but its not working


export default function Home() {
  // const { isWeb3Enabled } = useMoralis();
  const isWeb3Enabled = true;
  const { data: listedNfts, isFetching: fetchingListedNfts } = useMoralisQuery(
    // TableName
    // Function for the query
    "ActiveItem",
    (query) => query.limit(10).descending("tokenId")
  );
  console.log(listedNfts);

In what file you added this?

I have add it in _app.js file, as i am working on the Next.js

here is the whole file

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

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

const MoralisContextProvider = dynamic(
  () => import("../context/MoralisContext"),
  {
    ssr: false,
  }
);

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}>
        {/* <NotificationProvider> */}
        <Header />
        <Component {...pageProps} />
        {/* </NotificationProvider> */}
      </MoralisProvider>
    </div>
  );
}

export default MyApp;

I tried using MoralisContextProvider, by tellin ssr:false - but not working even then

shouldn’t that be included in index.js, where are you using the app.js, what is the file that has the error?

Nop, its next.js , and its root file is _app.js

btw, here is the index.js file

import Image from "next/image";
import styles from "../styles/Home.module.css";
import { useMoralisQuery, useMoralis } from "react-moralis";
import NFTBox from "../components/NFTBox";

export default function Home() {
  // const { isWeb3Enabled } = useMoralis();
  const isWeb3Enabled = true;
  const { data: listedNfts, isFetching: fetchingListedNfts } = useMoralisQuery(
    // TableName
    // Function for the query
    "ActiveItem",
    (query) => query.limit(10).descending("tokenId")
  );
  console.log(listedNfts);

  return (
    <div className="container mx-auto">
      <h1 className="py-4 px-4 font-bold text-2xl">Recently Listed</h1>
      <div className="flex flex-wrap">
        {isWeb3Enabled ? (
          fetchingListedNfts ? (
            <div>Loading...</div>
          ) : (
            listedNfts.map((nft) => {
              console.log(nft.attributes);
              const { price, nftAddress, tokenId, marketplaceAddress, seller } =
                nft.attributes;
              return (
                <NFTBox
                  price={price}
                  nftAddress={nftAddress}
                  tokenId={tokenId}
                  marketplaceAddress={marketplaceAddress}
                  seller={seller}
                  key={`${nftAddress}${tokenId}`}
                />
              );
            })
          )
        ) : (
          <div>Web3 Currently Not Enabled</div>
        )}
      </div>
    </div>
  );
}

btw, i found this discussion on this issue but issue not resolved on this discussion

Here is my repo, please find attached:

github repo:

page:

what is the difference versus a react application?

where are all those components loaded?

Please see that I am not even using useMoralis() , and its still complaining

Next.js is also do server side render stuff
You can read more on here…

But weird is I’m even not using useMoralis()

where from is the error then if you don’t even use useMoralis()?

It’s resolved now , i did a lil trick now

But i think it will raise again

Thanks for being with me on the way