[SOLVED] MoralisProvider

shoaibshebi · December 28, 2022, 3:15am

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

cryptokid · August 13, 2022, 6:43pm

What version of Moralis sdk are you using?

shoaibshebi · August 13, 2022, 6:56pm

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

shoaibshebi · August 13, 2022, 7:12pm

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;

cryptokid · August 13, 2022, 7:22pm

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

you could try this combination:

shoaibshebi · August 13, 2022, 7:52pm

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

cryptokid · August 13, 2022, 8:29pm

maybe you can pin this one too to a specific version

shoaibshebi · August 14, 2022, 5:06am

Wooow

It worked. Thanks a lot @cryptokid

shoaibshebi · August 14, 2022, 6:42am

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

cryptokid · August 14, 2022, 6:42am

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

shoaibshebi · August 14, 2022, 6:46am

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);

cryptokid · August 14, 2022, 7:06am

In what file you added this?

shoaibshebi · August 14, 2022, 7:29am

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

cryptokid · August 14, 2022, 7:52am

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

shoaibshebi · August 14, 2022, 7:58am

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

shoaibshebi · August 14, 2022, 8:02am

Here is my repo, please find attached:

github repo:

page:

github.com

shoaibshebi/hardhat-nft-marketplace-nextjs/blob/main/pages/_app.js

// 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>

This file has been truncated. show original

cryptokid · August 14, 2022, 8:12am

what is the difference versus a react application?

where are all those components loaded?

shoaibshebi · August 14, 2022, 8:47am

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()

cryptokid · August 14, 2022, 8:48am

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

shoaibshebi · August 14, 2022, 8:51am

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