Property not defined error message

JavaScript
1

Good evening,
I get an error message that the property “realEstate” is not defined even though it is.

Do you have any idea of ​​the problem?

Thanks to you

Sans titre
Sans titre1562×448 91.9 KB

import { useEffect, useState } from 'react';
import { ethers } from 'ethers';

// Components
import Navigation from './components/Navigation';
import Search from './components/Search';
import Home from './components/Home';

// ABIs
import RealEstate from './abis/RealEstate.json'
import Escrow from './abis/Escrow.json'

// Config
import config from './config.json';

function App() {
  const [provider, setProvider] = useState(null)
  const [escrow, setEscrow] = useState(null)

  const [account, setAccount] = useState(null)
  const [homes, setHomes] = useState([])

  const loadBlockchainData = async () => {
    const provider = new ethers.providers.Web3Provider(window.ethereum)
    setProvider(provider)

    const network = await provider.getNetwork()

    const realEstate = new ethers.Contract(config[network.chainId].realEstate.address, RealEstate, provider)
    const totalSupply = await realEstate.totalSupply()
    const homes = []

    for (var i = i; i <= totalSupply; i++) {
      const uri = await realEstate.tokenURI(i)
      const response = await fetch(uri)
      const metadata = await response.json()
      homes.push(metadata)
    }
    setHomes(homes)

    const escrow = new ethers.Contract(config[network.chainId].escrow.address, Escrow, provider)
    setEscrow(escrow)

    window.ethereum.on('accountsChanged', async () => {
      const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
      const account = ethers.utils.getAddress(accounts[0])
      setAccount(account);
    })
  }

  useEffect(() => {
    loadBlockchainData()
  }, [])

  return (
    <div>

      <Navigation account={account} setAccount={setAccount} />
      <Search />
      <div className='cards__section'>

        <h3>Homes for you</h3>

        <hr />

        <div className='cards'>
          {homes.map((home, index) => (

            <div className='card' key={index}>
              <div className='card__image'>
                <img src={home.image} alt="Home" />
              </div>
              <div className='card__info'>
                <h4>1 ETH</h4>
                <p>
                  <strong>1</strong> bds |
                  <strong>2</strong> ba |
                  <strong>3</strong> sqft
                </p>
                <p>1234 Elm St</p>
              </div>
            </div>

          ))}

        </div>

      </div>

    </div>
  );
}

export default App;
2

It’s complaining about this part.

new ethers.Contract(config[network.chainId].realEstate.address, RealEstate, provider)
                                           ^

config[network.chainId] does not exist.

1 Like
3

yes and yet “realEstate” does exist?

4

No, it doesnt.
config[network.chainId].realEstate says “give me the realEstate property of config[network.chainId]”.
The error says “config[network.chainId] is undefined, so it has no properties, and I cant look up a property that doesnt exist.”

1 Like
5

can you guide me where to look?

6

Figure out what the value of network.chainId is, and then figure out why config does not have an entry for it.

1 Like
7

ok thank you I will look at it

8

I can’t find the problem and I’m stuck with the tutorial. I arrived at 2h:1:15 for the 3 images to be displayed.

here is the link
https://www.youtube.com/watch?v=C4blK6X-D_4

9

So what’s the value of network.chainId?
What’s the value of config that corresponds to that property name?

1 Like
10

I don’t understand in the console it just tells me that the variable is not defined when I think it is

11

Which variable does it say is undefined? I asked you for the value of two different variables in post 9.

3 Likes
12

it displays nothing when I do a console just the msg indicated in my post “realState” undefined.

How do I get you to see my code on coden pen? Is this kind of project possible?

13

@m_hutley is correct. You have to find out first what value is return by network.chainId. According to that value update your json file.

For example, I did a small test of calling the provider.

Notice how I console.log the network and the network.chainId. The chainId that is returning to me is 1.

So I updated my json as this:

{
    "1": {
        "realEstate": {
            "address": "0x5FbDB2315678afecb367f032d93F642f64180aa3"
        },
        "escrow": {
            "address": "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512"
        }
    }
}

And everything is good.

<!-- templates/base.html -->
<!DOCTYPE html>
<html lang="en">

<!-- python3 -m http.server -->

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hotwire Turbo App</title>
    <script type="module">
    fetch('http://localhost:8000/config.json')
		  .then(response => response.json())
		  .then(data => {
		    // Process the JSON data
		    console.log(data);
		    console.log(data[network.chainId].realEstate.address);
		    // Export functions or variables as needed
		  })
		  .catch(error => {
		    console.error('Error fetching config:', error);
		  });
    import { ethers } from "./js/ethers.js";
    	const provider = ((window.ethereum != null) ? new ethers.providers.Web3Provider(window.ethereum) : ethers.providers.getDefaultProvider());
    	const network = await provider.getNetwork()
    	console.log(network);
    	console.log(network.chainId);

	</script>
</head>

<body>
    <p>Hello</p>
</body>

</html>
1 Like
14

thank you for your help.

I’m a novice and I tried to make a console.log like this and I don’t get a response, always the same error message.
I don’t know if I wrote it correctly?

function App() {
  const [provider, setProvider] = useState(null)
  const [escrow, setEscrow] = useState(null)

  const [account, setAccount] = useState(null)
  const [homes, setHomes] = useState([])

  const loadBlockchainData = async () => {
    const provider = new ethers.providers.Web3Provider(window.ethereum)
    setProvider(provider)

    const network = await provider.getNetwork()

    const realEstate = new ethers.Contract(config[network.chainId].realEstate.address, RealEstate, provider)
    const totalSupply = await realEstate.totalSupply()
    const homes = []

    console.log(config[network.chainId].realEstate.address);

    for (var i = 1; i <= totalSupply; i++) {
      const uri = await realEstate.tokenURI(i)
      const response = await fetch(uri)
      const metadata = await response.json()
      homes.push(metadata)
    }
    setHomes(homes)

    const escrow = new ethers.Contract(config[network.chainId].escrow.address, Escrow, provider)
    setEscrow(escrow)

and my config.json file

{
    "31337": {
        "realEstate": {
            "address": "0x5FbDB2315678afecb367f032d93F642f64180aa3"
        },
        "escrow": {
            "address": "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512"
        }
    }
}
15

Well this is the problem. You are putting this console log

When a few lines above is already throwing errors all over the place:

const realEstate = new ethers.Contract(config[network.chainId].realEstate.address, RealEstate, provider)

Put your console logs just after network. For example:

const network = await provider.getNetwork()
    	console.log(network);
    	console.log(network.chainId);

And let us know of the result

1 Like
16

I did like this and I got this message

function App() {
  const [provider, setProvider] = useState(null)
  const [escrow, setEscrow] = useState(null)

  const [account, setAccount] = useState(null)
  const [homes, setHomes] = useState([])

  const loadBlockchainData = async () => {
    const provider = new ethers.providers.Web3Provider(window.ethereum)
    setProvider(provider)

    const network = await provider.getNetwork()
    console.log(network);
    console.log(network.chainId);

    const realEstate = new ethers.Contract(config[network.chainId].realEstate.address, RealEstate, provider)
    const totalSupply = await realEstate.totalSupply()
    const homes = []

Sans titre
Sans titre1562×298 84.2 KB

17

and what was the line immediately before that error

18

I just added the two console.log after this line

const network = await provider.getNetwork()

console.log(network);
    console.log(network.chainId);
19

I also see that I have errors like home, provider not defined although I think it is correct?

Sans titre
Sans titre1562×789 215 KB

20

You image is not showing all the console output. Remember it will put the output and continue down the code where it will throw errors you are seeing. Put the full output

1 Like