模块“"react"”没有导出成员 'SuspenseList'。 TS2305

Question

我正在尝试学习 React 18 中的一些新功能，例如 SuspenseList 和新的 useId 挂钩，但我似乎一遍又一遍地遇到相同的错误：

Module '"react"' has no exported member 'SuspenseList'.  TS2305

这是我的 package.json 的样子：

  "dependencies": {
    "bootstrap": "^5.1.1",
    "history": "^5.0.1",
    "react": "^18.0.0-rc.0",
    "react-dom": "^18.0.0-rc.0",
    "react-error-boundary": "^3.1.3",
    "react-router-dom": "^6.0.0-beta.5",
    "swr": "^1.0.1",
    "web-vitals": "^1.1.2"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.20.27",
    "@types/react": "^17.0.37",
    "@types/react-dom": "^17.0.9",
    "prettier": "^2.4.1",
    "react-scripts": "4.0.3",
    "typescript": "^4.4.3"
  },

我现在不知道该怎么做，因为我已经安装了 React 18 的 RC 版本，根据工作组 GitHub 讨论板，这应该是最新的。

Answer 1

您从 TypeScript 编译器中收到该错误，因为即使您已经安装了 react@next，您仍在使用 @types/react@17。 SuspenseList 确实存在于实现中，但编译器不知道。

虽然没有等效的 @types/react@next 安装，@types/react 确实包括：

next.d.ts（肯定会出现在 v18 中的类型）；和
experimental.d.ts（目前处于实验版本中的类型）。

The source code of the latter (as SuspenseList and the whole concurrent mode API 仍处于实验阶段）告诉您如何在项目中使用这些类型：

These are types for things that are present in the experimental builds of React but not yet on a stable build.

Once they are promoted to stable they can just be moved to the main index file.

To load the types declared here in an actual project, there are three ways. The easiest one, if your tsconfig.json already has a "types" array in the "compilerOptions" section, is to add "react/experimental" to the "types" array.

Alternatively, a specific import syntax can to be used from a TypeScript file. This module does not exist in reality, which is why the {} is important:
import {} from 'react/experimental'
It is also possible to include it through a triple-slash reference:
/// <reference types="react/experimental" />
Either the import or the reference only needs to appear once, anywhere in the project.

Answer 2

如果有人仍然面临这个问题，请安装最新版本的@types/react More info in the attached npm link npm 我@types/react

模块“"react"”没有导出成员 'SuspenseList'。 TS2305

Module '"react"' has no exported member 'SuspenseList'. TS2305

reactjs

react-hooks

react-suspense