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

Montagu

I'm experiencing the same all out of a sudden, and since other people do too in this thread, I'm suspecting a bug in VSCode. For me it happens with react-router and a couple of other libraries. – Edentate

After some more testing, I figured out it's a bug in the most recent typescript version (4.4.2+), I'll create an answer with a solution – Edentate

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:

Edentate

Since I'm back here again... I'm going to leave this for anyone else who needs it; how to install the right TypeScript globally: npm i -g [email protected], which doesn't seem to work for the version selector, so I guess you have to temporarily add it to your project if it's not already there : \ via: npm i -D [email protected] – Choreodrama

This did indeed solve this issue but for some reason, VSCode stopped showing me the used TS version in the status bar. Anyone knows why? – Puentes

Answer 2

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

npm i @types/react@latest

then restart vscode

Extension

This should be the accepted answer – Debutant

Answer 3

I have the same issue. Upgrading @types/react did not help. I had to remove it to fix the problem. Some how I still get type definition from somewhere. This just start happening on a project I have been working on for a year. Not sure if its coming from a VsCode update or upgrading react a couple weeks back.

The bug is happening on VsCode windows and mac.

Damiandamiani

Please add further details to expand on your answer, such as working code or documentation citations. – Golding

Welcome & thanks for your contribution. I have posted a solution which solves the issue without makeing changes to the types, might want to check it out. – Edentate

Answer 4

This will be fixed with the new version (4.5) of TypeScript. See: https://github.com/microsoft/TypeScript/issues/45784 https://github.com/microsoft/TypeScript/pull/45792

Until this is released, you can use the next version.

npm i typescript@next

Don't forget to regenerate the lock file to make sure the right version is installed.

Norse

Here we are in 2024 and it's still a problem in the latest TypeScript. – Dance