Server Error TypeError: react.createContext is not a function

[singh-jay]

Describe the bug

`import { createClient, gql } from "urql";
const client1 = createClient({
url: "https://api.spacex.land/graphql/",
});

const QUERY = gql{ company { ceo } roadster { apoapsis_au } };

export default async function HomePage() {
const data = await client1.query(QUERY, {}).toPromise();
console.log("DATA", data);
return <></>;
}
`
When using createClient method to create a graphql client in next.js 13
app directory Server Component page.tsx, getting Server Error
TypeError: react.createContext is not a function

Reproduction

https://github.com/singh-jay/next13-urql-example

Urql version

urql v3.03

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]

You can't use context in server-components hence using a provider/... will always error out, relates to vercel/next.js#41958

[singh-jay]

I'm not using context directly in my server component, the error is coming from the urql package itself. I'm simply creating the client and calling client.query(). Is createClient() method calling the context internally because when using graphql-request or apollo-client then query is executing fine, no context issue.

[JoviDeCroock]

yes, urql uses context 😅 just like a lot of other libraries as soon as a library imports createContext it crashes React server components. You can create the client from @urql/core to get stuff without context but because the library imports createContext it fails in Next 13 not much we can do about that tbh...

[singh-jay]

Got it. Thanks

[SushiWaUmai]

Is there really nothing we can do? Is is not possible to workaround this problem?

[jmfury]

Would be a super big bummer if we can't leverage URQL [specifically] on the server in a Next 13 app dir context 😢

Would it not be a matter of providing a server-only export?

Update: @urql/core works fine! - I was mistakenly still importing gql for syntax highlighting from 'urql' - i.e. check the whole chain of your request, @urql/core clients should work fine in the app dir (RSC) context!

[cordial]

hey @jmfury - do you have some example code of before and after and how you got this working?