在 Next.js 项目中，VSCode 无法自动导入 "react"。

Question

* 这不是此问题的重复；那里的被接受答案是针对 TypeScript 设计的，似乎不适用于 JavaScript。

我正在 Visual Studio Code 中开发一个 Next.js 项目，在尝试自动导入任何来自"react" 的内容时，唯一的自动导入建议来自 "react.production.min" 和 "react.development"。

我可以手动从"react" 中导入，但即使我在文件中已经有了import { ... } from "react"语句，它仍然不会出现在自动导入建议中，手动导入每个 hook 可能会变得很繁琐。

有没有办法解决这个问题？

- Leo Aso

---

我最近几天也遇到了同样的问题。如果你找到了解决方法，请告诉我。 - Vivek Makwana

Answer 1

对我来说，安装 @types/react 可以解决这个问题。

- el bojo loco

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 2

如果您正在使用TypeScript，那么只需要在next-env.d.ts文件中添加以下一行代码即可。

/// <reference types="@types/react" />

- Satinderpal Singh

Answer 3

从原始帖子的顶部注释中，我假设原始发布者正在使用Javascript而不是Typescript。如果是这样，在我的项目根目录中添加一个jsconfig.json文件并使用这些设置对我有用：

{
  "compilerOptions": {
    "baseUrl": ".",
    "checkJs": true,
    "jsx": "preserve"
  }
}

- Darren Evans

Answer 4

我在使用React-18开发时，在Windows 10操作系统上的VS Code中遇到了同样的问题。自动导入库有时候有效，但有时候无效。 我检查了我的设置，一切都正常，但仍然不起作用。

最后我发现，当我使用命令行（如DOS或Windows Power Shell）打开VS时，一些智能感知功能就无法正常工作，比如自动导入库。

所以，如果我们使用GUI方式打开VS Code，比如进入项目目录，右键点击空白区域，选择“在此处打开VS”，这样就可以解决问题了。

使用这种方法，一切都运行得非常完美。

希望对某人有所帮助。

- Zeeshan DaDa

Answer 5

2023年了，我遇到了一个类似的问题。虽然我不是专家，但经过几个小时的寻找原因，我找到了解决方法：

从tsconfig.json中删除以下行。

"exclude": ["node_modules"]

- Muhammad Huzaifa

Answer 6

现在是2023年。请检查您的tsconfig.json文件。必须有以下这行代码：

"include": ["next-env.d.ts", ".next/types/**/*.ts", "**/*.js", "**/*.jsx"],

检查分辨率是否正确。

- Vladislav Razvenkov

Answer 7

为了澄清一点，由于我暂时还不能评论，我也已经通过安装React JavaScript（而不是TypeScript）应用程序来解决了问题。 我通过执行以下命令安装了全局的react types package：

npm i @types/react -g

现在，当我开始输入类似useState这样的钩子时，我会得到一系列正确的建议。 React建议列表

至于为什么可能会出现这个问题，这是来自VSCode JavaScript文档的说明：

JavaScript库和框架的智能感知功能是由TypeScript类型声明文件提供支持的。类型声明文件是用TypeScript编写的，因此它们可以表达参数和函数的数据类型，允许VS Code以高效的方式提供丰富的智能感知体验。

VSCode JavaScript文档

因此，如果由于某种原因尚未安装React的类型，那么就需要安装它们。

- Arlo