`createElement` is not exported from 'rehackt'

[elmdecoste]

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 (
        <ApolloNextAppProvider makeClient={makeClient}>
            {children}
        </ApolloNextAppProvider>
    );
}

[phryneas]

Does this change if you downgrade @apollo/client to 3.9.4?

That version updated the rehackt dependency. I don't expect this to be the reason, as that version of rehackt only contains changes regarding server components and none regarding client components, but it recently changed, so let's check it first.

[elmdecoste]

@phryneas The same issue persists on 3.9.4 as well sadly

[phryneas]

Could you please create a reproduction repository? We're not seeing this in our examples or integration tests, so I'm unfortunately unable to help you without some kind of reproduction.

[LeventeCzegledi-Hiya]

For me downgrading @apollo/client did not solve the issue, but downgrading next itself to 14.0.4 seems to resolve it.

Got the idea from this post. I had the problem even though I was using the @apollo/experimental-nextjs-app-support/ssr lib and did everything as the docs mentioned.

I basically created the Provider the same way as @elmdecoste did (without the authLink).

[phryneas]

I would be really thankful for a reproduction at this point. We cannot fix anything without that!