I’m following this tutorial: https://www.youtube.com/watch?v=WZWCzsB1xUE
When I try to import and use MoralisDappProvider I got this error:
Error: useMoralisDapp must be used within a MoralisDappProvider
3 Likes
Same problem here , i can’t figure out where the problem come from
I am getting the same error as well, can’t figure out how to solve this.
Hey @labarinth @Davila7 @ninjadesbois
Make sure you have provided your serverUrl and appId correctly
@Yomoo
I have been stuck with this issue for days and have not been able to solve it. Please help!
I have input the serverUrl and appId correctly and this is my smart contract address: 0xa1048f0975287c1b645962bd32dd1745bd2b2ab5
I am calling MoralisDappProvider in NFTBalance.jsx
This is MoralisDappProvider code:
import React, { useEffect, useState } from "react";
import { useMoralis } from "react-moralis";
import MoralisDappContext from "./context";
function MoralisDappProvider({ children }) {
const { web3, Moralis, user } = useMoralis();
const [walletAddress, setWalletAddress] = useState();
const [chainId, setChainId] = useState();
const [contractABI, setContractABI] = useState('[{"inputs":[],"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"uint256","name":"itemId","type":"uint256"},{"indexed":true,"internalType":"address","name":"nftContract","type":"address"},{"indexed":true,"internalType":"uint256","name":"tokenId","type":"uint256"},{"indexed":false,"internalType":"address","name":"seller","type":"address"},{"indexed":false,"internalType":"address","name":"owner","type":"address"},{"indexed":false,"internalType":"uint256","name":"price","type":"uint256"},{"indexed":false,"internalType":"bool","name":"sold","type":"bool"}],"name":"MarketItemCreated","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"internalType":"uint256","name":"itemId","type":"uint256"},{"indexed":false,"internalType":"address","name":"owner","type":"address"}],"name":"MarketItemSold","type":"event"},{"inputs":[{"internalType":"address","name":"nftContract","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"},{"internalType":"uint256","name":"price","type":"uint256"}],"name":"createMarketItem","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[{"internalType":"address","name":"nftContract","type":"address"},{"internalType":"uint256","name":"itemId","type":"uint256"}],"name":"createMarketSale","outputs":[],"stateMutability":"payable","type":"function"},{"inputs":[],"name":"fetchMarketItems","outputs":[{"components":[{"internalType":"uint256","name":"itemId","type":"uint256"},{"internalType":"address","name":"nftContract","type":"address"},{"internalType":"uint256","name":"tokenId","type":"uint256"},{"internalType":"address payable","name":"seller","type":"address"},{"internalType":"address payable","name":"owner","type":"address"},{"internalType":"uint256","name":"price","type":"uint256"},{"internalType":"bool","name":"sold","type":"bool"}],"internalType":"struct marketPlaceBoilerPlate.MarketItem[]","name":"","type":"tuple[]"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"owner","outputs":[{"internalType":"address","name":"","type":"address"}],"stateMutability":"view","type":"function"}]');
const [marketAddress, setMarketAddress] = useState("0xa1048f0975287c1b645962bd32dd1745bd2b2ab5");
useEffect(() => {
Moralis.onChainChanged(function (chain) {
setChainId(chain);
});
Moralis.onAccountsChanged(function (address) {
setWalletAddress(address[0]);
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// eslint-disable-next-line react-hooks/exhaustive-deps
useEffect(() => setChainId(web3.givenProvider?.chainId));
useEffect(
() => setWalletAddress(web3.givenProvider?.selectedAddress || user?.get("ethAddress")),
[web3, user]
);
return (
// <MoralisDappContext.Provider value={{ walletAddress, chainId, marketAddress, setMarketAddress, contractABI, setContractABI }}>
// {children}
// </MoralisDappContext.Provider>
<MoralisDappContext.Provider value={{ walletAddress, chainId, contractABI, setContractABI, marketAddress, setMarketAddress }}>
{children}
</MoralisDappContext.Provider>
);
}
function useMoralisDapp() {
const context = React.useContext(MoralisDappContext);
if (context === undefined) {
throw new Error("useMoralisDapp must be used within a MoralisDappProvider");
}
return context;
}
export { MoralisDappProvider, useMoralisDapp };
Please let me know if any additional info I should provide.
Thanks in advance
what error did you get exactly?
Hi @YosephKS
This is the error i got
MoralisDappProvider.js:50 Uncaught Error: useMoralisDapp must be used within a MoralisDappProvider
at useMoralisDapp (MoralisDappProvider.js:50:1)
at NFTBalance (NFTBalance.jsx:30:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
at renderRootSync (react-dom.development.js:22670:1)
at performSyncWorkOnRoot (react-dom.development.js:22293:1)
at react-dom.development.js:11327:1
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11276:1)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
at flushSyncCallbackQueue (react-dom.development.js:11309:1)
at unbatchedUpdates (react-dom.development.js:22438:1)
at legacyRenderSubtreeIntoContainer (react-dom.development.js:26020:1)
at Object.render (react-dom.development.js:26103:1)
at Module.<anonymous> (index.js:36:1)
at Module../src/index.js (index.js:47:1)
at __webpack_require__ (bootstrap:851:1)
at fn (bootstrap:150:1)
at Object.1 (style.css?cc85:82:1)
at __webpack_require__ (bootstrap:851:1)
at checkDeferredModules (bootstrap:45:1)
at Array.webpackJsonpCallback [as push] (bootstrap:32:1)
at main.chunk.js:1:93
Got this error when I call useMoralisDapp() in NFTBalance.jsx
Any clue which other places should I look into?
Thanks
can you check in index.js whether the App is wrapped with MoralisDappProvider, coz I remember it was removed 
1 Like
Thanks @YosephKS for the solution. It is working now 
For anyone wishing to know, I have added codes like below in index,js
1 Like
i have the same issue and i have followed your instructions and added MoralisDappProvider to the index.js file but i still get the same error. Any pointer will be appreciated
Can you post your index.js code? It should look like this:
import { MoralisDappProvider } from "./providers/MoralisDappProvider/MoralisDappProvider";
/** Get your free Moralis Account https://moralis.io/ */
const APP_ID = process.env.REACT_APP_MORALIS_APPLICATION_ID;
const SERVER_URL = process.env.REACT_APP_MORALIS_SERVER_URL;
const Application = () => {
const isServerInfo = APP_ID && SERVER_URL ? true : false;
if (isServerInfo)
return (
<MoralisProvider appId={APP_ID} serverUrl={SERVER_URL}>
<MoralisDappProvider>
<App isServerInfo />
</MoralisDappProvider>
</MoralisProvider>
);
...