Error: Unhandled Rejection (Error): This contract object doesn't have address set yet, please set an address first?

Question

I was learning Solidity through Remix and I decided to make a simple front-end application with pure HTML and CSS, it worked using Rinkeby.

Then I discovered Truffle and since then I try to make the same application on it (with React, Metamask and Rinkeby) but all the tutorials I follow, as an example: https://medium.com/@PasschainBlog/jumping-into-truffle-and-rinkeby-3acf6a2d9bef it seems that after truffle unbox react

truffle compile and truffle migrate just give an npm start and the default screen of Truffle with React works, but with this error in the terminal:

Then I thought: I will put cd client and I will run npm start there, then open localhost: 3000, the screen that should appear for 2 seconds appears and then gives this error, I don't know how to solve it. If you can help me ... :/ (translated by Google Translate)

Answer 1

The problem might be a conflict with Metamask since it tries to connect to a network that may not be the one created by truffle, so deployed contracts aren't there.

A simple solution for testing would be to run http://localhost:3000 from an incognito/private window so no plugin will be loaded and it will use the network crated by truffle.

Another solution is to import the account created by Truffle into your metamask configuration so it will have access to the contracts deployed by truffle.

The instruction to access the latest version of truffle react box is at https://www.trufflesuite.com/boxes/react.

Answer 2

For me the problem was that it was trying to get the web3 provider (and therefore the network) from Metamask instead of my local ganache which is what I always want for development.

So I just modified the getWeb3.js code to comment out everything except the fallback to localhost so that it uses my local ganache by default...

const provider = new Web3.providers.HttpProvider(
      "http://127.0.0.1:8545"
    );
    const web3 = new Web3(provider);
    console.log("No web3 instance injected, using Local web3.");
    resolve(web3);

This should work even when you don't want to use a private browsing window....