Hi, I arrived at a little bug with caching in dev, here is a minimal reproduction of it

// src/app/dev/test/page.tsx
import { revalidatePath, revalidateTag, unstable_cache } from "next/cache";

export const dynamic = "force-dynamic";

const ANY_CACHE = "ANY_CACHE";

const foo = "bar";

const myTestingFunction = unstable_cache(async () => {
  return foo;
}, [ANY_CACHE]);

const Testing = async () => {
  const testing = await myTestingFunction();
  return (
    <div>
      <p>{testing}</p>

      <form
        action={async () => {
          "use server";
          revalidateTag(ANY_CACHE);
          revalidatePath("/dev/test");
        }}
      >
        <button type="submit">Revalidate</button>
      </form>
    </div>
  );
};

export default Testing;

Here is my code, it displays bar and a button to revalidate cache


if I change "bar" to "bar-bis" in my code it doesn't change, if I click on the revalidate button it doesn't change, if I restart the dev server it still does not change. Until I delete .next directory, it does not change.

If I switch the function to return foo+"-bas", it writes "bar-bis-bas", but when i change back to return foo, it reuse the initial cached value ("bar")


EDIT :
If i use "ANY_CACHE" directly instead of a const, it does revalidate on click

EDIT2 :
using type ANY_CACHE = "ANY_CACHE" and than using "ANY_CACHE" satisfies ANY_CACHE enables me to keep some kind of string safety, is there any cleaner way ?