fix: Import React.cache only when needed#923
Conversation
Having `import { cache } from 'react'` caused issues when using
React 18 or 19 GA, because the `cache` function is only exported
in canary builds (which the Next.js app router uses internally,
regardless of what's in your app's package.json).
This meant importing from `'nuqs/server'` caused an import error
when done from non app-router code, like the pages router, or
API route definitions, which would fallback to the version of React
defined in the package.json (and likely a stable one).
Changing the import to `import * as React from 'react'` is what is
being highlighted in the React docs themselves, and allows to only
call the cache function when actually creating a cache object.
Closes #804, and supersedes #805.
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
commit: |
|
🎉 This PR is included in version 2.4.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
still seeing this issue on 2.4.1 |
|
@rik-iso what's your setup? |
|
This might be operator error but I'm confused how to fix it. The specific file In the above crash, it's being used in a pages router page, but it also needs to be used in an app router page (we're mid-migration). Should I be importing it differently? |
|
(The crash actually only happens on |
|
Are you using the cache feature ( I'll try and reach out to the Next.js team to see if they have ideas for this kind of use-case, and I'll try and reproduce on my end in the mean time. |
|
Yeah I am using that cache on this property but only in the app router pages - the cache shouldn't be being used in the pages router code path. |
|
I'm going to see if I can refactor out the use of the cache as I think it might be mostly redundant and see if that stops the error for now. |
|
If you don't need the no-prop-drilling property of the cache, you can use a loader instead. |
|
Possibly found the culprit - for some reason I am doing then I am only importing Cleaning this up to use |
|
nevermind, that didn't solve it sadly. |
|
Could you paste the result from running While trying to reproduce this in the e2e environment, I managed to get the cache to compile (and partially run) in the pages router, which is definitely not supposed to happen 🙃 (ie: I can't get it to fail on |
|
|
Please don't spend too many cycles on this right now if it's not trivial to reproduce (unless someone else reports the same issue of course) - I've worked around it. That said I'm happy to try and help repro it as much as possible if it helps! I'm working around it for now by making a copy of the file that depends on |
|
Ahh I get the error by reproducing your exact setup (matching Node.js, React & Next.js versions). So updating some of those might solve the issue. My bet is on React, I'll see if bumping just that one to 19 solves it. Edit: bingo, switching to React 19 did solve the issue. Which is weird because 19 doesn't export the cache, it's still in canary.. I'd like to get to the bottom of it just so that I can advise others that encounter the same issue. |
|
Just I'm concerned that a React upgrade may be a herculean task on this old repo but iirc for the pages router it will stay effectively stuck to React 18? but good to know. we're luckily burning the world and building a new app soon on Next 15/R19 so not inclined to go too deep on this if nuqs itself is fine (phew) and I have a workaround here... Thanks so much for looking into this and for nuqs. Looking forward to adding nuqs to our new app too! |
|
It's only in the TIL that |
|
Oh I was looking for something like pnpm catalogs just the other day, thanks for showing me that! Time to get pnpm upgraded to v10. |
|
You're welcome! Just watch out for postinstall scripts not running by default in v10. This can help (Next.js needs sharp & swc): Lines 35 to 43 in 0910b2d |
|
Thanks for the sponsorship! 💖 |
|
I'm in the same spot as @rik-iso, we're also doing a migration from pages to app router, added nuqs to smoothen out search params handling but it's throwing the exact same cache is not exported error, even though I'm not using any server side features like I want to be able to share the search params definition object between app (both server and client) and pages router so I can't just change the import from EDIT: Can't update next or |
|
@schardev thanks for the repro. If you can't update to React 19 (which would be the best way to solve this), you could patch the |
|
Adding this here for anyone who checks later - thanks for the patch, it worked like a charm 👍 |
3 participants
Having
import { cache } from 'react'caused issues when using React 18 or 19 GA, because thecachefunction is only exported in canary builds (which the Next.js app router uses internally, regardless of what's in your app's package.json).This meant importing from
'nuqs/server'caused an import error when done from non app-router code, like the pages router, an API route definition, or a non-Next.js framework, which would fallback to the version of React defined in the package.json (likely a stable one).Changing the import to
import * as React from 'react'is what is being highlighted in the React docs themselves, and allows to only call the cache function when actually creating a cache object.Closes #804, and supersedes #805.