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

Lawal Habeebullahi — Wed, 25 Dec 2024 09:58:52 +0000

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.

Next build error collecting page data; + Chakra UI

Lawal Habeebullahi — Tue, 24 Dec 2024 14:05:28 +0000

Hi there,
This post is about an error I faced recently in a Next.js project.
I got the following error when I ran the next build command.

Collecting page data ...TypeError: d is not a function

Followed by a stack trace which pointed to files in the .next directory. After that came the next helpful output.

Build error occurred
Error: Failed to collect page data for /featured/[slug]

On inspection of the files in the [slug] dynamic path there was only one difference between the previous commit that worked and the current commit that was failing; the use of the Chakra UI's Link component from the chakra-ui/next-link module. Previously the same component was imported from next/link, but in an effort to refactor the code base I changed to the one exported from Chakra UI and ended up breaking that part. Changing the import back to the next/link module fixed the problem.
I effected similar change in another dynamic path and it was fixed as well.

The problem seems to be from the Next.js compatible Link component exported by Chakra UI. I currently don't have any interest in pursuing the cause of this problem in Chakra UI, especially considering that both the Next.js and Chakra UI versions that the project uses are not the latest ones. This error may not be existent in the latest versions of these tools.

My Versions