Web3 chain ID is null in production build react next.js

Moralis General
#1

Hi guys! I tried to use Moralis web3, Below code is working fine in development, but in production build first refresh it is working, but next time page refresh is not working couldn’t find what is going on.

import {useEffect, useState} from "react";
import {useMoralis} from "react-moralis";


const ActionDetector = () => {
    const {web3} = useMoralis();
    const [chain, setChain] = useState();

    useEffect(() => {
        console.log("This code run every page refesh")
        console.log("But in production build chain ID is null")
        console.log("But if we do hard refresh this is working even production")
        console.log(web3.givenProvider.chainId) 
        console.log("But locally no issue chain id is coming in every refesh")
        setChain(web3.givenProvider.chainId)
    }, [])

    return (
        <div>
            {chain}
        </div>
    );
};

export default ActionDetector;
#2

Try to use something like:

useEffect(() => {
        console.log("This code run every page refesh")
        console.log("But in production build chain ID is null")
        console.log("But if we do hard refresh this is working even production")
        console.log(web3.givenProvider.chainId) 
        console.log("But locally no issue chain id is coming in every refesh")
        if (web3.givenProvider?.chainId ) {
          setChain(web3.givenProvider.chainId)
        }
    }, [web3])
1 Like
#4

I’m not sure if it’s needed your case, but for using all web3 abilities you need to enable it. Take a look at https://github.com/MoralisWeb3/react-moralis#web3

1 Like
#5

Hi @Yomoo! tried just now still the same. In the production build, it does not work. But if you do hard refresh it works one time

#6

Could you share the error message?

1 Like
#7

@Yomoo there are no error messages, It just does not display chainId in the production.

#8

Does this return null?
What about console logging the whole web3.givenProvider to see if it’s loading in the first place.

1 Like
#9

Hi @malik,

If change code to look like this result look like chanId is there but it returns null.

useEffect(() => {
       console.log("Use Effect")
       if (web3.givenProvider) {
           console.log("has givenProvider")
           console.log(web3.givenProvider) // this log data every refresh and I can see chainId is there.
           console.log(web3.givenProvider.chainId) // this is not log chainId every page refresh, chainId is null 
       }
   }, [web3])

again when you hard refresh chanId is coming but not in soft refresh

Desktop-screenshot
Desktop-screenshot1132×1360 255 KB

But every refresh web3.givenProvider is coming and I can see the chainId there, Is that sync issue?

#10

Try to use currentProvider instead of givenProvider

1 Like
#11

@Yomoo
That object (web3.currentProvider) is always null event in Local :thinking:

#12

You need to delete previous build and enable web3 yourself.

1 Like
#13

Now is working fine on production, But not sure about enableWeb3(), Because isWeb3Enabled is always false even I enable

import {useEffect} from "react";
import {useMoralis} from "react-moralis"

const ActionDetector = () => {
    const {web3, enableWeb3, isWeb3Enabled} = useMoralis()

    useEffect(() => {
        if(!isWeb3Enabled){
             enableWeb3() // I'm not sure what is going on here
        }
    }, [])

    return <div>
        {isWeb3Enabled && web3.currentProvider.chainId}
    </div>
};

export default ActionDetector;

@Yomoo @malik Thank you very much

1 Like
#14

You need to add isWeb3Enabled as a dependency to useEffect hook

useEffect(() => {
        if(!isWeb3Enabled){
             enableWeb3() // I'm not sure what is going on here
        }
    }, [isWeb3Enabled])
2 Likes