从React导入cache时报错‘cache not found in react’的原因及解决方法

原因 #

cache是React 18.2.0及以后版本才新增的内置API，你的项目里React版本低于18.2.0，自然找不到这个导出项。另外，Next.js 13早期版本（App Router刚推出阶段）默认依赖的React版本可能不足18.2.0，也会引发这个报错。

解决办法 #

1. 升级React和React DOM #

直接在项目根目录执行对应包管理器的命令，把React和React DOM升到18.2.0及以上：

# npm
npm install react@^18.2.0 react-dom@^18.2.0

# yarn
yarn add react@^18.2.0 react-dom@^18.2.0

# pnpm
pnpm add react@^18.2.0 react-dom@^18.2.0

2. 同步升级Next.js（可选） #

如果你的Next.js版本低于13.4，建议一并升级到最新稳定版，因为13.4+版本默认适配React 18.2.0+，能避免后续其他兼容问题：

npm install next@latest
# 或者yarn/pnpm对应命令

3. 临时替代方案（不想升级时） #

如果因为项目依赖限制没法升级React，可以手动创建QueryClient实例来管理缓存，虽然不如用cache优雅，但能满足SSR预取需求：

// 服务端组件中手动预取数据
import { QueryClient, dehydrate } from '@tanstack/react-query';

export async function generateStaticProps() {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({
    queryKey: ['your-data-key'],
    queryFn: yourDataFetchFunction,
  });

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
  };
}

是否需要额外安装包？ #

不需要，cache是React核心库自带的功能，只要升级到符合要求的React版本就能直接用，不用装额外依赖。

内容的提问来源于stack exchange，提问作者Mintee