Error Using ApolloProvider, cannot read properties of undefined (reading 'Symbol(__APOLLO_CONTEXT__)')

Client SDKs
1

I am trying to set up a simple React front-end that uses ApolloClient to hit an existing GraphQL server I have running locally.

The index.tsx file is pretty bare-bones:

import "./styles.css";
import { createRoot } from "react-dom/client";
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client";

const rootElement = document.getElementById("root");
if (!rootElement) throw new Error("Root element not found");
const root = createRoot(rootElement);

const ApiClient = new ApolloClient({
  uri: 'http://localhost:3000/api',
  cache: new InMemoryCache(),
});

root.render(
  <ApolloProvider client={ApiClient}>
    Hello World!
  </ApolloProvider>
);

When I run the app locally I get the following error:

..\node_modules\@apollo\client\react\context\ApolloContext.js:11 Uncaught TypeError: Cannot read properties of undefined (reading 'Symbol(__APOLLO_CONTEXT__)')
    at getApolloContext (..\node_modules\@apollo\client\react\context\ApolloContext.js:11:25)
    at ApolloProvider (..\node_modules\@apollo\client\react\context\ApolloProvider.js:7:25)

Googling the error mostly turned up issues with using the provider from a server-side component in Next.js, but I’m not using Next.js. I am using bun build to transpile the react/typescript to an .html/.js pair.

I’m beginning to suspect this may be a bun issue, but I wanted to make sure I wasn’t doing something obviously wrong before I started a conversation there.

Any thoughts/suggestions on what I might be doing wrong here?

2

Hey @Tim-S :wave:

It looks like its failing on this line from the build output:

var context = React.createContext[contextKey]

where contextKey is Symbol.for("__APOLLO_CONTEXT__") for environments that support symbols.

We use a symbol on React.createContext to access the context value in ApolloProvider to ensure that we get the right value in case multiple versions of React are installed.

Can you log out what you get for React.createContext? Seems this is undefined for some reason in your app.

3

Looks like it’s a function:

(defaultValue) {
      defaultValue = {
        $$typeof: REACT_CONTEXT_TYPE,
        _currentValue: defaultValue,
        _currentValue2: defaultValue,
        _threadCount: 0,
        Provider: nul…

The contextKey there is the symbol: Symbol(__APOLLO_CONTEXT__) (canUseSymbol is true)

4

I’ve set up a minimal repro here: GitHub - timothy-s-dev/bun-apollo-test

5

Huh, if I look at that index-*.js build file, I see the following:

function getApolloContext() {
  invariant2("createContext" in exports_rehackt, 54);
  var context = undefined[contextKey];
  if (!context) {
    Object.defineProperty(undefined, contextKey, {
      value: context = undefined({}),
      enumerable: false,
      writable: false,
      configurable: true
    });
    context.displayName = "ApolloContext";
  }
  return context;
}

No wonder you’re having issues. The React.createContext symbol was completely replaced with undefined. In fact this looks to be the case wherever we are using import * as React from 'rehackt' inside Apollo Client. The implementation of ApolloProvider inside that index-*.js file is also littered with undefined for all React.* APIs.

@lenz by chance do you know of any issues between Bun and rehackt?

6

Thanks! That was the lead I needed for further googling. Looks like there is an issue with bun+rehackt - I was able to work around the issue and get the page to load successfully w/ no errors by forcing a down-grade to rehackt 0.0.6

I have to step away for a bit, but will confirm that the client works/actually pulls data from the graphql server as expected later this evening.

7

On rehackt 0.0.6 the provider does appear to be working as expected. I’m able to use useQuery elsewhere in the app with no problems.

Thanks again for the assistance!

8

I’m following up in that issue. Thanks for bringing this to our attention.

1 Like