2

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

enter image description here

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:

enter image description here

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)

enter image description here

2

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.

1
  • I'm feeling so dumb, I looked on all sites except the official hahahahaha. The problem was not with Metamask, if he opened in the private he said that he couldn't get the account. I followed the site method and it worked -_- thanks :) – João Vitor Aug 18 '20 at 1:08
0

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....

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.