Lesson 13 - stringChainId is undefined

[sk67dev]

Hi,

I'm getting the following error:

'TypeError: chain_info_deployments_map_json__WEBPACK_IMPORTED_MODULE_2_[stringChainId] is undefined'

Some help on how to fix this would be great.

[cromewar]

Hi @sk67dev did you import it correctly?

import networkMapping from "../chain-info/deployments/map.json"

this should be on defi-stake-yield-brownie-freecode/front_end/src/components/Main.tsx

Could you copy-past your code here so we cant give it a check?

Also take in consideration this:

The TypeError object represents an error when an operation could not be performed, typically (but not exclusively) when a value is not of the expected type.

A TypeError may be thrown when:

an operand or argument passed to a function is incompatible with the type expected by that operator or function; or
when attempting to modify a value that cannot be changed; or
when attempting to use a value in an inappropriate way.

[sk67dev]

Thanks for your response! I've imported it exactly the same but I'm still receiving an error. Here's my code:
Main.tsx

/* eslint-disable spaced-comment */
/// <reference types="react-scripts" />
import { useEthers } from "@usedapp/core"
import helperConfig from "../helper-config.json"
import networkMapping from "../chain-info/deployments/map.json"
import { constants } from "ethers"
import brownieConfig from "../brownie-config.json"
import dapp from "../dapp.png"
import eth from "../eth.png"
import dai from "../dai.png"
import { YourWallet } from "./yourWallet"
import { makeStyles } from "@material-ui/core"

export type Token = {
    image: string
    address: string
    name: string
}

const useStyles = makeStyles((theme) => ({
    title: {
        color: theme.palette.common.white,
        textAlign: "center",
        padding: theme.spacing(4)
    }
}))

export const Main = () => {
    // Show token values from the wallet
    // Get the address of different tokens
    // Get the balance of the users wallet
    // send the brownie-config to our `src` folder
    // send the build folder
    const classes = useStyles()
    const { chainId, error } = useEthers()
    const networkName = chainId ? helperConfig[chainId] : "dev"
    let stringChainId = String(chainId)
    const dappTokenAddress = chainId ? networkMapping[stringChainId]["DappToken"][0] : constants.AddressZero
    const wethTokenAddress = chainId ? brownieConfig["networks"][networkName]["weth_token"] : constants.AddressZero // brownie config
    const fauTokenAddress = chainId ? brownieConfig["networks"][networkName]["fau_token"] : constants.AddressZero
    const supportedTokens: Array<Token> = [
        {
            image: dapp,
            address: dappTokenAddress,
            name: "DAPP"
        },
        {
            image: eth,
            address: wethTokenAddress,
            name: "WETH"
        },
        {
            image: dai,
            address: fauTokenAddress,
            name: "DAI"
        }
    ]
    return (<>
        <h2 className={classes.title}>Dapp Token App</h2>
        <YourWallet supportedTokens={supportedTokens} />
    </>)
}

[cromewar]

Well reading the documentation it seems:

const dappTokenAddress = chainId ? networkMapping[stringChainId]["DappToken"][0] : constants.AddressZero

Expects a different variable type than

let stringChainId = String(chainId)

is providing, which is strange according to the documentation: https://usedapp.readthedocs.io/en/latest/core.html?highlight=useEthers#useethers

Let's try something, could you please try this:

Replace from this:

let stringChainId = String(chainId)
const dappTokenAddress = chainId ? networkMapping[stringChainId]["DappToken"][0] : constants.AddressZero

to this:

const dappTokenAddress = chainId ? networkMapping[String(chainId)]["DappToken"][0] : constants.AddressZero

also add to your tsconfig.json this line (the file should be on the front_end folder)

"suppressImplicitAnyIndexErrors": true

finally don't forget to install ethers using yarn or npm

yarn add ethers

or

npm i ethers