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.

Top comments (0)