Skip to content

Auto-imports offered from another package’s node_modules #45784

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Kvek opened this issue Sep 7, 2021 · 33 comments · Fixed by #45792
Closed

Auto-imports offered from another package’s node_modules #45784

Kvek opened this issue Sep 7, 2021 · 33 comments · Fixed by #45792
Assignees
Labels
Bug A bug in TypeScript Fix Available A PR has been opened for this issue

Comments

@Kvek
Copy link

Kvek commented Sep 7, 2021

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.

Screenshot 2021-09-07 at 16 08 25

Screenshot 2021-09-07 at 16 08 59

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
Copy link

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

@mjbvz mjbvz transferred this issue from microsoft/vscode Sep 8, 2021
@mjbvz mjbvz removed their assignment Sep 8, 2021
@andrewbranch andrewbranch self-assigned this Sep 8, 2021
@andrewbranch andrewbranch added the Bug A bug in TypeScript label Sep 8, 2021
@andrewbranch andrewbranch added this to the TypeScript 4.5.1 milestone Sep 8, 2021
@andrewbranch
Copy link
Member

@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
Copy link

dgattey commented Sep 8, 2021

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!
image.

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

@andrewbranch
Copy link
Member

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

@dgattey
Copy link

dgattey commented Sep 8, 2021

@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
Copy link
Member

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
Copy link

dgattey commented Sep 9, 2021

@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.
image

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
Copy link
Member

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

@dgattey
Copy link

dgattey commented Sep 9, 2021

Thanks for the quick fix @andrewbranch!

@Kvek
Copy link
Author

Kvek commented Sep 13, 2021

@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 Kvek closed this as completed Sep 13, 2021
@Kvek Kvek reopened this Sep 13, 2021
@Kvek
Copy link
Author

Kvek commented Sep 13, 2021

Sorry, accidentally closed it.

@andrewbranch
Copy link
Member

@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
Copy link
Author

Kvek commented Sep 15, 2021

@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.
Screenshot 2021-09-15 at 11 57 26
Screenshot 2021-09-15 at 12 04 33

Thanks for the help tho, much appreciated 😄

@Kvek Kvek closed this as completed Sep 15, 2021
@andrewbranch andrewbranch reopened this Sep 15, 2021
@nick-lvov-dev
Copy link

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

@Hless
Copy link

Hless commented Sep 28, 2021

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
Copy link
Member

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
Copy link

Just want to add that this behavior breaks auto imports for Vue 3 as well (#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
Copy link

eglavin commented Oct 11, 2021

Untitled

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
Copy link
Member

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
Copy link

eglavin commented Oct 12, 2021

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

@JulianKingman
Copy link

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

@andrewbranch
Copy link
Member

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

@merobal
Copy link

merobal commented Oct 21, 2021

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
Copy link

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

@merobal
Copy link

merobal commented Nov 11, 2021

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)
image

With "@types/react": "17.0.31"
image

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

@andrewbranch
Copy link
Member

andrewbranch commented Nov 11, 2021

@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
Copy link

merobal commented Nov 11, 2021

@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
Copy link
Member

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

@mihanizm56
Copy link

"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
Copy link

merobal commented Apr 24, 2022

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

@mihanizm56
Copy link

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
Copy link
Member

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.

@andrewbranch andrewbranch changed the title React snippets importing from the wrong file. Auto-imports offered from another package’s node_modules Apr 25, 2022
@mihanizm56
Copy link

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 =)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug A bug in TypeScript Fix Available A PR has been opened for this issue
Projects
None yet