Built NextJS App, does not get user data from useNativeBalance react hook after a refresh, but works fine in dev

Technical Issue Reporting
#22

This has nothing to do with the issue, useEffect runs before a render, I need the data in before the render, so normally, I would try to load that data into a useEffect hook, if the issue as you claim was in my code, then the dev server wouldnt work either, would it not?

Would you be please so kind as to fix my code and show me what it should look like, its just a few lines of code, and I have not seen fetching outside of useEffect or getServerSideProps, so what am I missing here?

I should not need to explicitly fetch the balances, when they have the balances variables exposed, that should be handled internally within the hook.

1 Like
#23

in case that you know what is wrong in the hook, this seems to be the code for that hook: https://github.com/MoralisWeb3/react-moralis/blob/beta/src/hooks/web3ApiWrappers/useNativeBalance/useNativeBalance.ts

#25

I have narrowed it down, but I can’t fix it, I actually did take a look and I am simply guessing hat some dependency somewhere in these useMemo hooks (or others deeper), just dont get reactivated and they dont refetech.

#26

Please take a look at Solution on how to use Moralis in your Nextjs Application

#27

Hi Yomoo, thanks, but this is a different issue, like I said, Moralis works just fine in development mode, it doesnt when I do npm run build && npm run start, in the thread that you provided, the person describes how to wrap the app in the MoralisProvider which I have done, MoralisProvider is the main wrapper around every single thing in my app, even my UserProvider is within it, so its:

const App = ({ Component, pageProps }: AppProps) => {

  return (
    <MoralisProvider
      appId='appid'
      serverUrl=serverurl'
    >
      <UserProvider>
        <ThemeProvider theme={theme}>
          <Head>
            <title>Trading Pal</title>
            <meta
              name='viewport'
              content='width=device-width, initial-scale=1.0, user-scalable=no'
            />
          </Head>
          <GlobalStyles />
          <Header />
          <Component {...pageProps} />
          <Footer />
        </ThemeProvider>
      </UserProvider>
    </MoralisProvider>
  );
};

And for the example that I started with that uses nothing additional:

import { MoralisProvider } from "react-moralis";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {

  return (
    <MoralisProvider
      appId="appid"
      serverUrl="serverurl"
    >
      <Component {...pageProps} />
    </MoralisProvider>
  );
}

export default MyApp;

As you can see its very barebones and it is reproducing the problem that I am having (coupled with the code from my first post)

The only different thing that I see in that persons post is that he is wrapping MoralisDappProvider with MoralisProvider but I cant find any such thing, either in the linked boilerplate code, or within Moralis itself, so it seem to me that this is some custom context that he did for himself and unless theres some magical code in there, I dont think that this is the problem.

Please let me reiterate this, because I think when people read the thread are missing it:
The app is working perfectly in dev mode the problem occurs only when the app is deployed, regardless of if its deployed locally (that meaning, running npm run build and then npm run start), or a hosting provider (that is irrelevant). As soon as I build and run it, it no longer sends requests to the Moralis server (getNativeBalance, getTokensBalance), they just do not get sent at all, confirmed by the Network tab, and I have posted screenshots above, showing how the app is making requests every single time I refresh/relog to retrieve the data from the moralis server and how it is no longer doing that, once I build it.
And its not only on refresh if I change the network, state gets updated, but its still not even trying to retrieve my balance from the new chain.
There are no errors, I have wrapped every single async function in a try/catch block, logging the errors, but there is nothing.
So if I have issues with wrapping, or some fundamental setup of Moralis, wouldnt that make it not work in dev mode too?

So what am I doing wrong?

P.S. Merry Christmas!:slight_smile:

#28

did you also check that error variable?

#29

I checked all error variables, nothing nowhere.

#30

ok, you could use that solution with explicit fetch for now

#31

Yeah, where I have to write my own useNativeBalance and useERC20Tokens hooks… I can do it, I just dont understand why its not working as it is, its driving me crazy, since its working in dev just fine.

#32

It will be nice if you share your git repo so we will be able to check it on real issue

#33

Here it is, all you have to do is, install, build and start, and check the console. And compare it with dev mode.

(And add serverurl and appid for moralis provider of course, in _app.js of course)