I’m following a doc from react-query that includes a section about using the Hydrate component in Next.js 13 app directory with server-side rendering. In this section, the guide imports the cache object from React like this:
import { cache } from 'react';
However, when I try to import cache from React in my own project, I get an error that says "cache not found in ‘react’".
Can someone please explain why I’m getting this error and how I can fix it? Do I need to install a separate package to use the cache object in React?
2
Answers
The
cache
object is not imported from React itself, but rather from thenext
package in the context of Next.js applications.To correctly import the cache object, you should first ensure that your dependencies are properly set up in your package.json file.
Here is mine:
NPM installation:
YARN installation:
Since the cache object is part of the next package, you can find its type definition in the following path:
node_modules/next/types/index.d.ts
.The react-query documentation starts with the Using Next.js section. Although it may not be explicitly stated, it’s important to install Next.js to access the features described in the documentation, such as the cache function. Installing Next.js should help resolve the issue you’ve encountered.
Cache cannot be uses with react versions older that 16.8. You should check the version you’re using.
If you’re using a compatible version, reinstall react.