Auto-imports offered from another package’s node_modules

[Kvek]

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: Version: 1.60.0
• OS Version: OS: Darwin x64 20.6.0

Steps to Reproduce:

1. Open any .tsx file.
2. type in useEffect | useRef | useState
3. Click the autocomplete value.

The usual import path is @types/react/index.d.ts. It's now importing it from the file @types/react-transition-group/node_modules/@types/react/index. The @types/react option isn't event shown.

Another thing I noticed is the path is displayed as styled-jsx/node_modules/@types/react but when I click into this file it takes me to @types/react-transition-group/node_modules/@types/react/index, which has nothing to do with styled-jsx from what I can tell.

This is such a weird issue. It was working yesterday, but now it suddenly popped out of nowhere. Any help is much appreciated.

[danieldt232]

Happens to me as well. Downgraded to 1.59 for now (works fine there)

[andrewbranch]

@Kvek @danieldt232 Would either of you be able to provide a link to a repo where this is happening? Short of that, your dependencies/devDependencies and what package manager you’re using would help.

[dgattey]

Also happening to me on Darwin arm64 1.60.0, but it's auto importing from hoist-non-react-statics. Happens for useState, useEffect, useCallback, etc. Can't share source since private repo, sorry! .

Downgrading fixed it (though now there are duplicate entries...)

[andrewbranch]

@dgattey can you confirm that react is in your package.json dependencies or peerDependencies?

[dgattey]

@dgattey can you confirm that react is in your package.json dependencies or peerDependencies?

Looks as expected! Though we do have some types in the wrong section. Nothing off otherwise

"dependencies": {
    "@apollo/client": "3.3.19",
    "@sentry/nextjs": "6.10.0",
    "@shopify/app-bridge": "2.0.2",
    "@shopify/app-bridge-utils": "2.0.2",
    "@shopify/polaris": "6.5.0",
    "@shopify/polaris-icons": "4.5.0",
    "@shopify/react-form": "1.0.1",
    "@stripe/react-stripe-js": "1.4.1",
    "@stripe/stripe-js": "1.15.0",
    "@typeform/embed": "1.10.0",
    "@typeform/embed-react": "1.0.5",
    "@types/react-gtm-module": "2.0.1",
    "@types/react-transition-group": "4.4.1",
    "axios": "0.21.1",
    "flag": "4.4.0",
    "graphql": "15.5.0",
    "js-cookie": "3.0.0",
    "luxon": "1.27.0",
    "next": "11.0.1",
    "polished": "4.1.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-gtm-module": "2.0.11",
    "react-icons": "4.2.0",
    "react-multi-carousel": "2.6.3",
    "react-textarea-autosize": "8.3.3",
    "react-transition-group": "4.4.2",
    "remixicon": "2.5.0",
    "styled-components": "5.3.0",
    "styled-flex-component": "3.0.5",
    "styled-normalize": "8.0.7",
    "useful-types": "0.4.0",
    "webpack": "5.46.0"
  },
  "devDependencies": {
    "@commitlint/cli": "12.1.4",
    "@commitlint/config-conventional": "12.1.4",
    "@semantic-release/changelog": "5.0.1",
    "@semantic-release/git": "9.0.0",
    "@shopify/stylelint-plugin": "10.1.2",
    "@types/js-cookie": "2.2.7",
    "@types/luxon": "1.26.5",
    "@types/node": "15.12.2",
    "@types/numeral": "2.0.1",
    "@types/react": "17.0.9",
    "@types/react-stripe-elements": "6.0.4",
    "@types/styled-components": "5.1.9",
    "@types/styled-jsx": "2.2.8",
    "@typescript-eslint/eslint-plugin": "4.26.1",
    "@typescript-eslint/parser": "4.26.1",
    "apollo": "2.33.4",
    "eslint": "7.28.0",
    "eslint-config-airbnb-typescript": "12.3.1",
    "eslint-config-canal": "link:./eslint-plugin-canal",
    "eslint-config-next": "11.0.1",
    "eslint-config-prettier": "8.3.0",
    "eslint-import-resolver-typescript": "2.4.0",
    "eslint-plugin-canal": "link:./eslint-plugin-canal",
    "eslint-plugin-import": "2.23.4",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-react": "7.24.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-plugin-tsc": "2.0.0",
    "husky": "6.0.0",
    "lint-staged": "11.0.0",
    "prettier": "2.3.1",
    "semantic-release": "17.4.3",
    "stylelint": "13.13.1",
    "stylelint-config-recommended": "5.0.0",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-processor-styled-components": "1.10.0",
    "stylelint-z-index-value-constraint": "1.1.0",
    "typescript": "4.3.2"
  },

[andrewbranch]

Nope, still can’t reproduce 😞. @dgattey, when I install these packages with npm, neither host-non-react-statics nor @types/hosist-non-react-statics even has a node_modules subdirectory. What package manager are you using, what version of it, and can you send me your current lockfile? Other ways forward include:

• Get a TS Server log (be aware it will contain file contents—you can self-censor it or email it to me in private: {first}.{last}@microsoft.com)
• Give me read access to a repo if that's acceptable

[dgattey]

@andrewbranch Using yarn 1.22.11 on macOS on an M1 MBP, and here's the lock file! Will work on getting you read access during business hours tomorrow. https://www.dropbox.com/s/t0gd8dlpyz8420c/yarn.lock?dl=0

I got curious and looked at another project, similar setup but different packages and uses Gatsby instead of Next. I'm ALSO seeing hoist-non-react-statics there, but I do have access to the right value of useEffect through "AI". But quite literally before having this problem for the first time after updating last night, I had never seen hoist-non-react-statics before. Something in this update definitely makes it appear but seeing this in two repos makes me think it's perhaps not related to project setup.

Anyway, here's the TS Server log from project 1 (Next.js repo from before): https://www.dropbox.com/s/yuzuzztjue14671/tsserver.log?dl=0

And from project 2 (Gatsby repo): https://www.dropbox.com/s/eyjl0l88fguk0pe/tsserver-2.log?dl=0

Dependencies for project 2 are:

"dependencies": {
    "@fullstory/browser": "^1.4.6",
    "@sentry/react": "^6.9.0",
    "bootstrap": "^4.5.3",
    "classnames": "^2.2.6",
    "copy-to-clipboard": "^3.3.1",
    "dotenv": "^10.0.0",
    "faker": "^5.5.2",
    "gatsby": "^3.9.1",
    "gatsby-plugin-fullstory": "^3.9.0",
    "gatsby-plugin-google-analytics": "^3.9.0",
    "gatsby-plugin-google-tagmanager": "^3.10.0",
    "gatsby-plugin-image": "^1.9.0",
    "gatsby-plugin-intercom-spa": "^0.2.0",
    "gatsby-plugin-mailchimp": "^5.2.2",
    "gatsby-plugin-manifest": "^3.9.0",
    "gatsby-plugin-netlify-cms": "^5.9.0",
    "gatsby-plugin-react-helmet": "^4.9.0",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-remove-serviceworker": "^1.0.0",
    "gatsby-plugin-resolve-src": "^2.1.0",
    "gatsby-plugin-sass": "^4.9.0",
    "gatsby-plugin-sharp": "^3.9.0",
    "gatsby-plugin-sitemap": "^3.2.0",
    "gatsby-plugin-styled-components": "^4.9.0",
    "gatsby-plugin-web-font-loader": "^1.0.4",
    "gatsby-source-contentful": "^5.9.0",
    "gatsby-source-filesystem": "^3.9.0",
    "gatsby-transformer-sharp": "^3.9.0",
    "markdown-to-jsx": "^7.1.2",
    "netlify-cms-app": "^2.15.27",
    "prism-theme-night-owl": "^1.4.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.4.0",
    "react-copy-to-clipboard": "^5.0.3",
    "react-dom": "^17.0.2",
    "react-feather": "^2.0.9",
    "react-helmet": "^6.1.0",
    "react-intersection-observer": "^8.32.0",
    "react-multi-carousel": "^2.6.1",
    "react-responsive": "^8.2.0",
    "react-reveal": "^1.2.2",
    "react-rotating-text": "^1.4.1",
    "react-script-hook": "^1.3.0",
    "react-syntax-highlighter": "^15.4.3",
    "react-transition-group": "^4.4.1",
    "sass": "^1.35.2",
    "styled-components": "^5.3.0",
    "trie-search": "^1.3.5",
    "universal-cookie": "^4.0.4",
    "use-onclickoutside": "^0.4.0"
  },
  "devDependencies": {
    "@contentful/rich-text-types": "^15.1.0",
    "@prettier/plugin-ruby": "^1.6.1",
    "@types/react": "^17.0.19",
    "@types/react-copy-to-clipboard": "^5.0.1",
    "@types/react-dom": "^17.0.9",
    "@types/react-helmet": "^6.1.2",
    "@types/react-responsive": "^8.0.3",
    "@types/react-syntax-highlighter": "^13.5.2",
    "@types/styled-components": "^5.1.12",
    "@typescript-eslint/eslint-plugin": "^4.29.2",
    "@typescript-eslint/parser": "^4.29.2",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-typescript": "^13.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-typescript": "^2.4.0",
    "eslint-plugin-import": "^2.24.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-tsc": "^2.0.0",
    "gatsby-cli": "^3.12.0",
    "husky": "^7.0.1",
    "lint-staged": "^11.1.2",
    "openapi-types": "^9.2.0",
    "prettier": "^2.3.2",
    "typescript": "^4.3.5"
  }

[andrewbranch]

A-ha, it does indeed repro with yarn and that lockfile. And it looks like my build at https://github.com/microsoft/TypeScript/pull/45792 fixes it, meaning this is the same root cause as #45763. Thank you so much @dgattey!

[dgattey]

Thanks for the quick fix @andrewbranch!

[Kvek]

@Kvek @danieldt232 Would either of you be able to provide a link to a repo where this is happening? Short of that, your dependencies/devDependencies and what package manager you’re using would help.

My apologies @andrewbranch, a little late to the party. Unfortunately it's my company's repo, so it's private. I'm using npm.

node - v12.13.0; npm - 6.12.0;

 "dependencies": {
    "@date-io/core": "1.3.6",
    "@date-io/date-fns": "1.3.6",
    "@material-ui/core": "^4.11.4",
    "@material-ui/icons": "^4.11.2",
    "@material-ui/lab": "^4.0.0-alpha.58",
    "@material-ui/pickers": "^3.3.10",
    "@mdi/js": "^5.9.55",
    "@mdi/react": "^1.5.0",
    "@reach/router": "^1.3.4",
    "@reduxjs/toolkit": "^1.5.1",
    "ag-grid-community": "^25.3.0",
    "ag-grid-react": "^25.3.0",
    "classnames": "2.2.6",
    "clipboard-copy": "3.1.0",
    "date-fns": "2.23.0",
    "dayjs": "1.10.4",
    "debounce": "1.2.1",
    "google-protobuf": "3.17.3",
    "grpc-web": "1.2.1",
    "node-sass": "4.14.1",
    "numbro": "2.3.2",
    "ramda": "0.27.1",
    "rc-dock": "^2.6.2",
    "react": "^17.0.1",
    "react-datepicker": "4.2.1",
    "react-dom": "^17.0.1",
    "react-flag-icon-css": "^1.0.25",
    "react-grid-layout": "^0.18.3",
    "react-helmet": "^6.1.0",
    "react-modal": "^3.14.3",
    "react-redux": "7.1.0",
    "react-scripts": "^4.0.3",
    "react-spring": "9.0.0-rc.3",
    "react-toastify": "^6.1.0",
    "react-transition-group": "4.2.2",
    "redux": "4.0.4",
    "redux-devtools-extension": "^2.13.8",
    "redux-logger": "^3.0.6",
    "redux-observable": "^1.2.0",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0",
    "rxjs": "6.6.7",
    "styled-components": "5.1.0",
    "uuid": "3.4.0"
  },

"devDependencies": {
    "@commitlint/cli": "^12.1.4",
    "@commitlint/config-conventional": "^12.1.4",
    "@commitlint/format": "^12.0.1",
    "@commitlint/prompt-cli": "^12.1.4",
    "@microsoft/tsdoc": "^0.12.9",
    "@types/classnames": "^2.2.11",
    "@types/debounce": "^1.2.0",
    "@types/jest": "24.0.18",
    "@types/node": "12.7.5",
    "@types/numbro": "^1.9.3",
    "@types/ramda": "0.27.44",
    "@types/reach__router": "^1.2.5",
    "@types/react": "^16.9.2",
    "@types/react-datepicker": "^3.1.2",
    "@types/react-dom": "16.9.0",
    "@types/react-flag-icon-css": "^1.0.4",
    "@types/react-grid-layout": "^1.1.1",
    "@types/react-helmet": "^6.1.2",
    "@types/react-redux": "^7.1.5",
    "@types/redux": "3.6.0",
    "@types/redux-logger": "^3.0.8",
    "@types/redux-thunk": "2.1.0",
    "@types/styled-components": "^4.1.19",
    "@types/uuid": "^8.3.1",
    "@types/yup": "^0.26.24",
    "@typescript-eslint/eslint-plugin": "^4.30.0",
    "@typescript-eslint/parser": "^4.30.0",
    "babel-eslint": "^10.1.0",
    "enzyme": "^3.10.0",
    "enzyme-adapter-react-16": "^1.14.0",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-formatter-mo": "^1.0.0",
    "eslint-plugin-flowtype": "^5.9.1",
    "eslint-plugin-import": "^2.24.2",
    "eslint-plugin-jest": "^21.15.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.25.1",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "eslint-plugin-sort-destructure-keys": "^1.3.5",
    "eslint-plugin-sort-keys-fix": "^1.1.2",
    "eslint-plugin-typescript-sort-keys": "^1.7.0",
    "husky": "^4.3.8",
    "lint-staged": "^10.5.4",
    "prettier": "2.2.1",
    "pretty-quick": "^1.11.1",
    "react-test-renderer": "16.12.0",
    "typescript": "^4.2.3",
    "typescript-styled-plugin": "^0.15.0",
    "webpack-bundle-analyzer": "^4.4.2",
    "worker-plugin": "^1.1.1"
  }

[Kvek]

Sorry, accidentally closed it.

[andrewbranch]

@Kvek, would you be willing to see if #45792 fixes it for you? You can install the packed TypeScript version there by following the instructions in @typescript-bot’s last message. Then, ensure VS Code is using that version by running Select TypeScript Version from the command palette.

[Kvek]

@andrewbranch I manged to fix the issue by updating "@types/react" from ^16.9.2 to ^17.0.21. Deleted node_modules, npm i and restarted my TS server.

Thanks for the help tho, much appreciated 😄

[nick-lvov-dev]

I have the same issue, updating the "@types/react" package didn't help

[Hless]

Have the same issue, I've pinned the problem down to the current v4.4.x TypeScript version and posted a solution on stackoverflow to temporarily fix it while staying on the latest VSCode version, see here

@andrewbranch I have tested the internal build you linked as well and that does seem to fix it for me.

[andrewbranch]

Just as a status update, the PR that fixes this is a definite improvement, but it leaves a few very strange edge cases unhandled. I’m hoping to improve it further, but either way, the issue will definitely be fixed for TS 4.5 RC, but is unlikely to be backported to a TS 4.4 patch. When this issue is closed, that means the fix will be in the next nightly release.

[yyx990803]

Just want to add that this behavior breaks auto imports for Vue 3 as well (https://github.com/microsoft/TypeScript/issues/46115)

We have a re-export chain of vue -> @vue/runtime -> @vue/reactivity. Previously auto imports are resolved from vue (which is listed in package.json) but now it always suggests imports from @vue/reactivity (the package with the d.ts file that declares the original functions).

What's worse is if we use a strict package manager like pnpm, while the suggestions still appear, the auto import won't work (probably because transitive deps like @vue/reactivity isn't directly resolvable from project root with pnpm's strict install structure)

[eglavin]

Hi I just wanted to add this in that I'm still receiving the same issue even on the insiders build with no extensions installed, the above image is from stable but when i install an older version of typescript its back to normal but selecting the built in vs code typescript it seems to pull the wrong types.

I've tried updating all the project dependencies but that has no change.

It seems to only be happening in the project I'm working on as a new create react app project seems fine.

Update (Fixed I think): It looks like deleting my yarn lock and regenerating it has triggered it to start working again with typescript v4.4.3.. Honestly don't see what's changed in the diff between the old and new yarn.lock that would have caused it to break to begin with...

[andrewbranch]

The fix is not in 4.4; it is in the nightly and will be in 4.5. You need to use typescript@next (also available via the JavaScript and TypeScript Nightly extension) in order to get the fix now. The problem is highly dependent upon the structure of your node_modules, so it’s not surprising that it might go away for some people by regenerating their lock file, but not for others.

[eglavin]

Thanks for the reply Andrew yeah I've had it working since then now alright will await the update 😁

[JulianKingman]

I'm still having this issue with 4.5, besides updating are there any other steps I need to take?

[andrewbranch]

@JulianKingman 4.5.what? It's not in 4.5 beta; it's in the nightly.

[merobal]

I tried 4.5.0-dev.20211021 with regenerated lock file, and it works well for me. Looking forward for official v4.5 release.

[lcnogueira]

Installing typescript@next (which installed "typescript": "^4.5.0-dev.20211022") and deleting the .next folder worked for me as well. Thanks, @andrewbranch .

[merobal]

I just want to share it works perfectly with "@types/react": "17.0.31" but as soon as I update types to 17.0.32-34 this bug appears again. (Tested with "typescript": "4.5.1-rc")

Not sure what changed at @types/react and not sure if it's a bug there or at TypeScript.

With "@types/react": "17.0.34" (current latest)

With "@types/react": "17.0.31"

Edit: VS Code used old version, it works good with 4.5 RC.

[andrewbranch]

@merobal are you 100% sure that VS Code is using TS 4.5.1-rc (see/click TypeScript in the status bar to find out)?

I don’t know how this could be happening again after my fix. Unfortunately, to reproduce this, I basically need an exact copy of your node_modules. Can you share your npm/yarn lock file for this project? A repo I can clone would be a bonus.

[merobal]

@andrewbranch right, VS Code used it's own version, TS 4.4.3. Using workspace version (4.5 RC) the bug is gone even with latest react types and works perfectly.

[andrewbranch]

😅 You scared me for a second. Thanks for checking!

[mihanizm56]

"react": "17.0.2",
"@types/react": "17.0.21",
"typescript": "4.5.3"

still got an error with Type 'React.ReactNode' is not assignable to type 'import("/.../node_modules/@types/hoist-non-react-statics/node_modules/@types/react/index").ReactNode'.

error comes after reinstall node_modules without any updates

[merobal]

"@types/react": "17.0.21", is old version, try "@types/react": "17.0.39",

[mihanizm56]

Fixed by patching lockfile with resolutions to 17th react version. Because host-non-react-statics imports 18th @types/react. React-redux types did the same thing. Resolve all typings @types/react to 17th solve all problems.

[andrewbranch]

If you end up with two different copies of React typings in your program, you’re going to have a terrible time, and you need to fix it by fiddling with resolutions like you said. This issue is specifically about auto-imports coming from node_modules folders you don’t have direct access to. Errors like the one you encountered are 100% expected until you fix the resolutions.

[mihanizm56]

If you end up with two different copies of React typings in your program, you’re going to have a terrible time, and you need to fix it by fiddling with resolutions like you said. This issue is specifically about auto-imports coming from node_modules folders you don’t have direct access to. Errors like the one you encountered are 100% expected until you fix the resolutions.

Resolve deps not a problem at all for me =) But if you have resolved all react deps, it not depends if types are taken from the right package or not =)