当我尝试从 React 导入缓存时，为什么会收到“在‘react’中找不到缓存”错误？

Question

我正在关注React-query的文档，其中包含有关使用 Next.js 13 应用程序目录中的 Hydrate 组件进行服务器端渲染的部分。在本节中，指南从 React 导入缓存对象，如下所示：

import { cache } from 'react';

但是，当我尝试在自己的项目中从 React 导入缓存时，收到一条错误消息“在‘react’中找不到缓存”。

有人可以解释一下为什么我会收到此错误以及如何修复它吗？我需要安装单独的包才能在 React 中使用缓存对象吗？

Answer 1

该cache对象不是从 React 本身导入的，而是从nextNext.js 应用程序上下文中的包导入的。

要正确导入缓存对象，您应该首先确保在 package.json 文件中正确设置依赖项。

这是我的：

"dependencies": {
  "react": "^18.0.2",
  "react-dom": "^18.0.2",
  "next": "^13.1.1"
}

NPM安装：

npm i next@13.1.1

纱线安装：

yarn add next@13.1.1

由于缓存对象是 next 包的一部分，因此您可以在以下路径中找到其类型定义：node_modules/next/types/index.d.ts。

React-query 文档从使用 Next.js部分开始。尽管可能没有明确说明，但安装 Next.js 来访问文档中描述的功能（例如缓存功能）非常重要。安装 Next.js 应该可以帮助解决您遇到的问题。