apollographql / apollographql/apollo-client-integrations

`createElement` is not exported from 'rehackt'

Open
#199 5 comments 3 reactions 0 assignees View on GitHub
needs-reproduction
Dominant language
TypeScript
Stars
556
Forks
53
PR merge metrics
No merged PRs in 30d

Description

I am using NextJS 14.1 and am now running into an issue when using this library to create a client and provider for my application.

We updated to:
* @apollo/client to 3.9.5
* @apollo/experimental-nextjs-app-support to 0.8.0

And now whenever we try to the dev server or build we get the error:

```
⨯ ./node_modules/.pnpm/@apollo+client@3.9.5_@types+react@18.0.20_graphql@16.7.1_react-dom@18.2.0_react@18.2.0_subscriptions-transport-ws@0.11.0/node_modules/@apollo/client/react/context/ApolloConsumer.js
Attempted import error: 'createElement' is not exported from 'rehackt' (imported as 'React').

Import trace for requested module:
./node_modules/.pnpm/@apollo+client@3.9.5_@types+react@18.0.20_graphql@16.7.1_react-dom@18.2.0_react@18.2.0_subscriptions-transport-ws@0.11.0/node_modules/@apollo/client/react/context/ApolloConsumer.js
./node_modules/.pnpm/@apollo+client@3.9.5_@types+react@18.0.20_graphql@16.7.1_react-dom@18.2.0_react@18.2.0_subscriptions-transport-ws@0.11.0/node_modules/@apollo/client/react/context/index.js
./node_modules/.pnpm/@apollo+client@3.9.5_@types+react@18.0.20_graphql@16.7.1_react-dom@18.2.0_react@18.2.0_subscriptions-transport-ws@0.11.0/node_modules/@apollo/client/react/index.js
./node_modules/.pnpm/@apollo+client@3.9.5_@types+react@18.0.20_graphql@16.7.1_react-dom@18.2.0_react@18.2.0_subscriptions-transport-ws@0.11.0/node_modules/@apollo/client/index.js
./src/lib/apollo-wrapper.tsx
./src/layouts/public/root.tsx
```

Here's our `apollo-wrapper.tsx` file:
```
"use client";

import { ApolloLink, HttpLink } from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import {
ApolloNextAppProvider,
NextSSRInMemoryCache,
NextSSRApolloClient,
SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support/ssr";
import { getAuth } from "firebase/auth";
import { hasuraConfig } from "src/config";

const requestAccessToken = async () => {
const token = await getAuth().currentUser!.getIdToken();
return token;
};

// have a function to create a client for you
export function makeClient() {
const httpLink = new HttpLink({
uri: "https://" + hasuraConfig.endpoint,
fetchOptions: { cache: "no-store" },
});

const authLink = setContext(async (req, { headers }) => {
const token = await requestAccessToken();
return {
headers: {
...headers,
Authorization: token ? `Bearer ${token}` : "",
},
};
});

return new NextSSRApolloClient({
// use the `NextSSRInMemoryCache`, not the normal `InMemoryCache`
cache: new NextSSRInMemoryCache(),
link:
typeof window === "undefined"
? ApolloLink.from([
authLink,
new SSRMultipartLink({
stripDefer: true,
}),
httpLink,
])
: authLink.concat(httpLink),
});
}

export function ApolloWrapper({ children }: React.PropsWithChildren) {
return (

{children}

);
}
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the reported failure during the Next.js dev server or build, using src/lib/apollo-wrapper.tsx and the Apollo import trace as entry points. Investigate the reported createElement export failure from rehackt; done means the client and provider build and run without this import error.

Written by the indexing model from the issue text.

Assessment

Tech stack
firebase, graphql, nextjs, react, typescript
Domain
api, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.