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"
  }