DEV Community

Cover image for [Solved] import {cache} from "react"; Module not exported error
Lawal Habeebullahi
Lawal Habeebullahi

Posted on

[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"
Enter fullscreen mode Exit fullscreen mode

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more