[Solved] import {cache} from "react"; Module not exported error

I recently encountered an issue in a Next project that was setup with T3. It only occurred when I tried to build the app with npm run build.

Type error: Module '"react"' has no exported member 'cache'.

As part of the scaffolding by T3 the app was using the cache module from react in a number of places as follows.

import {cache} from "react";

The files where the above line was used were referenced.

Here's part of my package.json file.

  "dependencies": {
    "@radix-ui/react-icons": "^1.3.2",
    "@radix-ui/themes": "^3.1.6",
    "@t3-oss/env-nextjs": "^0.10.1",
    "@tanstack/react-query": "^5.50.0",
    "@trpc/client": "^11.0.0-rc.446",
    "@trpc/react-query": "^11.0.0-rc.446",
    "@trpc/server": "^11.0.0-rc.446",
    "geist": "^1.3.0",
    "next": "^15.0.1",
    "next-auth": "5.0.0-beta.25",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.4.0",
    "server-only": "^0.0.1",
    "superjson": "^2.2.1",
    "zod": "^3.23.3"
  },
  "devDependencies": {
    "@types/eslint": "^8.56.10",
    "@types/node": "^20.14.10",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "@typescript-eslint/eslint-plugin": "^8.1.0",
    "@typescript-eslint/parser": "^8.1.0",
    "eslint": "^8.57.0",
    "eslint-config-next": "^15.0.1",
    "postcss": "^8.4.39",
    "prettier": "^3.3.2",
    "prettier-plugin-tailwindcss": "^0.6.5",
    "tailwindcss": "^3.4.3",
    "typescript": "^5.5.3"
  },
  "ct3aMetadata": {
    "initVersion": "7.38.1"
  },
  "packageManager": "npm@10.9.0"

Solution

Unsuccessful Attempts

• I saw a GitHub issue discussion where it was mentioned that the cache module is only available in canary versions of React. So I installed the canary version of react 18 and it didn't work. I honestly tried it out of desperation because the same discussion stated that Next already uses the canary version of react under the hood.

• I thought installing the latest version of react (v19) would fix it and I was wrong. It didn't.

Eureka

The key to the answer, which I didn't pay attention to in the first 4 hours of trying to fix this issue, is in the first word in the error log; Type. So I eventually figured that i had something to do with the @types/react package, and I was right.

npm i @types/react

What worked for me was upgrading the types/react package to the latest one (18.3.18) from the one I got after the T3 setup (18.3.3). Although there is a newer version of this package on the npm page (19.0.0), the version I got was the result of running npm i @types/react without any flags or options (like @latest). In fact, I couldn't find 18.3.18 on the same release page. But it doesn't affect my project (yet) so I won't go down that rabbit hole now. However, I'd appreciate any explanations for that behaviour.

I hope this has been helpful. Thank you for your time.