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

Posted 2023-02-21

【中文标题】模块“react”没有导出成员“SuspenseList”。 TS2305

【英文标题】：Module '"react"' has no exported member 'SuspenseList'. TS2305

【发布时间】：2022-01-18 13:08:57

【问题描述】：

我正在尝试学习 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 讨论板，它应该是最新的。

【问题讨论】：

导入 Suspense, SuspenseList from "react";

是的，所有先决条件都已完成并且工作正常，直到我尝试从“react”导入 useId 挂钩或 SuspenseList

我是不是导入 SuspenseList 错了？既然它说“反应”没有 SuspenseList ？

这是一个 TypeScript 错误 - 您在 v17 中有 @types/react，它不包括新的 v18 类型。

【参考方案1】：

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

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

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

后者的The source code（SuspenseList 和整个concurrent mode API 仍处于实验阶段）告诉您如何在项目中使用这些类型：

这些是在 experimental React 构建中存在但还没有的东西的类型 在稳定的构建上。

一旦它们被提升到稳定状态，它们就可以被移动到主索引文件中。

要在实际项目中加载此处声明的类型，有以下三种 方法。最简单的一个，如果你的tsconfig.json 已经有一个"types" "compilerOptions" 部分中的数组，是将"react/experimental" 添加到 "types" 数组。

或者，可以从一个特定的导入语法中使用 打字稿文件。这个模块在现实中是不存在的，这就是为什么 很重要：

import  from 'react/experimental'

也可以通过三斜杠引用来包含它：

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

导入或引用只需要在任何地方出现一次 在项目中。

【讨论】：

非常感谢您详细的回答。我确实发现我仍然有这个错误，在我的 tsconfig.tsx 中添加了 "types": ["react-dom/next", "react/next"] 并且如果 @types/react 确实包括：next.d.ts （肯定会出现在 v18 中的类型）；和experimental.d.ts（目前处于实验版本的类型）。那你怎么说我现在的类型不包括你提到的这些？我输入什么来获得最新的类型？因为我已经使用我找到的命令安装了最新类型，但这显然仅适用于 React17

@ClunkyKong "react/next"，如果您查看该文件中的实际内容，不包含 SuspenseList - 它在 "react/experimental" 中。注意答案的更新。

啊谢谢，刚才有几块掉在一起了。向 tsconfig 中的类型添加了反应/实验的东西，但现在出现此错误：元素类型无效：预期字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义。您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入。查看`UserDetails import的render方法如下： import Suspense, SuspenseList from "react";

通过“导出函数UserDetails”导出

-在运行 npm install react@experimental react-dom@experimental 后，它帮助安装了实验版本的实验版本，现在运行顺利