@urql/next registerUrql fails in Next.js app due to TypeError: React.cache is not a function

[brettchalupa]

Describe the bug

When adding urql to a Next.js project using Jest to test the React components, the call to registerUrl (as per the docs) fails with this error: TypeError: React.cache is not a function

the error

 FAIL  app/page.test.tsx
  ● Test suite failed to run

    TypeError: React.cache is not a function

      13 | };
      14 |
    > 15 | const { getClient } = registerUrql(makeClient);
         |                                   ^
      16 |
      17 | export default function Page() {
      18 |   return <h1>App Router</h1>

      at cache (node_modules/@urql/next/src/rsc.ts:27:27)
      at Object.<anonymous> (app/page.tsx:15:35)
      at Object.<anonymous> (app/page.test.tsx:9:54)

repro steps

the error is able to reproduced in isolation by creating a new Next.js app with Jest and adding urql.

1. npx create-next-app@latest --example with-jest with-jest-app
2. cd with-jest-app
3. npm install --save @urql/next urql graphql
4. follow these steps to create and register an urql client: https://formidable.com/open-source/urql/docs/advanced/server-side-rendering/#nextjs
5. npx jest fails with the above error

key versions

• next 14.0.4
• urql 4.0.7
• @urql/next 1.0.1
• node 18.17.0

Reproduction

https://github.com/brettchalupa/next-urql-jest-react-cache-repro

Urql version

urql: 4.07
@urql/next: 1.0.1

Validations

• I can confirm that this is a bug report, and not a feature request, RFC, question, or discussion, for which GitHub Discussions should be used
• Read the docs.
• Follow our Code of Conduct

[JoviDeCroock]

Ye, not sure how Next wants that to work but it injects a custom React version when running next 😅 so I think to test out server-components you might need to use the canary React version or something similar that supports React.cache.

There are some folks over here providing solutions.