eslint - Unable to resolve path to module '@web3modal/ethers/react' import/no-unresolved

Question

import { createWeb3Modal, defaultConfig, useWeb3ModalAccount } from '@web3modal/ethers/react'

in this line I am getting this error

ERROR in [eslint]
src\components\App\App.jsx
  Line 1:69:  Unable to resolve path to module '@web3modal/ethers/react'  import/no-unresolved 

even I have installed in package.json

"dependencies": {
    "@sentry/cli": "^2.31.0",
    "@sentry/react": "^7.108.0",
    "@tanstack/react-query": "^5.28.2",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^15.0.4",
    "@testing-library/user-event": "^14.5.2",
    "@web3modal/ethers": "^4.1.11",
    "eslint-plugin-prettier": "^5.1.3",
    "eth-connect": "^6.2.4",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-google-recaptcha-v3": "^1.10.1",
    "react-redux": "^9.1.0",
    "react-router-dom": "^6.22.3",
    "react-scripts": "5.0.1",
    "recoil": "^0.7.7",
    "redux": "^5.0.1",
    "web-vitals": "^2.1.4"
  },

doing this

// eslint-disable-next-line import/no-unresolved

make the error disappear but this is not the right way, this is temporary, can anyone please help to solve this permanently, so it wont give error in eslint.

Answer 1

esLint got solved, since I was not using typescript and my project is simple Create-react-app project with only js, and jsx, so ts , tsx was not written in .eslintrc.json

"import/resolver": {
      "node": {
           "extensions": [".js", ".jsx", ".ts", ".tsx"]
      },
      "typescript": {}
}

and then

npm I -D eslint-import-resolver-typescript

and yes, esLint not showing error