[SOLVED] Error with providers: useMoralisDapp must be used within a MoralisDappProvider

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

1 Like

Thanks @YosephKS for the solution. It is working now :slight_smile:

For anyone wishing to know, I have added codes like below in index,js

1 Like