apollographql / apollographql/apollo-client-integrations
`createElement` is not exported from 'rehackt'
- 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