React Moralis Errors

Moralis General
#1

React Moralis very unstable. web3 useMoralis() is null, Moralis isn’t always initialized. Provider does seem to work sometimes.

TypeError: Cannot read property ‘eth’ of null when trying to use web3 to declare contract .

Many times I got Parse.Initialize errors.
Unhandled Rejection (Error): You need to call Parse.initialize before using Parse.

Anyone else running react-moralis latest version? I am running on mac node v16.

I have gotten some work done but the inconsistent errors is a serious problem.
I tried reinstalling moralis.

1 Like
#2

There may be bugs, but it shouldn’t be that unstable. Could you please do the following, so that we can help you as soon as possible.

  • Provide any screenshot about your error.
  • Provide the code properly following this guide: FAQ - How to post code in the forum
  • Step by step on how to replicate the issue.
  • Provide your subdomain.
#3

As Mauro mentions, please provide more details. My initial hunch without seeing any code is that the App ID and Server URL are net getting properly set

  • Make sure the app have the expected values
  • If you loading them from a .env file make sure the variable names are correct and are loaded properly (it’s a good idea to throw an error if expected env variables are not found)
    • Try hard coding the ID and server url in app.js
  • The app ID and url need to passed as props to the <MoralisProvider> in app.js
#4 

    const appID = process.env.REACT_APP_MORALIS_APPLICATION_ID ;
    const serverUrl = process.env.REACT_APP_MORALIS_SERVER_URL;

ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider appId={appID} serverUrl={serverUrl}>    <App />
        </MoralisProvider>

  </React.StrictMode>,
  document.getElementById('root')

);```

//Code used elsewhere in other components
const {web3, isAuthenticated,isInitialized} = useMoralis();
//Web3 is always null

#5

Can you please try hard coding the appId and serverUrl and see if that works? If that fixes the problem then it’s a problem with your .env file.

Make sure you have a file called .env in the project root directory and that it contains the following. Replace the parts on the right hand side of the equals with your app id and server url.

REACT_APP_MORALIS_APPLICATION_ID=YOUR_APP_ID
REACT_APP_MORALIS_SERVER_URL=https://YOUR_MORALIS_SERVER:1337/server
#6

Your setup looks fine, so far as I can see (as long as the serverUrl and appId are correct)

Provider does seem to work sometimes

What do you mean with sometimes? When does it work and when does it not work? Also when it does not work, what seems to be the issue?

It might be possible that you call Moralis functions directly when the app loads, even before Moralis is initialized. If this is the case, then you can check if isInitialized is true.

web3 useMoralis() is null

This happens when you are logged out. Web 3 is enabled and well be possible to call via const { web3 } = useMoralis() once the user is logged in. We can take a look if we can provide the option to enable web3 by default. But currently, it is only accessible when a user is logged in.
Of course, you can always use your own web3 library as well. (web3 or ethers for example)

TypeError: Cannot read property ‘eth’ of null when trying to use web3 to declare contract

This probably also happens before the user is authenticated. In that case, web3 is not available and thus null. (see my comment above)

So in general, I would advise to only use web3, when a user has been authenticated for now. Or use your own web3 library.

For the inconsistencies, that seems weird to me. Maybe this is because sometimes you are logged in and sometimes not? Please share the code of where this happens and how to reproduce this.

2 Likes
#7

I’m also running through Erno’s React-Moralis demo video on YouTube, and setting up a .env file is not a step in the first video. Is the .env file a patch for the problem or an oversight in the demo, or an update to the server code since the demo? I came here to report/resolve the following error in my code. Another relevant issue is I’m using yarn, not npm/x. I will try a .env file…
image

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ChakraProvider, extendTheme } from "@chakra-ui/react";
import { MoralisProvider } from "react-moralis";

const theme = extendTheme({
  config: {
    initialColorMode: "dark",
  },
});

const appId = "CkGKKjw1WWWWNAo2GRMO1yPyjTrRx8YAIX4E8Q8q";
const serverUrl = "https://jlodflimpqon.moralis.io:2053/server";

ReactDOM.render(
  <React.StrictMode>
    <MoralisProvider appID={appId} serverUrl={serverUrl}>
      <ChakraProvider theme={theme}>
        <App />
      </ChakraProvider>
    </MoralisProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
#8

Adding a .env file with the above content had no affect on my error. I tried with and without quotes, with and without semicolons.

#9

Hard-coding the appId and serverUrl also had no affect on my issue.

#10

Using variables from a .env file or hard-coded is functionally the same. I think the issue is a typo in this case.

Can you replace

    <MoralisProvider appID={appId} serverUrl={serverUrl}>

with

    <MoralisProvider appId={appId} serverUrl={serverUrl}>

(notice the capital D in appId)

1 Like
#11

That did it! Thanks Erno!

image

Incidentally “ID” vs. “Id” plagued me throughout my time at IoT. Somehow in my American head “ID” is an abbreviation for the two-word “I Dentity”, or “I.D.”-- Webster be damned. I’ve just seen it like that on too many government forms. Drives me nuts to see “Id” and it’s all over the Academy videos like that, and all over JavaScript. I’ve been yelling at my screen all this time “no Ivan it’s ‘ID’!” thinking the world’s gone mad. No, it’s just me. Half programming, half DE-programming. But wouldn’t the proper abbreviation of “identity” just be “I”? The world has gone mad.

1 Like
#12

Nice great that it works.

Haha, Yeah it has been discussed a lot :sweat_smile:.
As far as I know it’s the difference between ID(Identity Document) or id(abbifiation of identifier in programming). https://english.stackexchange.com/questions/101248/how-should-the-abbreviation-for-identifier-be-capitalized

#13

Further nits. @Erno talked about signup()'s parameters in the video but didn’t show completing them. It appears as if you omitted the parameters here, flipped to test, and it magically worked for you. My computer is not as magical as yours. I had to brute force it. 9-9:30 in the second React demo video. Then everything’s there when you return from test at 10:40.

image
image1098×612 60.2 KB

#14

My solution to Parse Initialize Error:

only render a component that utilizes moralis if isInitialized is true.

2 Likes
#15

Hey guys,

I have the same issue as discussed above in a next.js app.
Actually if I hard code appId and serverUrl, it works - it’s a bit weird as the error is also not with my .env file, as I can console log both values (appId + serverUrl) and everything consoles correctly.
As I said, hard coding solves the issue, so I thought it may be a problem with my variable naming, but I triple checked everything …

import 'tailwindcss/tailwind.css'
import { MoralisProvider } from "react-moralis";

function MyApp({ Component, pageProps }) {

  const appId = process.env.MORALIS_APPLICATION_ID
  const serverUrl = process.env.MORALIS_SERVER_URL
  console.log(appId)
  console.log(serverUrl)
  return (
    <MoralisProvider appId={appId} serverUrl={serverUrl}>
    	<Component {...pageProps} />
    </MoralisProvider>
  	) 
}

export default MyApp
#16

One minute after I wrote my reply I fixed it myself - for all the next.js developers coming here in the future, it works when you use

NEXT_PUBLIC_

in your env variable naming.

stated here in the next.js docs.

cheers

1 Like
#17

Great job @dataluchs!

Thanks for sharing with other developers the solution to this problem :mage:

Happy BUIDLing :man_mechanic:

1 Like
#18