Type 'undefined' cannot be used as an index type

[NarithChesda]

What's wrong with this?
It was working just fine, but then it became error... anybody having the same problem?

now I just assign index directly to the networkMapping[ ] to get it working.
noted : I'm doing front-end separately from the contract folder, I just copy the deployment and contract folder from build to src in my front-end project.

Main.tsx

import { useEthers } from '@usedapp/core'
import networkMapping from '../chain-info/deployments/map.json'
import { constants } from 'ethers'
import dapp from '../dapp.png'
import eth from '../eth.png'
import dai from '../dai.png'
import { EarnPage } from './earn/EarnPage'
import { Box, Divider, Typography } from '@mui/material'

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

export const Main = () => {
  const { chainId, error } = useEthers()

  const dappTokenAddress = chainId
    ? networkMapping[42]['DappToken'][0]
    : constants.AddressZero
  const wethTokenAddress = chainId
    ? networkMapping[42]['WethToken'][0]
    : constants.AddressZero
  const fauTokenAddress = chainId
    ? networkMapping[42]['FauToken'][0]
    : constants.AddressZero

  const supportedTokens: Array<Token> = [
    {
      name: 'DAPP',
      image: dapp,
      address: dappTokenAddress,
    },
    {
      name: 'WETH',
      image: eth,
      address: wethTokenAddress,
    },
    {
      name: 'DAI',
      image: dai,
      address: fauTokenAddress,
    },
  ]

  return (
    <Box alignContent="center">
      <Typography textAlign="center" variant="h3" padding={6} fontWeight="800">
        Syrup Pool
      </Typography>
      <EarnPage supportedTokens={supportedTokens} />
    </Box>
  )
}

This is my map.json

{
  "42": {
    "DappToken": ["0x7dA443383a8F7FCD3b2f2C473066C39FE3dfcE13"],
    "TokenFarm": ["0xfe3cbA318740a6312356c129fe83E581dC1a6631"],
    "WethToken": ["0xd0a1e359811322d97991e03f863a0c30c2cf029c"],
    "FauToken": ["0xFab46E002BbF0b4509813474841E0716E6730136"]
  }
}

my package.json

{
  "name": "defi-platform",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@fontsource/roboto": "^4.5.5",
    "@mui/icons-material": "^5.5.1",
    "@mui/material": "^5.5.3",
    "@mui/styled-engine-sc": "^5.5.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^17.0.20",
    "@types/react-dom": "^17.0.9",
    "@usedapp/core": "^0.12.2",
    "ethers": "^5.6.2",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.5",
    "typescript": "^4.4.2",
    "web-vitals": "^2.1.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

it was working fine when I followed along with the tutorial, but I was having trouble with @usedapp/[email protected] as useTokenBalance and useContractCall always return undefined, so I upgrade @usedapp/core to @0.12.2(latest) and it fixed that problem but it came with this new problem.

[cromewar]

Hello there @Kuchy300
Please refer to #980 in order to know how to reformulate your question.
By far it seems you don't have declared networkMapping on your code.

[NarithChesda]

I have, now I'm using const dappTokenAddress = chainId ? networkMapping[42]["DappToken"][0] : constants.AddressZero, a barbaric way to get by.

[cromewar]

Is your problem solved then?

[NarithChesda]

it's not, cause I want to be able to switch between different chain, this one will only work with the network that I typed into the index [ ], I can't use the undefined value that I got from ' const { chainId } = useEthers() '.

[cromewar]

You can create an array of allowed chains and them from it.

[Niferu]

Hello @NarithChesda
I had very similar issue, but in my case error was because chainId had no number value somehow and it was string or smth so type was not for indexing, I couldn't find issue with my code as it was the same and was moving on with course then suddenly my error perished miraculously.

I know it is pretty old issue but it's still unanswered, so solution for you @NarithChesda is that you have chainId instead of stringChainId in your code, maybe it will be helpful for someone:

networkMapping[chainId]["DappToken"][0] : constants.AddressZero

instead of

networkMapping[stringChainId]["DappToken"][0] : constants.AddressZero

@cromewar unfortunately I do not have screens from my index incorrect type error, but do you have any idea why that error might occur? I have just updated Main.tsx by adding useStyles and return() as it is in repo, nothing else and error perished. I believe it is working now as chainId is assigned as number somehow as below and when my error was keep occuring for helperConfig[chainId], networkMapping[stringChainId] and brownieConfig["networks"][networkName]["weth_token"] it was undefined as in @NarithChesda case, but I wonder why... If you know answer it would be great to hear why was that not working for a while for me and then it fixed itself, otherwise do not waste your time as issue is now solved and i cannot even get back to see those errors again (I have came back with code to exact moment errors were popping but now they are gone even there).