Cant make conection with my Smart Contract using web3

Question

I cant get my contract instance using web3 . I am making todo app using web3 . I cant get my contract instance in js file . I am new to web3 development and everyday I am trying my best improve my self .

This is my todolistApp.js file

import React, { useEffect, useState } from "react";

import { ethers } from "ethers";
import Web3 from "web3";

// internal imports

import { toDoListABI, toDoListAddress } from "./constants";

const fetchContract = (signerorProvider) =>
  new ethers.Contract(toDoListAddress, toDoListABI, signerorProvider);
export const ToDoListContext = React.createContext();
export const ToDoListProvider = ({ children }) => {
  const [cuurentAccount, setCurrentAccount] = useState("");
  const [error, setError] = useState("");
  const [allToDoList, setAllToDoList] = useState([]);
  const [myList, setMyList] = useState([]);
  const [allAdress, setAllAddress] = useState([]);
  const [provider, setProvider] = useState(null);

  //connecting metamask
  const ifwalletisconnected = async () => {
    if (!window.ethereum) return setError("Please install metamask");
    const account = await window.ethereum.request({ method: "eth_accounts" });
    //console.log(account[0]);
    if (account.length) {
      setCurrentAccount(account[0]);
      console.log(account[0]);
      // console.log("Heloo");
    } else {
      setError("Please install metamask &connect and reload");
    }
  };

  //connect wallet
  //Requesting user to connect their wallet
  const connectwallet = async () => {
    if (!window.ethereum) return setError("Please install metamask");
    const account = await window.ethereum.request({
      method: "eth_requestAccounts",
    });

    setCurrentAccount(account[0]);
  };
  //connecting with smar contract
  const connectContract = async () => {
   // console.log(toDoListABI, toDoListAddress);

    window.web3 = await new Web3(window.ethereum);
    window.contract = await new web3.eth.Contract(toDoListABI, toDoListAddress);

    console.log(window.contract);
  };
  // Interacting with smart contract

  const toDolist = async (message) => {
    try {
      // coonecting with smart contract
      // Here setting up the stage
      // One kind of like the making connection with the DBMS in MYSQL
      //   const web3Modal = new Web3Modal();

      //   const connection = await web3Modal.connect();

      //   const provider = new ethers.providers.Web3Provider(connection);

      //   const signer = provider.getSigner();

      //   const contract = await fetchContract(signer);

      //   const createList =await contract.createList(message);
      //   createList.wait();

      window.addEventListener("load", async () => {
        if (window.ethereum) {
          const provider = new ethers.providers.Web3Provider(window.ethereum);
          console.log(provider);
          // Rest of your code
        } else {
          console.error(
            "No Ethereum provider found. Please install MetaMask or another compatible wallet."
          );
        }
      });

      // const provider = new ethers.providers.Web3Provider(window.ethereum);

      const signer = await provider.getSigner();
      const contract = new ethers.Contract(
        toDoListABI,
        toDoListAddress,
        signer
      );

      console.log(contract);
    } catch (error) {
      setError("Something wrong with creating list ");
    }
  };

  const getToDoList = async () => {
    try {
    } catch (error) {
      setError("Something wrong ");
    }
  };

  return (
    <ToDoListContext.Provider
      value={{
        ifwalletisconnected,
        toDolist,
        connectwallet,
        getToDoList,
        connectContract,
      }}
    >
      {children}
    </ToDoListContext.Provider>
  );
};

const ToDolistApp = () => {
  return <div></div>;
};

export default ToDolistApp;

Here in this code I am using this function to make connection with my smart contract

  const connectContract = async () => {
   // console.log(toDoListABI, toDoListAddress);

    window.web3 = await new Web3(window.ethereum);
    window.contract = await new web3.eth.Contract(toDoListABI, toDoListAddress);

    console.log(window.contract);
  };

I cant see my contract instance on console

this is my package.json file

{
  "name": "todo",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "ethers": "^6.8.0",
    "next": "13.5.6",
    "react": "^18",
    "react-dom": "^18",
    "web3": "^4.2.0",
    "web3modal": "^1.9.12"
  },
  "devDependencies": {
    "@nomicfoundation/hardhat-toolbox": "^3.0.0",
    "hardhat": "^2.18.2"
  }
}

Also I get this error

Server Error Error: Directory import 'D:\todo\node_modules\web3-eth-abi\lib\esm\coders\base' is not supported resolving ES modules imported from D:\todo\node_modules\web3-eth-abi\lib\esm\coders\encode.js

This error happened while generating the page. Any console logs will be displayed in the terminal window.

I tried to unistall and install again my web3

I have been stuck with this problem for hours . I am new to web3 ,I dont know where I am going wrong

Answer 1

I think there might be a problem with a import statement.
In your todolistApp.js file, there is an import statement.

import { toDoListABI, toDoListAddress } from "./constants";

I think, it should be "./constants.js" (or likes "./constants/index.js"). This means that you should secify file name and add file extension ".js".

From MDN documents, a module-name parameter of import statement has been introduced as follows;

The module to import from. The evaluation of the specifier is host-specified. This is often a relative or absolute URL to the .js file containing the module. In Node, extension-less imports often refer to packages in node_modules. Certain bundlers may permit importing files without extensions; check your environment. Only single quoted and double quoted Strings are allowed.

references:
import - JavaScript | MDN
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

Modules: ECMAScript modules | Node.js v21.1.0 documentation
https://nodejs.org/api/esm.html#esm_mandatory_file_extensions