为什么 VS Code 从“hoist-non-react-statics/node_modules/@types/react”导入答案

【问题标题】：Why is VS Code importing from "hoist-non-react-statics/node_modules/@types/react"为什么 VS Code 从“hoist-non-react-statics/node_modules/@types/react”导入
【发布时间】：2021-11-01 09:44:41
【问题描述】：

我最近将我的 react 存储库移到了 /client 下的单个单声道存储库中。我在 /client 时使用 yarn install 安装了 node_modules

VS code intellisense 建议我在导入 useEffect 和 useRef 之类的反应钩子时从 hoist-non-react-statics/node_modules/@types/react 而不是从 react 导入。当我使用 yarn start 编译时，这会导致以下错误

找不到模块：无法解析 'hoist-non-react-statics/node_modules/@types/react' in

我的 package.json 中没有“hoist-non-react-statics”作为依赖项。我的 package.json 依赖项如下：

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

这似乎是与反应相关的@types 的问题。我在react-redux github repo 上提交了一个问题。

yarn upgrade @types/react 修复它。为了更好的衡量，所有的包都应该升级为yarn upgrade --latest，或者只是所有的类型都升级为yarn upgrade --latest --pattern "@types"

https://github.com/reduxjs/react-redux/issues/1806

【问题讨论】：

我突然遇到了同样的情况，而且由于其他人也在这个线程中这样做，我怀疑 VSCode 中的错误。对我来说，它发生在 react-router 和其他几个库中。
经过更多测试，我发现这是最新的打字稿版本（4.4.2+）中的一个错误，我将创建一个解决方案的答案

标签： reactjs visual-studio-code node-modules intellisense

【解决方案1】：

我的打字稿项目也有同样的问题。使用 npm：

npm i @types/react@latest

然后重启vscode

【讨论】：

这应该是公认的答案

【解决方案2】：

我也有同样的问题。升级 @types/react 没有帮助。我不得不删除它来解决问题。一些我仍然从某个地方获得类型定义的方式。这刚刚开始发生在我已经工作了一年的项目上。不确定它是否来自几周前的 VsCode 更新或升级。

这个错误发生在 VsCode windows 和 mac 上。

【讨论】：

请添加更多详细信息以扩展您的答案，例如工作代码或文档引用。
欢迎并感谢您的贡献。我已经发布了一个解决方案，它可以在不更改类型的情况下解决问题，可能需要查看一下。

【解决方案3】：

在降级/升级 VSCode 和 TypeScript 版本后，我发现这个问题发生在最新的 TypeScript 版本中（用 4.4.2 测试，但可能存在于整个 4.4.x 分支中）。 4.3.5 中似乎不存在该问题。您可以执行以下操作：

将 VSCode 更新到最新版本
确保您已安装 TS 4.3.5 或更早版本（全局或在工作区项目中）
打开任何带有.ts 扩展名的文件
使用状态栏中的下拉菜单选择 TypeScript 版本。您要么选择 Workspace 版本，要么选择全局版本，而不是 VSCode 的预装版本。

有关最后一步的说明，请参见下图：

【讨论】：

既然我又回来了……我会把它留给需要它的人；如何全局安装正确的 TypeScript：npm i -g typescript@4.3.5，这似乎不适用于版本选择器，所以我想如果它还没有，你必须暂时将它添加到你的项目中：\ via：npm i -D typescript@4.3.5跨度>
这确实解决了这个问题，但由于某种原因，VSCode 停止在状态栏中显示使用的 TS 版本。有谁知道为什么？

【解决方案4】：

这将在 TypeScript 的新版本 (4.5) 中得到修复。见：https://github.com/microsoft/TypeScript/issues/45784 https://github.com/microsoft/TypeScript/pull/45792

在此发布之前，您可以使用next 版本。

npm i typescript@next

不要忘记重新生成锁定文件以确保安装了正确的版本。

【讨论】：