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

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"

4 Answers

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:

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

npm i @types/react@latest 

then restart vscode

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.

This will be fixed with the new version (4.5) of TypeScript. See:

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.