Why is VS Code importing from "hoist-non-react-statics/node_modules/@types/react"

Question

I recently moved my react repo into a single mono repo under /client. I installed the node_modules using yarn install when in /client

VS code intellisense is suggesting that I import from hoist-non-react-statics/node_modules/@types/react instead of from react when importing react hooks like useEffect and useRef. This leads to the below error when I compile using yarn start

Module not found: Can't resolve 'hoist-non-react-statics/node_modules/@types/react' in

I don't have 'hoist-non-react-statics' as a dependency in my package.json. My package.json dependencies are below:

"dependencies": {
    "@auth0/auth0-react": "^1.6.0",
    "@hookform/resolvers": "^2.7.1",
    "@reduxjs/toolkit": "^1.6.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/qs": "^6.9.7",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "@types/react-slider": "^1.3.1",
    "@types/react-table": "^7.7.2",
    "clsx": "^1.1.1",
    "final-form": "^4.20.2",
    "final-form-calculate": "^1.3.2",
    "lodash": "^4.17.21",
    "qs": "^6.10.1",
    "rc-checkbox": "^2.3.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-final-form": "^6.5.3",
    "react-hook-form": "^7.12.2",
    "react-redux": "^7.2.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-slider": "^1.3.1",
    "react-table": "^7.7.0",
    "react-truncate": "^2.4.0",
    "typescript": "~4.1.5",
    "yup": "^0.32.9"
  },

It seems to be an issue with the @types relating to react. I filed an issue on the react-redux github repo.

yarn upgrade @types/react fixes it. For good measure, all of the packages should probably be upgraded with yarn upgrade --latest or just all of the types with yarn upgrade --latest --pattern "@types"

https://github.com/reduxjs/react-redux/issues/1806

Answer 1

After downgrading/upgrading VSCode and TypeScript versions I found out that this problem happens with the latest TypeScript versions (tested with 4.4.2, but could exist in whole 4.4.x branch). The problem does not seem to exist in 4.3.5. What you could do is the following:

• Update VSCode to the latest version
• Make sure you have TS 4.3.5 or older installed (either globally or in the workspace project)
• Open any file with a .ts extension
• Select the TypeScript version using the dropdown in the statusbar. You either want to select the Workspace version or your global version instead of VSCode's pre-installed version.

See image below for directions on last step:

Answer 2

I have the same exact problem, with my typescript project. With npm:

npm i @types/react@latest

then restart vscode