1

This is the entire error message:

Error: TypeError: Cannot read properties of undefined (reading 'JsonRpcProvider')
    at interactWithContract (contractInteraction.js:6:1)
    at handleAddProduct (ProductForm.js:10:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
    at invokeGuardedCallback (react-dom.development.js:4277:1)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1)
    at executeDispatch (react-dom.development.js:9041:1)
    at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1)
    at processDispatchQueue (react-dom.development.js:9086:1)
    at dispatchEventsForPlugins (react-dom.development.js:9097:1)

Here is my contractInteraction.js

import contractAbi from './contract.json';
const { ethers } = require("ethers");

async function interactWithContract(productId, productName) {
  try {
    const provider = new ethers.providers.JsonRpcProvider('https://rpc.ankr.com/eth_sepoliag');
    console.log('Provider initialized:', provider);
    const signer = provider.getSigner();
    const contractAddress = '0xbb15b1a4fa50d81b46ea823f73995a98ce8b9fe0';
    const contract = new ethers.Contract(contractAddress, contractAbi, signer);
    const tx = await contract.addProduct(productId, productName);
    await tx.wait();
    console.log('Product added successfully!');
  } catch (error) {
    console.error('Error:', error);
  }
}

export { interactWithContract };

Here is my ProductForm.js

import React, { useState } from 'react';
import { interactWithContract } from './contractInteraction.js'; 

function ProductForm() {
  const [productId, setProductId] = useState('');
  const [productName, setProductName] = useState('');

  const handleAddProduct = async () => {
    await interactWithContract(productId, productName);
    setProductId('');
    setProductName('');
  };

  return (
    <div>
      <h2>Add a Product</h2>
      <label>
        Product ID:
        <input
          type="number"
          value={productId}
          onChange={(e) => setProductId(e.target.value)}
        />
      </label>
      <br />
      <label>
        Product Name:
        <input
          type="text"
          value={productName}
          onChange={(e) => setProductName(e.target.value)}
        />
      </label>
      <br />
      <button onClick={handleAddProduct}>Add Product</button>
    </div>
  );
}

export default ProductForm;

2 Answers 2

1

if your ethers package is 5.7.2 , then it should work,

if your ethers 6.0.0 or latest version.

then you should check the documentation of latest ethers.

in my opnion, latest ethers library is buggy than the oldest ethers 5.7.2

1
  • Thank you this fixed my code ! Sep 20, 2023 at 21:04
0

Probably it's because you are using a recent version of ethers.js.

OLD

ethers.providers.JsonRpcProvider

NEW ONE

ethers.JsonRpcProvider

1

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.