Exported constant contract throws error "Provider does not have a request or send method to use."

Question

I am trying to create a helper class where I can instantiate the contracts required for my dapp. Currently I'm trying to export a contract instance of dai in order to use it for payment. This is dai.js:

import Web3 from 'web3'
import daiAbi from '../../artifactsUse/dai.json'
import {web3Modal} from '../Client/Helpers/provider'
const DaiAddress = "0x5592EC0cfb4dbc12D3aB100b257153436a1f0FEa"
const provider = web3Modal.connect()
const web3  = new Web3(provider)
const dai = new web3.eth.Contract(daiAbi.abi,DaiAddress)
export {dai}

In purchase.js I import it link this:

import {dai} from '../../abi/dai'

and then I use it for transaction:

  const purchaseTokensWithDAI = async(price)=>{
      if(!accounts)
      {
       await faucet()
      }
      const crowdsale = new web3.eth.Contract(props.IcoContract.abi,IcoAddress)
      //const dai = new web3.eth.Contract(props.DaiContract.abi, DaiAddress)
      await dai.methods.approve(IcoAddress,Web3.utils.toBN(price * 10 ** 18)).send({from:accounts[0]}).once("confirmation",async(confirmation)=>{
        await crowdsale.methods.buyTokensWithDAI(price).send({from:accounts[0]}).once("confirmation",(confirmation)=>{
          console.log(confirmation)
        }).catch("error",(error)=>{
          console.log(error)
        })
      })
    }
  

Unfortunately I don't understand why I get the error " Provider does not have a request or send method to use." I've also tried to export the contract like this:

export const dai = new web3.eth.Contract(..)

but I get the same result. Instead, if I declare the contract inside the purchaseTokensWithDAI function, it works without any problem. I'm using web3Modal as a provider and I set it up as follows:

 const loadWeb3Modal=async()=>{
      provider = await web3Modal.connect()
      setProvider(provider)
      console.log(provider)
      web3 = new Web3(provider)
      provider.on("accountsChanged", (accounts) => {
       setAccount(accounts)
       console.log(accounts);
     });
     
     // Subscribe to chainId change
     provider.on("chainChanged", (chainId) => {
       console.log(chainId);
     });
     
     // Subscribe to provider connection
     provider.on("connect", (chainId) => {
       console.log(chainId);
     });
     
     // Subscribe to provider disconnection
     provider.on("disconnect", () => {
       provider.close();
       web3Modal.clearCachedProvider();
       provider=null;
       console.log(error);
     });
    

Then I have a function called faucet() where I call it.

 const faucet=async()=> {
      await loadWeb3Modal()
      accounts = await web3.eth.getAccounts()
      setAccount(accounts)
     console.log(accounts)
   
  }

Each time before the user initiates a transaction, it checks to see if the provider is set or not. I suppose that is the problem as for some reason it won't detect it when I used an exported constant. Can someone please help me understand what I'm doing wrong?

Answer 1

You know I am doing this code from Intro to Blockchain Programming on youtube by Dapp University and.. i noticed i got this error. What solved it for me is that I added

var Web3 = require('web3')

var web3 = new Web3('<the IP of your blockchain, for me it was the RPC server address in ganache (that I'm using, you could be doing something different)>')

Just for newbies like i was: whatever in the <> is something you have to identify and enter by yourself.

The problem i was facing is that the provider was null and functions were also out. and I noticed that there must be something wrong in the package. So.. I went and did the tutorial for web3.js as well. And i found out this upper code. During the tutorial I also performed

npm install web3

which installed the necessary packages on my PC. You should try that out too if you havent yet and see what happens

I am not sure if this will help you for sure, but.. i guess you could try it out. And tell me what happens