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