0

I am making a very basic React app, and I'm following this tutorial. Ethers has been updated since, however. Here is my code for App.js:

import { useEffect } from 'react';
import { useState } from 'react';
import { BrowserProvider } from 'ethers';
import './App.css';
import contract from './Contracts/NFTCollectible.json';
const contractAddress = "0x6E665b48BFaeE66d5183f029C82A8c23D66bC7ce";
const abi = contract.abi;
function App() {
const [currentAccount, setCurrentAccount] = useState(null);
const [provider, setProvider] = useState();
  
  
  const checkWalletIsConnected = async () => {
const { ethereum } = window;


if(!ethereum){
    console.log("A wallet is needed.")
    return;
}
else{
    console.log("Yay! You're all set up!")
}

const accounts = await ethereum.request({ method: 'eth_accounts'});

if(accounts.length !== 0){
    const account = accounts[0];
    console.log("Found an authroized account:", account);
    setCurrentAccount(account); 
}else{
    console.log("No authorised account found!");
}
      }

  const connectWalletHandler = async () => { 
  const { ethereum } = window;
  
  if(!ethereum)
  {
      alert("Please install Metamask!");
  }
  try {
      
      const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
      console.log("Found an account! Address: ", accounts[0]);
      setCurrentAccount(accounts[0]);
     } catch(err){
         console.log(err)
     }
  
  }

  const mintNftHandler = async () => { 
  try {
      const { ethereum } = window;
      
      if (ethereum){
          const provider = new ethers.providers.Web3Provider(ethereum);
          const signer = provider.getSigner();
          const nftContract = new ethers.Contract(contractAddress, abi, signer);
          
          console.log("Initialize payment!");
          let nftTxn = await nftContract.mintNFTs(1, { value: ethers.parseEther("0.01") });
          
          console.log("Mining... please wait!");
          await nftTxn.wait();
          
          console.log(`Mined, see transaction https://sepolia.etherscan.io/tx/${nftTxn.hash}`);
          
      }else{
          console.log("Ethereum object doesn't exist.");
      }
      
      
      
    
      
      
      
      
      
  }
  catch (err) {
      console.log(err);
  }
  
  
  
  
  
  
  }

  const connectWalletButton = () => {
    return (
      <button onClick={connectWalletHandler} className='cta-button connect-wallet-button'>
        Connect Wallet
      </button>
    )
  }

  const mintNftButton = () => {
    return (
      <button onClick={mintNftHandler} className='cta-button mint-nft-button'>
        Mint BoredBits NFT
      </button>
    )
  }

  useEffect(() => {
    checkWalletIsConnected();
    const browserProvider = new BrowserProvider(window.ethereum);
    setProvider(browserProvider);
  }, [])

  return (
    <div className='main-app'>
      <h1>Bored Bits</h1>
      <div>
        {currentAccount ? mintNftButton() : connectWalletButton()}
      </div>
    </div>
  )
}

export default App;

My full error:

  Line 60:26:  'ethers' is not defined  no-undef
  Line 62:29:  'ethers' is not defined  no-undef
  Line 65:57:  'ethers' is not defined  no-undef

I have read on other similar posts that putting const { ethers } = require("hardhat"); will resolve the error, but for me I just get hundreds of errors. The first error is: Cannot find module 'path', and the rest are: Module not found: Error: Can't resolve 'path' in XXXXXXX Thanks for any help! I'm using ethers, hardhat, and webpack.

1 Answer 1

0

import ethers as follows,

import { ethers } from 'ethers';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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