skip to Main Content

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


  1. The cache object is not imported from React itself, but rather from the next 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:

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

    NPM installation:

    npm i [email protected]
    

    YARN installation:

    yarn add [email protected]
    

    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.

    Login or Signup to reply.
  2. Cache cannot be uses with react versions older that 16.8. You should check the version you’re using.

    npm list react
    

    If you’re using a compatible version, reinstall react.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search