Invariant: incrementalCache missing in unstable_cache

[lorikku]

Summary

When I try to run this code:

import { unstable_cache } from "next/cache";

import { getPosts } from "@/sanity/api";

import ProjectsLayout from "./ProjectsLayout";
import Project from "./Project/Project";

const getData = unstable_cache(() => getPosts({ labKey: "STAERLAB" }), [], {
  tags: ["posts"],
});

const ProjectsStaerlab = async (
  props: React.HTMLAttributes<HTMLDivElement>
) => {
  const posts = await getData();

  return (
    <ProjectsLayout {...props}>
      {posts.map((post, index) => {
        return <Project key={index} post={post} variant="STAERLAB" />;
      })}
    </ProjectsLayout>
  );
};

export default ProjectsStaerlab;

I get the following error: Invariant: incrementalCache missing in unstable_cache.

No clue how to fix this... Is this a bug? I've seen other codebases use unstable_cache in the same way I am doing it here, but they are not getting the error.

Additional information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:22 PDT 2022; root:xnu-8020.121.3~4/RELEASE_X86_64
Binaries:
  Node: 18.13.0
  npm: 9.6.7
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 13.4.6
  eslint-config-next: 13.4.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.3

[lorikku]

A codebase where it's also used but working: https://github.com/steven-tey/dub/blob/main/app/ui/home/stats.tsx

[lorikku]

The issue was solved by moving the usage of unstable_cache into a component rather than defining it outside of one.

[thesyedbasim]

what if we want it in different files, let's say in a @/lib/ file. how do we handle this?

[Dam998]

I have the API request in a separate file and I solved it by specifying 'use server' at the top of the API file

[emhat098]

I was adding the use server at the top of the file which use unstable_cache. And it resolved the problem.

[KonstantinKliukhin]

Both approaches are awful. I have separate file fore requests functions and I don't want to call unstable_cache directly in component. Also I don't want to use server actions. Any new solutions here?

[DuckThom]

To anyone else running into this: for me the issue was that I added unstable_cache to a function used inside the middleware