1

The client side application always throws the above error. I have connected the ganache account(by copying the private key)also with the correct port number in Metamask extension as well as in the truffle-config.js file but the error seems consistent.

    App={
    contracts:{},
    loading:false,

    load: async() => {
        await App.loadWeb3();
        await App.loadAccount();
        await App.loadContract();
        await App.render();
        // await App.renderTask();

    },
    // https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8

    loadWeb3: async () => {
        if (typeof web3 !== 'undefined') {
          App.web3Provider = web3.currentProvider
          web3 = new Web3(web3.currentProvider)
        } else {
          window.alert("Please connect to Metamask.")
        }
        // Modern dapp browsers...
        if (window.ethereum) {
          window.web3 = new Web3(ethereum)
          try {
            // Request account access if needed
            await ethereum.enable()
            // Acccounts now exposed
            web3.eth.sendTransaction({/* ... */})
          } catch (error) {
            // User denied account access...
          }
        }
        // Legacy dapp browsers...
        else if (window.web3) {
          App.web3Provider = web3.currentProvider
          window.web3 = new Web3(web3.currentProvider)
          // Acccounts always exposed
          web3.eth.sendTransaction({/* ... */})
        }
        // Non-dapp browsers...
        else {
          console.log('Non-Ethereum browser detected. You should consider trying MetaMask!')
        }
    },

    loadAccount: async() => {
        App.account= web3.eth.accounts[0];
        console.log(App.account)

    },

    loadContract: async() => {
        const todoList = $.getJSON('TodoList.json');//Getting the smart contract json file
        //To do operations with our contract using truffle we need to do this
        App.contracts.TodoList = TruffleContract(todoList);
        App.contracts.TodoList.setProvider(App.web3Provider);//Also need to set the provider of web3
        //Creating a (deployed)contract instance from the actual blockchain of type App.
        //Check that the same variable 'todoList' is used to get the json file too

        App.todoList = App.contracts.TodoList.deployed();// <<<<-------- Here is the error I guess                 
    },
    render: async() => {
        //To Prevent double render
        if(App.loading){
            return
        }
        //Update app loading state
        App.setLoading(true);

        //Then render account
        $('#account').html(App.account)

        //Then update loading state
        App.setLoading(false);
    },
    setLoading:(status)=> {
        App.loading=status;
        const loader=$('#loader');
        const content=$('#content');

        if(status){
            loader.show()
            content.hide()
        }else{
            loader.hide()
            content.show()
        }

    },       
}
$(()=>{
    $(window).load(()=>{
        App.load()
    })
})

I have mentioned with <<<---- comment where the error occurs exactly I'm newly learning blockchain from this tutorial. Please help me out.Thanks in advance :)

1

Finally I solved the error. The error wasn't for any port or any network-artifact mismatch.Instead the contract json file wasn't loaded by the time we are trying to deploy it.

const todoList =await $.getJSON('TodoList.json'); //I added the await keyword and it worked fine.

I learnt an important lesson that everything in the blockchain is asynchronous. So we need to write all programs either using promises or using keywords like async(),await

  • You can accept your own answer. Accepting the correct answers is a good practice in SE sites. – Achala Dissanayake Aug 17 at 6:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.